Installation

Beard can be installed via NPM:

npm install beardcss

Or link it from the CDN

<link rel="stylesheet" href="https://unpkg.com/beardcss/dist/beard.css">

Adding Beard into your project

The Recommended Way

The best way to add Beard to your project is to import beard.before and beard.after into your main Sass file. From there, we recommend adding your site styles between the `beard.before` and `beard.after` sections. This allows for the best source ordering. For example:

// Customize Beard's defaults
$brand-color-1: #3BBD61;

// Import Beard's settings and tools
@import '../node_modules/beardcss/stylesheets/beard.before';

// Place custom spacing, color, and media query configuration here
@include new-spacing-helper('0\\.5', 0.5);
@include new-color('1--light', lighten($brand-color-1, 15%));
@include new-breakpoint(tablet, '(min-width: 600px)');

// Your site styles go here
@import 'app';

// Beard's helpers are generated here
@import '../node_modules/beardcss/stylesheets/beard.after';

Note: Don’t forget to change the import paths to where you installed Beard.


Or…Just the Dead Simple Installation

Or you could just import it directly. We don't recommend it, but if you need something quick, go ahead!

@import '../node_modules/beardcss/beard'