Responsive Prefixes

Because Beard ships with a standard set of breakpoints, many of the helpers are responsive. These helpers are generated from the breakpoints in your configuration. These are the default breakpoints:

Name Prefix Target
Small .sm- (min-width: 300px)
Medium .md- (min-width: 600px)
Large .lg- (min-width: 900px)
Extra Large .xlg- (min-width: 1440px)
Only Small .only-sm- (max-width: 599px)
Only Medium .only-md- (min-width: 600px) and (max-width: 899px)
Only Large .only-lg- (min-width: 900px) and (max-width: 1439px)
Only Extra Large .only-xlg- (min-width: 1440px)

You can use responsive prefixes to specify when an element should be shown on a page. The following would hide the element on the `lg` breakpoint.

<div class="lg-dn">Show on the large breakpoint</div>

Adding New Breakpoints

This mixin allows you to add a new breakpoint to be generated along with Beard’s defaults. This will also cause every responsive-helper type to generate a new classes using this breakpoint's key

@include new-breakpoint(tablet, '(min-width: 600px)');

Note: Calling this mixin will only work if you import Beard’s before and after partials, as recommended by the installation guide.

Using breakpoints in Sass with media()

Used inside a CSS declaration, this mixin will generate the appropriate media query based on the name registered in Beard's configuration. The media queries are configurable by overriding the settings in _config.scss or by adding new ones with the new-breakpoint() mixin.

// This Scss
.narcos {
    @include media(sm) {
        display: none;
    }
}

// Generates this CSS
@media screen and (min-width: 300px) {
    .narcos {
        display: none;
    }
}