CSS reference - Bifrost

Responsive breakpoints

Bifrost uses some default viewport width values for responsive breakpoints.

Device pixels vs CSS px unit

Breakpoint names

Name	small	medium	large	xl	xxl
Screen width	600px	960px	1280px	1600px	1920px

CSS class names

CSS classname	Displayed for screens	Devices
`.to-small`	up to 600px wide	Mobile Portrait
`.from-small`	600px and wider	Mobile Landscape Tablet Desktop
`.to-medium`	up to 960px wide	Mobile Tablet Portrait
`.from-medium`	960px and wider	Tablet Landscape Desktop
`.to-large`	up to 1280px wide	Mobile Tablet Small Desktop
`.from-large`	1280px and wider	Medium-XL Desktop
`.to-xl`	up to 1600px wide	Mobile Tablet Small-Medium Desktop
`.from-xl`	1600px and wider	Large-XL Desktop (Fixed sidebar)
`.to-xxl`	up to 1920px wide	Mobile Tablet Small-Large Desktop
`.from-xxl`	1920px and wider	XL Desktop

Examples

Try resizing your window to test the demos below:

<div class="to-medium">displayed up to medium (0px-959px)</div>
<div class="from-medium">displayed for medium and larger (960px +)</div>

displayed up to medium (0px-959px)

displayed for medium and larger (960px +)

You can combine one .from-* class and a .to-* class to display only when between two breakpoints.

<div class="to-small">displayed up to small (0px-599px)</div>
<div class="from-small to-medium">
  displayed between small and medium (600px-959px)
</div>
<div class="from-medium">displayed for medium and larger (960px +)</div>

displayed up to small (0px-599px)

displayed between small and medium (600px-959px)

displayed for medium and larger (960px +)

Sandbox

Resize width of the preview window below to see different texts rendered.

<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css" /><link rel="stylesheet" href="styles.css" />

<div class="to-medium">displayed up to medium (0px-959px)</div>
<div class="from-medium">displayed for medium and larger (960px +)</div>

<hr />

<div class="to-small">displayed up to small (0px-599px)</div>
<div class="from-small to-medium">
  displayed between small and medium (600px-959px)
</div>
<div class="from-medium">displayed for medium and larger (960px +)</div>

Open Sandbox