Tools

Beard isn't packed full of every feature you might need, but it does come with a small set of mixins to make life easier.


appearance()

The appearance mixin provides an easy way to assign or remove platform-native styling on form elements.


.terry {
    @include appearance(none);
}

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 default media queries or 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;
    }
}

new-breakpoint()

This mixin allows the user to generate their own breakpoint in Beard, which is in turn used to generate many types of responsive helpers, like spacing, breakpoints, text-alignment, and more.


// Somewhere in your configuration before importing Beard
@include new-breakpoint('watch', '(min-width: 100px) and (max-width: 250px)');

font-size()

This mixin allows you to generate font-size declarations with rem units and uses pixels as a fallback value.


.heading {
    @include font-size(16);
}

.heading {
  font-size: 16px;
  font-size: 1.6rem;
}

Note: If you've modified the font-size on the html element, the generated values will not match. It's best to either leave the value at its default or create a mixin of your own which accomplishes the same result.


new-spacing-helper()

This mixin allows you to add a value to be generated along with Beard's default spacing helpers, including responsive versions of each.


// Somewhere before you import Beard
@include new-spacing-helper('16');