Breakpoints
Core concepts
-
Breakpoints are the building blocks of responsive design. Use them to control when your layout can be adapted at a particular viewport or device size.
-
Use media queries to architect your CSS by breakpoint. Media queries are a feature of CSS that allow you to conditionally apply styles based on a set of browser and operating system parameters. We most commonly use
min-widthin our media queries. -
Mobile first, responsive design is the goal. Kyber's CSS aims to apply the bare minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices. This optimizes your CSS, improves rendering time, and provides a great experience for your visitors.
Available breakpoints
Kyber includes six default breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you’re using our source Sass files.
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| Extra small | None | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥1600px |
Max width containers
Containers center and horizontally pad their content. Kyber provides a set of k- prefixed container utility classes that cap content at a fixed max width matching each grid breakpoint above. Each container is centered and 100% wide until its max width is reached. Unlike the responsive .container classes, the cap is the same at every viewport size — there are no media queries involved.
| Class | Max width |
|---|---|
k-container-sm | 576px |
k-container-md | 768px |
k-container-lg | 992px |
k-container-xl | 1200px |
k-container-xxl | 1600px |
Each container is centered within its parent. On wide screens the smaller containers stay noticeably narrow, while the larger ones fill the available space until their cap is reached.
<div className="k-container-sm bg-primary-subtle border border-primary rounded p-2 text-center"> k-container-sm — max-width 576px </div>
<div className="k-container-md bg-primary-subtle border border-primary rounded p-2 text-center"> k-container-md — max-width 768px </div>
<div className="k-container-lg bg-primary-subtle border border-primary rounded p-2 text-center"> k-container-lg — max-width 992px </div>
<div className="k-container-xl bg-primary-subtle border border-primary rounded p-2 text-center"> k-container-xl — max-width 1200px </div>
<div className="k-container-xxl bg-primary-subtle border border-primary rounded p-2 text-center"> k-container-xxl — max-width 1600px </div>
JavaScript
There are JavaScript constants for generic device level breakpoints available in the @emoney/kyber package.
<ul> {Object.entries(breakpoints).map(([key, value]) => ( <li key={key}> <b>{key}</b>: {value} </li> ))} </ul>
These can be used with libraries like use-media.
import useMedia from 'use-media';
import { breakpoints } from '@emoney/kyber';
const Example = () => {
const isDesktop = useMedia(`(max-width: ${breakpoints.DESKTOP}px)`);
return <div>{isDesktop ? <p>Desktop view</p> : <p>Mobile view</p>}</div>;
};