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-width in 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

JavaScript

There are JavaScript constants for generic device level breakpoints available in the @emoney/kyber package.

Result

Loading...

Live Editor

<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>;
};