Breakpoints

Breakpoints are the triggers in base17 for how your layout responsive changes across device or viewport sizes.

Core concepts

• Breakpoints are the building blocks of responsive design.
• Use media queries in 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 is the goal. Base17'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

Base17 includes six by default breakpoints for building responsively.

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.

These breakpoints are customizable via Sass — you’ll find them in a Sass map in our _variables.scss stylesheet.

$grid-breakpoints: (
   null: 0,
   xs: 240px,
   sm: 576px,
   md: 768px,
   lg: 992px,
   xl: 1200px,
   xxl: 1500px,
   xxxl: 1700px,
   xxxxl: 2000px
);

Media queries

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

Min-width queries

Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.

// regular breakpoint
@include breakpoint(sm) { ... }
@include breakpoint(md) { ... }
@include breakpoint(lg) { ... }
@include breakpoint(xl) { ... }
@include breakpoint(xxl) { ... }
// breakpoint all smaller and actual breakpoint
@include breakpoint-max(md) { ... }
// breakpoint for smaller then the breakpoint
@include breakpoint-down(lg) { ... }
// only desktop -- uses $mobile-breakpoint 
@include desktop-only(xl) { ... }
// only mobile 
@include mobile-only(xl) { ... }
// Usage
.custom-class {
   display: none;
}
@include breakpoint(sm) {
   .custom-class {
       display: block;
   }
};

Special Media queries

In addition to the min-width Media queries is it possible to trigger on certain Browser or Device behaviors.

// phones only - detects real phones
@include phone-portrait() { ... }
// phone landscape
@include phone-landscape() { ... }
// retina screens
@include retina-screen() { ... }
// inverted screen colors
@include screen-inverted-colors() { ... }