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.

// This Scss
.terry {
    @include appearance(none);
}

// Generates this CSS
.terry {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

font-size()

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

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

// Generates this CSS
.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.

media()

This mixin allows you to use the breakpoints from Beard inside of your Sass.

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

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

See also: Responsive Prefixes

new-breakpoint()

This mixin allows you to add breakpoints to Beard’s configuration.

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

See also: Adding New Breakpoints

new-color()

This mixin allows you to add a color to Beard’s configuration.

@include new-color('red', #FF0000);

See also: Adding New Color Helpers

new-spacing-helper()

This mixin allows you to add a set of responsive spacing helpers to Beard’s configuration.

@include new-spacing-helper('tiny', 0.3);

See also: Adding New Spacing Helpers