Breakpoints

Core concepts #

The following points describe the core concepts behind breakpoints:

• 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. Halfmoon'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 #

Halfmoon includes six default breakpoints, sometimes referred to as "grid tiers", for building responsively.

Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don't specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device.

Media queries #

Since Halfmoon is developed to be mobile first, we use a handful of media queries (opens in new tab) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.

Media queries Min-width #

Halfmoon primarily uses the following media query ranges—or breakpoints—for our layout, grid system, and components.

/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Halfmoon */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { ... }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { ... }

Media queries Max-width #

We occasionally use media queries that go in the other direction (the given screen size or smaller). For these media queries, we subtract .02px from them, and use them as our max-width values.

/* `xs` returns only a ruleset and no media query */
/* ... { ... } */

/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { ... }

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) { ... }

/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) { ... }

/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) { ... }

/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) { ... }

Media queries Single breakpoint #

There are also media queries for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths. For example, here's the query for targeting only the md breakpoint:

/* Apply styles only on medium devices */
@media (min-width: 768px) and (max-width: 991.98px) { ... }

Media queries Between breakpoints #

Similarly, media queries may span multiple breakpoint widths. Here's the query for targeting between the md and xl breakpoints:

/* Apply styles starting from medium devices and up to extra large devices */
@media (min-width: 768px) and (max-width: 1199.98px) { ... }