Breakpoints

Barebones defines breakpoint values in Sass and uses them to generate utilities for the grid, spacing and visibility utilities. The breakpoint system is small by design. It gives projects a predictable responsive foundation without adding a full utility framework.

Breakpoint configuration

Breakpoints are configured in assets/styles/config/_variables.scss. The main layout breakpoints are lg, md, sm, and xs. The nav breakpoint is included so the mobile menu can switch independently from the grid, for example when the header runs out of space to display all items in a normal desktop view.

The lg, md, sm, xs and nav prefixes are also used by grid, spacing and responsive visibility classes.

SCSS
$breakpoint-lg: 1280px;
$breakpoint-md: 1024px;
$breakpoint-sm: 768px;
$breakpoint-xs: 480px;
$breakpoint-nav: 1000px;

Breakpoint ranges

The responsive utility classes are generated from the $breakpoints map. This means each generated responsive class applies only within its matching range.

SCSS
$breakpoints: (
    'lg' '(min-width: ' + ($breakpoint-md + 1) + ')',
    'md' '(min-width: ' + ($breakpoint-sm + 1) + ') and (max-width: ' + $breakpoint-md + ')',
    'sm' '(min-width: ' + ($breakpoint-xs + 1) + ') and (max-width:'  + $breakpoint-sm + ')',
    'xs' '(max-width: ' + $breakpoint-xs + ')'
);

Spacing usage

Responsive spacing utilities also use breakpoint prefixes.

Example:
The class sm:py-md only applies within the small breakpoint range.

HTML
<section class="py-lg sm:py-md xs:py-sm">
    Content
</section>

Visibility usage

Visibility usage

Visibility helpers use the same breakpoint names. It is advised to use these sparingly. In most cases, responsive layout changes are preferable to rendering separate markup for different screen sizes.

HTML
<div class="visible-lg">Visible on large screens</div>
<div class="hidden-xs">Hidden on extra-small screens</div>

Sass mixins

Barebones provides mixins for custom responsive styles.

SCSS
@include resp-min($breakpoint-md) {
    // styles
}

@include resp-max($breakpoint-sm) {
    // styles
}

Use these in component, layout, or block Sass when a utility class is not the right fit.

The mobile navigation uses $breakpoint-nav.

SCSS
$breakpoint-nav: 1000px;

Header and navigation styles use this value to switch between desktop navigation and the mobile menu.

SCSS
@include resp-max($breakpoint-nav) {
    // mobile navigation styles
}