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. felt-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.

Available breakpoints#

felt-css includes four breakpoints, sometimes referred to as grid tiers, for building responsively. They are the same as Bootstrap's first four; Bootstrap's xl (≥1200px) and xxl (≥1400px) tiers don't exist here, since felt-css is made for apps whose content rarely needs more than a large screen.

The same breakpoints drive the responsive containers, the grid, .navbar-expand-* and the responsive utilities. Only some utility families come per breakpoint: grid, display, flex (including order), spacing and gap, text alignment, float, object-fit and sticky.

Media queries#

Since felt-css is developed to be mobile first, it uses a handful of media queries to create sensible breakpoints for layouts and interfaces. These breakpoints are based on minimum viewport widths and allow us to scale up elements as the viewport changes. felt-css is plain CSS without Sass mixins, so use the media queries directly in your own CSS.

Min-width#

felt-css uses the following media query ranges for its layout, grid system and components.

/* X-Small devices (portrait phones, less than 576px):
   no media query, since this is the default */

/* 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) { ... }

For example, to hide an element on the smallest screens and show it from the sm breakpoint up:

.custom-class {
  display: none;
}
@media (min-width: 576px) {
  .custom-class {
    display: block;
  }
}

Max-width#

We occasionally use media queries that go in the other direction (the given screen size or smaller). Subtract .02px from the breakpoint so the two ranges don't overlap:

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { ... }

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) { ... }

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) { ... }

Single breakpoint#

There are also media queries for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths. For example, medium devices only:

@media (min-width: 768px) and (max-width: 991.98px) { ... }

Between breakpoints#

Similarly, media queries may span multiple breakpoint widths, e.g. from small up to (but not including) large devices:

@media (min-width: 576px) and (max-width: 991.98px) { ... }