Breakpoints

Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in boodoo.

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.
• Mobile first, responsive design. boodoo's CSS aims to apply the fewest styles to make a layout work at the smallest breakpoint, and then layers on styles for larger devices.

Available breakpoints

boodoo includes six default breakpoints, sometimes referred to as grid tiers.

Media queries

Since boodoo is developed to be mobile first, we use a handful of media queries 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.

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in boodoo

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

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

// Extra extra large devices (large desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Media mixins

In your source Sass, use the media-breakpoint-up, media-breakpoint-down, and media-breakpoint-only mixins:

@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-only(md) { ... }