beard/beard.scss to your main Sass file. This allows for the best source ordering. From there, we recommend adding your site styles between the "Objects" and "Helpers" sections, like so:
```scss
@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'
@import '../node_modules/beardcss/stylesheets/beard.after';
```
---
### 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'```
================================================
FILE: beard.scss
================================================
@import 'stylesheets/beard.before';
// Custom colors, breakpoints and spacing helpers
//-------------------------------------------------------------------------- */
// @include new-color('1--light', lighten($brand-color-1, 15%));
// @include new-breakpoint(tablet, '(min-width: 600px)');
// @include new-spacing-helper('small', 0.3);
// Put your site styles here
//-------------------------------------------------------------------------- */
// @import 'app.scss';
@import 'stylesheets/beard.after';
================================================
FILE: bower.json
================================================
{
"name": "beard",
"description": "A CSS framework for people with better things to do",
"main": [
"beard.scss"
],
"version": "2.2.4",
"homepage": "https://github.com/monarkee/beard",
"authors": [
"David Hemphill | Border Direction | Class Prefix | Default Amounts |
|---|---|---|
| Border Radius | .br | 0-10 |
| Border Left Radius | .blr | 0-10 |
| Border Right Radius | .brr | 0-10 |
| Border Top Left Radius | .btlr | 0-10 |
| Border Top Right Radius | .btrr | 0-10 |
| Border Bottom Left Radius | .bblr | 0-10 |
| Border Bottom Right Radius | .bbrr | 0-10 |
Beard’s border helpers use a default scale from 1 to 3. This can be changed by setting $beard-border-size-amount before you import Beard.
| Class | Purpose |
|---|---|
.xbrdr |
Remove the border from an element |
.brdr1 |
Add a border to all sides of an element |
.brdr1--top |
Add a border to the top of an element |
.brdr1--right |
Add a border to the right side of an element |
.brdr1--bottom |
Add a border to the bottom of an element |
.brdr1--left |
Add a border to the left side of an element |
Beard's color helpers are generated with !important to provide the ability to override any color values set in your CSS. It's also encouraged to use these helpers in place of modifiers which do the same thing.
Beard's color helper system allows you to use hover, focus, and active colors, using a special syntax. Beard can transition any color to any other color in the system, which makes these helpers real timesavers.
| Prefix | Purpose | Example | Demo |
|---|---|---|---|
: |
Hover |
class="tc1 :tcwarning" |
Sample link hover text |
:: |
Focus |
class="bcg20 ::bc1" |
|
@ |
Active |
class="bgg05 tcg40 @bg1 @tcw" |
Click Me |
<div class="df ofh br3">
<input type="text" class="xbrdr brdr1--top brdr1--bottom brdr1--left bcg20 ::bc1 ph2 ft4" placeholder="Enter your email">
<button class="dib pv1 ph2 ft4 fw6 bg1 :bg2 ::bg3 @bg4 tcw brdr1 bc1">Click Me</button>
</div>This mixin allows you to add colors to be generated along with Beard's default color helpers.
// Tools & Mixins
//-------------------------------------------------------------------------- */
// @import '../../../stylesheets/tools.font-size';
// This has to go between Beard's tool.font-size and helpers.spacing partials
@include new-color('1--light', #85D7FF); // Outputs .bg1--light { background-color: #85D7FF !important }
@include new-color('red', #FF0000); // Outputs .bgred { background-color: #FF0000 !important }
// Helpers
//-------------------------------------------------------------------------- */
// @import '../../../stylesheets/helpers.spacing';Note: Calling this mixin will only work if you import each of Beard’s partials individually, as recommended by the installation guide.
Beard has a set of settings you can tweak to customize the framework for you project. Listed below are some of the important ones. The complete list is found in stylesheets/_settings.scss.
| Variable | Default | Purpose |
|---|---|---|
$beard-reset |
true |
Adds a classic CSS reset |
$beard-base |
true |
Adds Beard’s base styling |
$beard-enable-responsive |
true |
Enable responsive features |
$beard-enable-spacing-helpers |
true |
Enable the spacing helpers |
$beard-spacing-helper-amount |
10 |
Specify how many spacer levels to generate |
$beard-grid-block-count |
12 |
The amount of column classes to create |
$beard-grid-gutter |
30px |
The default size of the column gutters |
$site-width |
114rem |
The maximum size of the site wrappers |
$sans-serif |
'Helvetica Neue', Helvetica, Arial, sans-serif |
|
$serif |
Merriweather, Georgia, serif |
|
$code |
Menlo, Consolas, Monaco, 'Andale Mono', monospace |
|
| Name | Class |
|---|---|
| Display Block | .db |
| Display Inline | .di |
| Display Inline-block | .dib |
| Display None | .dn |
| Display Flex | .df |
| Full Width Not Responsive | .full |
| W100 Not Responsive | .w100 |
<div class="dn lg-df w100">
<!-- Show content on large breakpoint -->
</div>Modal Content goes here
<div class="relative br4 brdr1 bcg30">
<button class="xbg dim absolute pin-top pin-right lh1 tcg30 ft9 mt1 mr1">×</button>
<div class="brdr1--bottom bcg10 pv2 ph2">
<h2 class="tcg50 ft6 fw6">Modal Titles Are Hard</h2>
</div>
<div class="pv2 ph2">
<p class="tcg50 ft4">Modal Content goes here</p>
</div>
<div class="brdr1--top bcg10 pv2 ph2">
<p class="tar">
<button class="dib dim pv1 ph3 tcg50 brdr1 bgw bcg20 br3 ft5 mr1">No</button>
<button class="dib dim pv1 ph3 tcw brdr1 bc1 bg1 br3 ft5">Yes</button>
</p>
</div>
</div><div class="df brdr1--top brdr1--left brdr1--right bcg20">
<a href="#" class="brdr1--right bcg20 w100 pv2 tac ft3 fw6 uppercase ls2 tc1">Account</a>
<a href="#" class="brdr1--bottom bcg20 w100 pv2 tac ft3 fw6 uppercase ls2 bgg05 tcg30">Invoices</a>
<a href="#" class="brdr1--bottom bcg20 w100 pv2 tac ft3 fw6 uppercase ls2 bgg05 tcg30">Stripe</a>
<a href="#" class="brdr1--bottom bcg20 w100 pv2 tac ft3 fw6 uppercase ls2 bgg05 tcg30">Billing</a>
</div>
<div class="brdr1--bottom brdr1--left brdr1--right bcg20 pv4 ph4">
<p class="tcg50 ft4">Put your tab content here.</p>
</div>| Class | Value |
|---|---|
.flex or .df |
display: flex |
.iflex |
display: inline-flex |
.flex-grow |
flex-grow: 1 |
.fb100 |
flex-basis: 100% |
.fdr |
flex-direction: row |
.fdrr |
flex-direction: row-reverse |
.fdc |
flex-direction: column |
.fdcr |
flex-direction: column-reverse |
| Class | Value |
|---|---|
.jcc |
justify-content: center |
.jcsb |
justify-content: space-between |
.jcsa |
justify-content: space-around |
.jcfs |
justify-content: flex-start |
.jcfe |
justify-content: flex-end |
| Class | Value |
|---|---|
.aic |
align-items: center |
.aifs |
align-items: flex-start |
.aife |
align-items: flex-end |
.ais |
align-items: stretch |
.aib |
align-items: baseline |
| Class | Value |
|---|---|
.acc |
align-content: center |
.acfs |
align-content: flex-start |
.acfe |
align-content: flex-end |
.acs |
align-content: stretch |
.acb |
align-content: baseline |
| Class | Value |
|---|---|
.fl |
float: left |
.fr |
float: right |
.fn |
float: none |
.finit |
float: initial |
.finhe |
float: inherit |
<div class="clearfix">
<div class="md-fl">Floated left on medium breakpoint</div>
<div class="md-fr">Floated right on medium breakpoint</div>
</div>Yes, even letter-spacing gets responsive love in Beard. Why would you need responsive letter-spacing? Whenever spaced out text changes in size, it's helpful to have the letter-spacing change with it. These helpers make it easy to do so in a similar way to the font-sizing helpers.
| Style | Class | Default Stack |
|---|---|---|
| Sans Serif | .sans |
'Helvetica Neue', Helvetica, Arial, sans-serif |
| Serif | .serif |
Merriweather, Georgia, serif |
| Code | .code |
Consolas, Monaco, 'Andale Mono', monospace |
<code class="code">Help</code>Note: The font family helpers are not responsive. That would just be silly.
| Weight | Value | Classes |
|---|---|---|
| Thin | 100 |
.fw1 or .fwthin |
| Extra Light | 200 |
.fw2 or .fwxlight |
| Light | 300 |
.fw3 or .fwlight |
| Normal | 400 |
.fw4 or .fwnormal |
| Medium | 500 |
.fw5 or .fwmedium |
| Semibold | 600 |
.fw6 or .fwsemibold |
| Bold | 700 |
.fw7 or .fwbold |
| Extra Bold | 800 |
.fw8 or .fwxbold |
| Black | 900 |
.fw9 or .fwblack |
<p class="fw8">This text would be really bold</code>Beard offers 17 levels of font-sizing. These helpers are responsive to make sizing easy across breakpoints.
| Name | Class | Example |
|---|---|---|
| Font Level 1 | .ft1 |
Hi |
| Font Level 2 | .ft2 |
Hi |
| Font Level 3 | .ft3 |
Hi |
| Font Level 4 | .ft4 |
Hi |
| Font Level 5 | .ft4 |
Hi |
| Font Level 6 | .ft4 |
Hi |
| Font Level 7 | .ft7 |
Hi |
| Font Level 8 | .ft8 |
Hi |
| Font Level 9 | .ft9 |
Hi |
| Font Level 10 | .ft10 |
Hi |
| Font Level 11 | .ft11 |
Hi |
| Font Level 12 | .ft12 |
Hi |
| Font Level 13 | .ft13 |
Hi |
| Font Level 14 | .ft14 |
Hi |
| Font Level 15 | .ft15 |
Hi |
| Font Level 16 | .ft16 |
Hi |
| Font Level 17 | .ft17 |
Hi |
<h1 class="ft2 md-ft4 xlg-ft12">This Headline Gets Bigger With Space!</h1>Beard ships with a standard 12-column grid and provides responsive helper classes to change the layout when the viewport reaches a certain breakpoint. It also supports nested grids and non-responsive grids for increased flexibility.
Hint: To get the grid to maintain its ratios on the small breakpoint, use the
.frame--staymodifier on your.framewrapper.
The AutoGrid is the easiest way to get started. Simply use a div with a .frame class and place any number of .blk elements as direct descendants. The AutoGrid will automatically figure out the width for each column and will give it a generous 30px of padding between each of them. This will create 60px wide gutter between columns.
.frame--xpad.frame--staynpm install beardcss<link rel="stylesheet" href="https://unpkg.com/beardcss/dist/beard.css">Beard's most popular and polarizing feature is its helper classes. Many people feel utility classes like the ones that Beard generates for you leads to bloat and are just as bad as using inline styles. We've found that having a rich set of helper classes makes your projects easier to build, easier to reason, and more bulletproof. This approach is more common in web application contexts, which is where Beard was born out of.
Beard utilizes shorthand for most of the classes it provides. For example, to achieve a margin-top which uses the 2nd step in the spacing scale, use .mt2. The padding version of this would be .pt2. You’ll find that once you master the basic nomenclature, you’ll be able to quickly compose sets of classes together to style elements.
<h1 class="tcg50 ft8 fw6 pv2 ph2">This is your header</h1>Another example of the Beard nomenclature is font sizing. To use the 7th step in the font scale, you use .ft7. If you wanted to change the size on a different breakpoint, you would use .md-ft9
npm install beardcss<link rel="stylesheet" href="https://unpkg.com/beardcss/dist/beard.css">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 you could just import it directly. We don't recommend it, but if you need something quick, go ahead!
@import '../node_modules/beardcss/beard'
Yes, even letter-spacing gets responsive love in Beard. Why would you need responsive letter-spacing? Whenever spaced out text changes in size, it's helpful to have the letter-spacing change with it. These helpers make it easy to do so in a similar way to the font-sizing helpers.
| Name | Class |
|---|---|
| Level 1 | .ls1 |
| Level 2 | .ls2 |
| Level 3 | .ls3 |
| Level 4 | .ls4 |
| Level 5 | .ls5 |
| Level 6 | .ls6 |
| Level 7 | .ls7 |
| Level 8 | .ls8 |
| Level 9 | .ls9 |
| Level 10 | .ls10 |
<h1 class="ls2 md-ls4 xlg-ls7">Eye-Catching Heading!!!</h1>The text above would be aligned left by default, center on the medium breakpoint, right on the large breakpoint, and back to left on the extra large breakpoint.
| Name | Class | Generated Value |
|---|---|---|
| Level 1 | .lh1 |
line-height: 1 |
| Level 1.1 | .lh1-1 |
line-height: 1.1 |
| Level 1.2 | .lh1-2 |
line-height: 1.2 |
| Level 1.3 | .lh1-3 |
line-height: 1.3 |
| Level 1.4 | .lh1-4 |
line-height: 1.4 |
| Level 1.5 | .lh1-5 |
line-height: 1.5 |
| Level 1.6 | .lh1-6 |
line-height: 1.6 |
| Level 1.7 | .lh1-7 |
line-height: 1.7 |
| Level 1.8 | .lh1-8 |
line-height: 1.8 |
| Level 1.9 | .lh1-9 |
line-height: 1.9 |
| Level 2 | .lh2 |
line-height: 2 |
<p class="lh1 lg-lh1-5">Text with responsive line-height.</p>The text's line-height would have a value of '1' by default and a value of 1.5, starting on the large breakpoint.
Beard comes with a small helping of odds and ends to make your life easier.
| Class / Placeholder | Purpose |
|---|---|
.center %center |
Center an element using auto margin. |
.default-hover %default-hover |
Lower the opacity for an element on its hover state |
.default-active %default-active |
Lower the opacity for an element on its active state |
.dim %dim |
Apply a combination of .default-hover and .default-active |
.site-width %site-width |
Set the element's max-width to the global $side-width. |
.lowercase |
Transform the text to lowercase |
.uppercase |
Transform the text to uppercase |
.ell |
Add an ellipsis when text gets longer than its container |
.imax |
Allow an image to scale to 100% of its containing element's size |
.i100 |
Set an image's width to 100% |
.bgcover |
Set an element's background-size to fill up its container proportionally |
.bgcenter |
Center an element's background |
.vam |
Vertically align a td element's content to the middle |
.clearfix %clearfix |
Apply a classic clearfix to a containing element. |
.hidetext %hidetext |
Hide text from the viewer, but leave it for search engines and screen readers. |
| Class | Value |
|---|---|
.ofh |
overflow: hidden |
.ofx |
overflow-x: scroll |
.ofy |
overflow-y: scroll |
Beard is an atomic CSS library for rapidly styling web app components and sites. It was created to meet the CSS needs of a demanding and fast-paced production web app. Beard is not a front-end framework but can be used to create one and can function as the basis for a standardized set of classes for projects. It doesn't come with any pre-built components or widgets, and it doesn't come with any Javascript. It provides only the lowest-level atomic abstractions needed by most web apps.
For example, let’s pretend you are building a button component for your project. You want buttons to be able to have two background colors and two font colors. You may be tempted to write these classes:
<a class="button dark">Submit Me</a>There are a number of problems with this approach. It's hard to know what color "dark" is. Does it have more styles in it? Is it connected to the button class?
In Beard, we would encourage you to use the built-in background and text color helper classes:
<a class="button bgb tcw">Submit Me!</a>This would apply a black background (.bgb) with white text (.tcw). At first, the naming scheme seems odd, until you realize that Beard tries to follow a mnemonic approach.
Next, let’s say you choose to set up some default padding and border styles. Again, using Beard, we can optimize this process by using global helper classes.
<a class="button bgb tcw brdr1 bc1 pv1 ph2 br3">Submit Me!</a>In addition to the previous styles, this would add a 1px border with the color being the value of $branding-color-1. It would also add vertical padding in the amount of the 1st value in the spacing scale (10px by default), and horizontal padding from the 2nd level in the scale (20px by default). It would finally add a border-radius of 3px.
By now you might be saying to yourself, "So what would be the purpose of having a .button class then? All the styles are in those helper classes." That's exactly what we were thinking! In fact, for some projects you may not need anything more than this. But let's say you now needed to put this button inside another component in your system. You could add a "project-specific" class that can handle that special case:
<div class="card">
<a class="card__button bgb tcw brdr1 bc1 pv1 ph2 br3">Submit Me!</a>
</div>The class .card__button could contain rules with absolute positioning, margins, or anything else specific to that "instance" of the component or something that Beard doesn't provide a handy helper for.
| Class | Value |
|---|---|
.relative |
position: relative |
.absolute |
position: absolute |
.fixed |
position: fixed |
.pin-top |
top: 0 |
.pin-right |
right: 0 |
.pin-bottom |
bottom: 0 |
.pin-left |
left: 0 |
.pin-edges |
top: 0; right: 0; bottom: 0; left: 0; |
Beard is designed to be highly useful for web applications. To this end, we've added a hard reset in place of other options like Normalize.css. We feel this provides the best method of "setting an even playing field" for building out front-end components.
Of course, you don't have to use this reset, and can instead opt to use your own. If you'd like to disable Beard's reset, simply set the flag before you import Beard.
$beard-reset: false;Beard comes with a few opinionated defaults for things such as the html and body elements, headings, and other basic elements. These are written as smart defaults which most people want to have out of the box. It also sets images to be responsive by default. However, if the provided defaults don't serve your needs, you can redefine the styles in your own Sass.
Again, you don't have to use these base styles, and can disable them by setting the flag before you import Beard.
$beard-base: false;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>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.
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;
}
}The spacing system is set up by default to have 10 increments, each representing 1rem in size. For example, to achieve a margin-top which uses the 2nd step in the spacing scale (2rems by deafult), you would use .mt2. If you wanted a padding-left with the 8th step in the scale, it's .pl8.
| Name | Class |
|---|---|
| Margin All | .ma |
| Margin Vertical | .mv |
| Margin Horizontal | .mh |
| Margin Top | .mt |
| Margin Right | .mr |
| Margin Bottom | .mb |
| Margin Left | .ml |
| Padding All | .pa |
| Padding Vertical | .pv |
| Padding Horizontal | .ph |
| Padding Top | .pt |
| Padding Right | .pr |
| Padding Bottom | .pb |
| Padding Left | .pl |
<div class="mv2 md-mv4 lg-mv6 ph1 md-ph3 lg-ph6">This div has stuff in it</div>This mixin allows you to add a value to be generated along with Beard's default spacing helpers, including responsive versions of each.
@include new-spacing-helper(16); // Outputs responsive helpers like .pt16 { padding-top: 16rem !important }
@include new-spacing-helper('--tiny', 0.3); // Outputs responsive helpers like .pt--tiny { padding-top: 0.3rem !important }Note: Calling this mixin will only work if you import Beard’s before and after partials, as recommended by the installation guide.
| Name | Class |
|---|---|
| Text Align Left | .tal |
| Text Align Center | .tac |
| Text Align Right | .tar |
<p class="tal md-tac lg-tar xlg-tal">Here is some aligned text</p>The text above would be aligned left by default, center on the medium breakpoint, right on the large breakpoint, and back to left on the extra large breakpoint.
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.
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;
}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.
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
This mixin allows you to add breakpoints to Beard’s configuration.
@include new-breakpoint('tablet', '(min-width: 600px)');See also: Adding New Breakpoints
This mixin allows you to add a color to Beard’s configuration.
@include new-color('red', #FF0000);See also: Adding New Color Helpers
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
| Border Direction | Class Prefix | Default Amounts |
|---|---|---|
| Border Radius | .br | 0-10 |
| Border Left Radius | .blr | 0-10 |
| Border Right Radius | .brr | 0-10 |
| Border Top Left Radius | .btlr | 0-10 |
| Border Top Right Radius | .btrr | 0-10 |
| Border Bottom Left Radius | .bblr | 0-10 |
| Border Bottom Right Radius | .bbrr | 0-10 |
Beard’s border helpers use a default scale from 1 to 3. This can be changed by setting $beard-border-size-amount before you import Beard.
| Class | Purpose |
|---|---|
.xbrdr |
Remove the border from an element |
.brdr1 |
Add a border to all sides of an element |
.brdr1--top |
Add a border to the top of an element |
.brdr1--right |
Add a border to the right side of an element |
.brdr1--bottom |
Add a border to the bottom of an element |
.brdr1--left |
Add a border to the left side of an element |
Beard's color helpers are generated with !important to provide the ability to override any color values set in your CSS. It's also encouraged to use these helpers in place of modifiers which do the same thing.
Beard's color helper system allows you to use hover, focus, and active colors, using a special syntax. Beard can transition any color to any other color in the system, which makes these helpers real timesavers.
| Prefix | Purpose | Example | Demo |
|---|---|---|---|
: |
Hover |
class="tc1 :tcwarning" |
Sample link hover text |
:: |
Focus |
class="bcg20 ::bc1" |
|
@ |
Active |
class="bgg05 tcg40 @bg1 @tcw" |
Click Me |
This mixin allows you to add colors to be generated along with Beard's default color helpers.
```scss // Tools & Mixins //-------------------------------------------------------------------------- */ // @import '../../../stylesheets/tools.font-size'; // This has to go between Beard's tool.font-size and helpers.spacing partials @include new-color('1--light', #85D7FF); // Outputs .bg1--light { background-color: #85D7FF !important } @include new-color('red', #FF0000); // Outputs .bgred { background-color: #FF0000 !important } // Helpers //-------------------------------------------------------------------------- */ // @import '../../../stylesheets/helpers.spacing'; ```================================================ FILE: source/configuration.md ================================================ --- extends: _layouts.subpage section: subpage_content ---Note: Calling this mixin will only work if you import each of Beard’s partials individually, as recommended by the installation guide.
Beard has a set of settings you can tweak to customize the framework for you project. Listed below are some of the important ones. The complete list is found in stylesheets/_settings.scss.
| Variable | Default | Purpose |
|---|---|---|
$beard-reset |
true |
Adds a classic CSS reset |
$beard-base |
true |
Adds Beard’s base styling |
$beard-enable-responsive |
true |
Enable responsive features |
$beard-enable-spacing-helpers |
true |
Enable the spacing helpers |
$beard-spacing-helper-amount |
10 |
Specify how many spacer levels to generate |
$beard-grid-block-count |
12 |
The amount of column classes to create |
$beard-grid-gutter |
30px |
The default size of the column gutters |
$site-width |
114rem |
The maximum size of the site wrappers |
$sans-serif |
'Helvetica Neue', Helvetica, Arial, sans-serif |
|
$serif |
Merriweather, Georgia, serif |
|
$code |
Menlo, Consolas, Monaco, 'Andale Mono', monospace |
|
| Name | Class |
|---|---|
| Display Block | .db |
| Display Inline | .di |
| Display Inline-block | .dib |
| Display None | .dn |
| Display Flex | .df |
| Full Width Not Responsive | .full |
| W100 Not Responsive | .w100 |
Modal Content goes here
Modal Content goes here
Put your tab content here.
| Class | Value |
|---|---|
.flex or .df |
display: flex |
.iflex |
display: inline-flex |
.flex-grow |
flex-grow: 1 |
.fb100 |
flex-basis: 100% |
.fdr |
flex-direction: row |
.fdrr |
flex-direction: row-reverse |
.fdc |
flex-direction: column |
.fdcr |
flex-direction: column-reverse |
| Class | Value |
|---|---|
.jcc |
justify-content: center |
.jcsb |
justify-content: space-between |
.jcsa |
justify-content: space-around |
.jcfs |
justify-content: flex-start |
.jcfe |
justify-content: flex-end |
| Class | Value |
|---|---|
.aic |
align-items: center |
.aifs |
align-items: flex-start |
.aife |
align-items: flex-end |
.ais |
align-items: stretch |
.aib |
align-items: baseline |
| Class | Value |
|---|---|
.acc |
align-content: center |
.acfs |
align-content: flex-start |
.acfe |
align-content: flex-end |
.acs |
align-content: stretch |
.acb |
align-content: baseline |
| Class | Value |
|---|---|
.fl |
float: left |
.fr |
float: right |
.fn |
float: none |
.finit |
float: initial |
.finhe |
float: inherit |
Yes, even letter-spacing gets responsive love in Beard. Why would you need responsive letter-spacing? Whenever spaced out text changes in size, it's helpful to have the letter-spacing change with it. These helpers make it easy to do so in a similar way to the font-sizing helpers.
| Style | Class | Default Stack |
|---|---|---|
| Sans Serif | .sans |
'Helvetica Neue', Helvetica, Arial, sans-serif |
| Serif | .serif |
Merriweather, Georgia, serif |
| Code | .code |
Consolas, Monaco, 'Andale Mono', monospace |
Help
```
Note: The font family helpers are not responsive. That would just be silly.
| Weight | Value | Classes |
|---|---|---|
| Thin | 100 |
.fw1 or .fwthin |
| Extra Light | 200 |
.fw2 or .fwxlight |
| Light | 300 |
.fw3 or .fwlight |
| Normal | 400 |
.fw4 or .fwnormal |
| Medium | 500 |
.fw5 or .fwmedium |
| Semibold | 600 |
.fw6 or .fwsemibold |
| Bold | 700 |
.fw7 or .fwbold |
| Extra Bold | 800 |
.fw8 or .fwxbold |
| Black | 900 |
.fw9 or .fwblack |
This text would be really bold ```
Beard offers 17 levels of font-sizing. These helpers are responsive to make sizing easy across breakpoints.
| Name | Class | Example |
|---|---|---|
| Font Level 1 | .ft1 |
Hi |
| Font Level 2 | .ft2 |
Hi |
| Font Level 3 | .ft3 |
Hi |
| Font Level 4 | .ft4 |
Hi |
| Font Level 5 | .ft4 |
Hi |
| Font Level 6 | .ft4 |
Hi |
| Font Level 7 | .ft7 |
Hi |
| Font Level 8 | .ft8 |
Hi |
| Font Level 9 | .ft9 |
Hi |
| Font Level 10 | .ft10 |
Hi |
| Font Level 11 | .ft11 |
Hi |
| Font Level 12 | .ft12 |
Hi |
| Font Level 13 | .ft13 |
Hi |
| Font Level 14 | .ft14 |
Hi |
| Font Level 15 | .ft15 |
Hi |
| Font Level 16 | .ft16 |
Hi |
| Font Level 17 | .ft17 |
Hi |
Beard ships with a standard 12-column grid and provides responsive helper classes to change the layout when the viewport reaches a certain breakpoint. It also supports nested grids and non-responsive grids for increased flexibility.
Hint: To get the grid to maintain its ratios on the small breakpoint, use the
.frame--staymodifier on your.framewrapper.
The AutoGrid is the easiest way to get started. Simply use a div with a .frame class and place any number of .blk elements as direct descendants. The AutoGrid will automatically figure out the width for each column and will give it a generous 30px of padding between each of them. This will create 60px wide gutter between columns.
.frame--xpad.frame--stayBeard's most popular and polarizing feature is its helper classes. Many people feel utility classes like the ones that Beard generates for you leads to bloat and are just as bad as using inline styles. We've found that having a rich set of helper classes makes your projects easier to build, easier to reason, and more bulletproof. This approach is more common in web application contexts, which is where Beard was born out of.
Beard utilizes shorthand for most of the classes it provides. For example, to achieve a margin-top which uses the 2nd step in the spacing scale, use .mt2. The padding version of this would be .pt2. You’ll find that once you master the basic nomenclature, you’ll be able to quickly compose sets of classes together to style elements.
Another example of the Beard nomenclature is font sizing. To use the 7th step in the font scale, you use .ft7. If you wanted to change the size on a different breakpoint, you would use .md-ft9
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:
Note: Don’t forget to change the import paths to where you installed Beard.
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'
Yes, even letter-spacing gets responsive love in Beard. Why would you need responsive letter-spacing? Whenever spaced out text changes in size, it's helpful to have the letter-spacing change with it. These helpers make it easy to do so in a similar way to the font-sizing helpers.
| Name | Class |
|---|---|
| Level 1 | .ls1 |
| Level 2 | .ls2 |
| Level 3 | .ls3 |
| Level 4 | .ls4 |
| Level 5 | .ls5 |
| Level 6 | .ls6 |
| Level 7 | .ls7 |
| Level 8 | .ls8 |
| Level 9 | .ls9 |
| Level 10 | .ls10 |
The text above would be aligned left by default, center on the medium breakpoint, right on the large breakpoint, and back to left on the extra large breakpoint.
================================================ FILE: source/line-heights.md ================================================ --- extends: _layouts.subpage section: subpage_content ---| Name | Class | Generated Value |
|---|---|---|
| Level 1 | .lh1 |
line-height: 1 |
| Level 1.1 | .lh1-1 |
line-height: 1.1 |
| Level 1.2 | .lh1-2 |
line-height: 1.2 |
| Level 1.3 | .lh1-3 |
line-height: 1.3 |
| Level 1.4 | .lh1-4 |
line-height: 1.4 |
| Level 1.5 | .lh1-5 |
line-height: 1.5 |
| Level 1.6 | .lh1-6 |
line-height: 1.6 |
| Level 1.7 | .lh1-7 |
line-height: 1.7 |
| Level 1.8 | .lh1-8 |
line-height: 1.8 |
| Level 1.9 | .lh1-9 |
line-height: 1.9 |
| Level 2 | .lh2 |
line-height: 2 |
Text with responsive line-height.
```The text's line-height would have a value of '1' by default and a value of 1.5, starting on the large breakpoint.
================================================ FILE: source/misc.md ================================================ --- extends: _layouts.subpage section: subpage_content ---Beard comes with a small helping of odds and ends to make your life easier.
| Class / Placeholder | Purpose |
|---|---|
.center %center |
Center an element using auto margin. |
.default-hover %default-hover |
Lower the opacity for an element on its hover state |
.default-active %default-active |
Lower the opacity for an element on its active state |
.dim %dim |
Apply a combination of .default-hover and .default-active |
.site-width %site-width |
Set the element's max-width to the global $side-width. |
.lowercase |
Transform the text to lowercase |
.uppercase |
Transform the text to uppercase |
.ell |
Add an ellipsis when text gets longer than its container |
.imax |
Allow an image to scale to 100% of its containing element's size |
.i100 |
Set an image's width to 100% |
.bgcover |
Set an element's background-size to fill up its container proportionally |
.bgcenter |
Center an element's background |
.vam |
Vertically align a td element's content to the middle |
.clearfix %clearfix |
Apply a classic clearfix to a containing element. |
.hidetext %hidetext |
Hide text from the viewer, but leave it for search engines and screen readers. |
| Class | Value |
|---|---|
.ofh |
overflow: hidden |
.ofx |
overflow-x: scroll |
.ofy |
overflow-y: scroll |
Beard is an atomic CSS library for rapidly styling web app components and sites. It was created to meet the CSS needs of a demanding and fast-paced production web app. Beard is not a front-end framework but can be used to create one and can function as the basis for a standardized set of classes for projects. It doesn't come with any pre-built components or widgets, and it doesn't come with any Javascript. It provides only the lowest-level atomic abstractions needed by most web apps.
For example, let’s pretend you are building a button component for your project. You want buttons to be able to have two background colors and two font colors. You may be tempted to write these classes:
```html Submit Me ```There are a number of problems with this approach. It's hard to know what color "dark" is. Does it have more styles in it? Is it connected to the button class?
In Beard, we would encourage you to use the built-in background and text color helper classes:
```html Submit Me! ```This would apply a black background (.bgb) with white text (.tcw). At first, the naming scheme seems odd, until you realize that Beard tries to follow a mnemonic approach.
Next, let’s say you choose to set up some default padding and border styles. Again, using Beard, we can optimize this process by using global helper classes.
```html Submit Me! ```In addition to the previous styles, this would add a 1px border with the color being the value of $branding-color-1. It would also add vertical padding in the amount of the 1st value in the spacing scale (10px by default), and horizontal padding from the 2nd level in the scale (20px by default). It would finally add a border-radius of 3px.
By now you might be saying to yourself, "So what would be the purpose of having a .button class then? All the styles are in those helper classes." That's exactly what we were thinking! In fact, for some projects you may not need anything more than this. But let's say you now needed to put this button inside another component in your system. You could add a "project-specific" class that can handle that special case:
The class .card__button could contain rules with absolute positioning, margins, or anything else specific to that "instance" of the component or something that Beard doesn't provide a handy helper for.
| Class | Value |
|---|---|
.relative |
position: relative |
.absolute |
position: absolute |
.fixed |
position: fixed |
.pin-top |
top: 0 |
.pin-right |
right: 0 |
.pin-bottom |
bottom: 0 |
.pin-left |
left: 0 |
.pin-edges |
top: 0; right: 0; bottom: 0; left: 0; |
Beard is designed to be highly useful for web applications. To this end, we've added a hard reset in place of other options like Normalize.css. We feel this provides the best method of "setting an even playing field" for building out front-end components.
Of course, you don't have to use this reset, and can instead opt to use your own. If you'd like to disable Beard's reset, simply set the flag before you import Beard.
```scss $beard-reset: false; ```Beard comes with a few opinionated defaults for things such as the html and body elements, headings, and other basic elements. These are written as smart defaults which most people want to have out of the box. It also sets images to be responsive by default. However, if the provided defaults don't serve your needs, you can redefine the styles in your own Sass.
Again, you don't have to use these base styles, and can disable them by setting the flag before you import Beard.
```scss $beard-base: false; ``` ================================================ FILE: source/responsive-prefixes.md ================================================ --- extends: _layouts.subpage section: subpage_content ---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.
```htmlThis 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
```scss @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.
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.
The spacing system is set up by default to have 10 increments, each representing 1rem in size. For example, to achieve a margin-top which uses the 2nd step in the spacing scale (2rems by deafult), you would use .mt2. If you wanted a padding-left with the 8th step in the scale, it's .pl8.
| Name | Class |
|---|---|
| Margin All | .ma |
| Margin Vertical | .mv |
| Margin Horizontal | .mh |
| Margin Top | .mt |
| Margin Right | .mr |
| Margin Bottom | .mb |
| Margin Left | .ml |
| Padding All | .pa |
| Padding Vertical | .pv |
| Padding Horizontal | .ph |
| Padding Top | .pt |
| Padding Right | .pr |
| Padding Bottom | .pb |
| Padding Left | .pl |
This mixin allows you to add a value to be generated along with Beard's default spacing helpers, including responsive versions of each.
```scss @include new-spacing-helper(16); // Outputs responsive helpers like .pt16 { padding-top: 16rem !important } @include new-spacing-helper('--tiny', 0.3); // Outputs responsive helpers like .pt--tiny { padding-top: 0.3rem !important } ```================================================ FILE: source/text-alignment.md ================================================ --- extends: _layouts.subpage section: subpage_content ---Note: Calling this mixin will only work if you import Beard’s before and after partials, as recommended by the installation guide.
| Name | Class |
|---|---|
| Text Align Left | .tal |
| Text Align Center | .tac |
| Text Align Right | .tar |
Here is some aligned text
```The text above would be aligned left by default, center on the medium breakpoint, right on the large breakpoint, and back to left on the extra large breakpoint.
================================================ FILE: source/tools.md ================================================ --- extends: _layouts.subpage section: subpage_content ---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.
The appearance mixin provides an easy way to assign or remove platform-native styling on form elements.
```scss // This Scss .terry { @include appearance(none); } // Generates this CSS .terry { -webkit-appearance: none; -moz-appearance: none; appearance: none; } ```This mixin allows you to generate font-size declarations with rem units and uses pixels as a fallback value.
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.
This mixin allows you to use the breakpoints from Beard inside of your Sass.
```scss // This Scss .narcos { @include media(sm) { display: none; } } // Generates this CSS @media screen and (min-width: 300px) { .narcos { display: none; } } ```See also: Responsive Prefixes
This mixin allows you to add breakpoints to Beard’s configuration.
```scss @include new-breakpoint('tablet', '(min-width: 600px)'); ```See also: Adding New Breakpoints
This mixin allows you to add a color to Beard’s configuration.
```scss @include new-color('red', #FF0000); ```See also: Adding New Color Helpers
This mixin allows you to add a set of responsive spacing helpers to Beard’s configuration.
```scss @include new-spacing-helper('tiny', 0.3); ```See also: Adding New Spacing Helpers
================================================ FILE: stylesheets/_base.scss ================================================ @if $beard-base == true { // Base Elements //-------------------------------------------------------------------------- */ *, *:before, *:after { box-sizing: inherit; } html { font-size: 62.5%; box-sizing: border-box; height: 100%; } body { font-family: $sans-serif; min-height: 100%; } h1, h2, h3, h4, h5, h6 { font-weight: $normal; } hr { background: none; border-top: 1px solid rgba(0,0,0,0.2); margin: 0; } a { text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } button { cursor: pointer; border: none; } input, textarea, button { outline: none; } // Responsive Images //-------------------------------------------------------------------------- */ img { max-width: 100%; // Make images fluid font-style: italic; // Offset alt text vertical-align: middle; // Removes bottom whitespace } // If width or height attributes are set, let's respect them //-------------------------------------------------------------------------- */ img[width], img[height] { max-width: none; } } ================================================ FILE: stylesheets/_beard.after.scss ================================================ // Helpers //-------------------------------------------------------------------------- */ @import 'helpers.text-align'; @import 'helpers.spacing'; @import 'helpers.line-heights'; @import 'helpers.letter-spacing'; @import 'helpers.fonts'; @import 'helpers.misc'; @import 'helpers.grid'; @import 'helpers.floats'; @import 'helpers.display'; @import 'helpers.flex'; @import 'helpers.overflow'; @import 'helpers.colors'; @import 'helpers.position'; @import 'helpers.borders'; @import 'helpers.border-radius'; ================================================ FILE: stylesheets/_beard.before.scss ================================================ // Settings //-------------------------------------------------------------------------- */ @import 'settings'; @import 'settings.colors'; // Tools & Mixins //-------------------------------------------------------------------------- */ @import 'tools.appearance'; @import 'tools.breakpoints'; @import 'tools.colors'; @import 'tools.user-drag'; @import 'tools.font-size'; @import 'tools.spacing'; // Generic //-------------------------------------------------------------------------- */ @import 'generic.reset'; // Base //-------------------------------------------------------------------------- */ @import 'base'; ================================================ FILE: stylesheets/_generic.reset.scss ================================================ @if $beard-reset == true { a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, main, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, rp, rt, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video, xmp { border: 0; margin: 0; padding: 0; font-size: 100%; } html, body { height: 100%; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block; } b, strong { font-weight: bold; } img { color: transparent; font-size: 0; vertical-align: middle; -ms-interpolation-mode: bicubic; } ul, ol { list-style: none; } li { display: list-item; } table { border-collapse: collapse; border-spacing: 0; } th, td, caption { font-weight: normal; vertical-align: top; text-align: left; } q { quotes: none; } q:before, q:after { content: ""; content: none; } sub, sup, small { font-size: 75%; } sub, sup { line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } svg { overflow: hidden; } } ================================================ FILE: stylesheets/_helpers.border-radius.scss ================================================ // Border Radius Helpers // ------------------------------------------------------------------------------------ @for $i from 1 through $border-radius-amount { .br#{$i} { border-radius: #{$i}px !important; } .blr#{$i} { border-top-left-radius: #{$i}px !important; border-bottom-left-radius: #{$i}px !important; } .brr#{$i} { border-top-right-radius: #{$i}px !important; border-bottom-right-radius: #{$i}px !important; } .btlr#{$i} { border-top-left-radius: #{$i}px !important; } .btrr#{$i} { border-top-right-radius: #{$i}px !important; } .bbrr#{$i} { border-bottom-right-radius: #{$i}px !important; } .bblr#{$i} { border-bottom-left-radius: #{$i}px !important; } } // Circle Images // ------------------------------------------------------------------------------------ .circle { border-radius: $circle-img-radius !important; } ================================================ FILE: stylesheets/_helpers.borders.scss ================================================ // Border Helpers // -------------------------------------------------------------------------- */ @for $i from 0 through $beard-border-size-amount { .brdr#{$i} { border-style: solid !important; border-width: #{$i}px !important; } .brdr#{$i}--top { border-top-style: solid !important; border-top-width: #{$i}px !important; } .brdr#{$i}--right { border-right-style: solid !important; border-right-width: #{$i}px !important; } .brdr#{$i}--bottom { border-bottom-style: solid !important; border-bottom-width: #{$i}px !important; } .brdr#{$i}--left { border-left-style: solid !important; border-left-width: #{$i}px !important; } } ================================================ FILE: stylesheets/_helpers.colors.scss ================================================ // Loop through Brand Colors and output classes for each type //-------------------------------------------------------------------------- */ // Generate Helpers for each color @each $id, $color in $beard-colors { .bg#{$id} { background-color: $color !important; } .tc#{$id} { color: $color !important; } .bc#{$id} { border-color: $color !important; } } // Generate helpers with hovers for each color @each $id, $color in $beard-colors { .\:bg#{$id}:hover { background-color: $color !important; } .\:tc#{$id}:hover { color: $color !important; } .\:bc#{$id}:hover { border-color: $color !important; } } // Generate focus helpers for each color @each $id, $color in $beard-colors { .\:\:bg#{$id}:focus { background-color: $color !important; } .\:\:tc#{$id}:focus { color: $color !important; } .\:\:bc#{$id}:focus { border-color: $color !important; } } // Generate active helpers for each color @each $id, $color in $beard-colors { .\@bg#{$id}:active { background-color: $color !important; } .\@tc#{$id}:active { color: $color !important; } .\@bc#{$id}:active { border-color: $color !important; } } // Color Removal Helpers // ------------------------------------------------------------------------- */ .xbg { background-color: transparent !important; } ================================================ FILE: stylesheets/_helpers.display.scss ================================================ // Display Helpers // ------------------------------------------------------------------------------------ .db { display: block; } .di { display: inline; } .dib { display: inline-block; } .dn { display: none; } .df { display: flex; } .full { display: block; width: 100%; } .w100 { width: 100%; } // Responsive Display Helpers //-------------------------------------------------------------------------- */ @if $beard-enable-responsive == true { @each $key, $breakpoint in $breakpoints { .#{$key}-db { @include media($key) { display: block !important; } } .#{$key}-di { @include media($key) { display: inline !important; } } .#{$key}-dib { @include media($key) { display: inline-block !important; } } .#{$key}-dn { @include media($key) { display: none !important; } } .#{$key}-df { @include media($key) { display: flex !important; } } } } ================================================ FILE: stylesheets/_helpers.flex.scss ================================================ // Flexbox Helpers // ------------------------------------------------------------------------------------ */ .flex { display: flex; } .iflex { display: inline-flex; } .flex-grow { flex-grow: 1 } // Flex Basis Helpers //-------------------------------------------------------------------------- */ .fb100 { flex-basis: 100%; } // Flex Direction Helpers //-------------------------------------------------------------------------- */ .fdr { flex-direction: row; } .fdrr { flex-direction: row-reverse; } .fdc { flex-direction: column; } .fdcr { flex-direction: column-reverse; } // Flex Wrap Helpers //-------------------------------------------------------------------------- */ .fwn { flex-wrap: nowrap; } .fww { flex-wrap: wrap; } .fwr { flex-wrap: wrap-reverse; } // Justification Helpers //-------------------------------------------------------------------------- */ .jcc { justify-content: center; } .jcsb { justify-content: space-between; } .jcsa { justify-content: space-around; } .jcfs { justify-content: flex-start; } .jcfe { justify-content: flex-end; } // Align Items Helpers //-------------------------------------------------------------------------- */ .aic { align-items: center; } .aifs { align-items: flex-start; } .aife { align-items: flex-end; } .ais { align-items: stretch; } .aib { align-items: baseline; } // Align Content Helpers //-------------------------------------------------------------------------- */ .acc { align-content: center; } .acfs { align-content: flex-start; } .acfe { align-content: flex-end; } .acs { align-content: stretch; } .acb { align-content: baseline; } // Generate responsive versions of the above //-------------------------------------------------------------------------- */ @if $beard-enable-responsive == true { @each $key, $breakpoint in $breakpoints { .#{$key}-flex { @include media($key) { display: flex; } } .#{$key}-iflex { @include media($key) { display: inline-flex; } } .#{$key}-fb100 { @include media($key) { flex-basis: 100%; } } // Flex Direction //-------------------------------------------------------------------------- */ .#{$key}-fdr { @include media($key) { flex-direction: row; } } .#{$key}-fdrr { @include media($key) { flex-direction: row-reverse; } } .#{$key}-fdc { @include media($key) { flex-direction: column; } } .#{$key}-fdcr { @include media($key) { flex-direction: column-reverse; } } .#{$key}-fwn { @include media($key) { flex-wrap: nowrap; } } .#{$key}-fww { @include media($key) { flex-wrap: wrap; } } .#{$key}-fwr { @include media($key) { flex-wrap: wrap-reverse; } } // Justify Content //-------------------------------------------------------------------------- */ .#{$key}-jcc { @include media($key) { justify-content: center; } } .#{$key}-jcsb { @include media($key) { justify-content: space-between; } } .#{$key}-jcsa { @include media($key) { justify-content: space-around; } } .#{$key}-jcfs { @include media($key) { justify-content: flex-start; } } .#{$key}-jcfe { @include media($key) { justify-content: flex-end; } } // Align Items //-------------------------------------------------------------------------- */ .#{$key}-aic { @include media($key) { align-items: center; } } .#{$key}-aifs { @include media($key) { align-items: flex-start; } } .#{$key}-aife { @include media($key) { align-items: flex-end; } } .#{$key}-ais { @include media($key) { align-items: stretch; } } .#{$key}-aib { @include media($key) { align-items: baseline; } } // Align Content //-------------------------------------------------------------------------- */ .#{$key}-acc { @include media($key) { align-content: center; } } .#{$key}-acfs { @include media($key) { align-content: flex-start; } } .#{$key}-acfe { @include media($key) { align-content: flex-end; } } .#{$key}-acs { @include media($key) { align-content: stretch; } } .#{$key}-acb { @include media($key) { align-content: baseline; } } } } ================================================ FILE: stylesheets/_helpers.floats.scss ================================================ // Float Helpers // ------------------------------------------------------------------------------------ .fl { float: left !important; } .fr { float: right !important; } .fn { float: none !important; } .finit { float: initial !important; } .finhe { float: inherit !important; } @if $beard-enable-responsive == true { @each $key, $breakpoint in $breakpoints { .#{$key}-fl { float: left !important; } .#{$key}-fr { float: right !important; } .#{$key}-fn { float: none !important; } .#{$key}-finit { float: initial !important; } .#{$key}-finhe { float: inherit !important; } } } ================================================ FILE: stylesheets/_helpers.fonts.scss ================================================ // Font Size Helpers // ------------------------------------------------------------------------------------ */ @each $name, $amount in $font-size-values { .#{$name} { @include font-size($amount) } @if $beard-enable-responsive == true { @each $key, $breakpoint in $breakpoints { .#{$key}-#{$name} { @include media($key) { @include font-size($amount); } } } } } // Font Weight Helpers //-------------------------------------------------------------------------- */ .fw1, .fwthin { font-weight: $thin !important; } .fw2, .fwxlight { font-weight: $xlight !important; } .fw3, .fwlight { font-weight: $light !important; } .fw4, .fwnormal { font-weight: $normal !important; } .fw5, .fwmedium { font-weight: $medium !important; } .fw6, .fwsemibold { font-weight: $semibold !important; } .fw7, .fwbold { font-weight: $bold !important; } .fw8, .fwxbold { font-weight: $xbold !important; } .fw9, .fwblack { font-weight: $xxbold !important; } ================================================ FILE: stylesheets/_helpers.grid.scss ================================================ // Response Flexbox Grid //-------------------------------------------------------------------------- */ .wrap { margin-left: auto; margin-right: auto; padding-left: $beard-grid-gutter; padding-right: $beard-grid-gutter; } .wrap--xpad { padding-left: 0; padding-right: 0; } .frame { margin-left: -$beard-grid-gutter; margin-right: -$beard-grid-gutter; @if $beard-enable-responsive == true { @include media(md) { display: flex; flex-direction: row; flex-wrap: wrap; } } } .frame--stay { @if $beard-enable-responsive == true { @include media(only-sm) { display: flex; } } } // Adds the ability to add grids without padding in their blocks .frame--xpad [class^='blk'] { padding-left: 0; padding-right: 0; } // Blocks //-------------------------------------------------------------------------- */ %blk-relative { position: relative; } %blk-padding { padding-left: $beard-grid-gutter; padding-right: $beard-grid-gutter; } // The default column width is 100% divided by the column count $block-width: 100% / $beard-grid-block-count; .blk { @extend %blk-relative; @extend %blk-padding; flex-grow: 1; flex-basis: 0; } // Generate standard sizing helpers @for $i from 1 through $beard-grid-block-count { .blk#{$i} { @extend %blk-relative; @extend %blk-padding; flex-basis: $i * $block-width; } } // Generate responsive sizing helpers @if $beard-enable-responsive == true { @each $key, $breakpoint in $breakpoints { @for $i from 1 through $beard-grid-block-count { .#{$key}-blk#{$i} { @extend %blk-relative; @extend %blk-padding; @include media($key) { flex-basis: $i * $block-width; } } } } } // Offsets, Pushers, and Pullers //-------------------------------------------------------------------------- */ // Offsets @for $i from 1 through $beard-grid-block-count { .blk--offset#{$i} { margin-left: $i * $block-width; } } // Responsive Offsets @if $beard-enable-responsive == true { @each $key, $breakpoint in $breakpoints { @for $i from 1 through $beard-grid-block-count { .#{$key}-blk--offset#{$i} { @include media($key) { margin-left: $i * $block-width; } } } } } // Pushers @for $i from 1 through $beard-grid-block-count { .blk--push#{$i} { left: $i * $block-width; } } // Responsive Pushers @if $beard-enable-responsive == true { @each $key, $breakpoint in $breakpoints { @for $i from 1 through $beard-grid-block-count { .#{$key}-blk--push#{$i} { @include media($key) { left: $i * $block-width; } } } } } // Pullers @for $i from 1 through $beard-grid-block-count { .blk--pull#{$i} { right: $i * $block-width; } } // Responsive Pullers @if $beard-enable-responsive == true { @each $key, $breakpoint in $breakpoints { @for $i from 1 through $beard-grid-block-count { .#{$key}-blk--pull#{$i} { @include media($key) { right: $i * $block-width; } } } } } // Reordering Helpers //-------------------------------------------------------------------------- */ // Basic first and Last helpers .blk--first { order: 0; } .blk--last { order: 1; } // Responsive first and last helpers @if $beard-enable-responsive == true { @each $key, $breakpoint in $breakpoints { .#{$key}-blk--first { @include media($key) { order: 0; } } .#{$key}-blk--last { @include media($key) { order: 1; } } } } ================================================ FILE: stylesheets/_helpers.letter-spacing.scss ================================================ // Letter-spacing Options // ------------------------------------------------------------------------------------ */ // These styles are useful when you want to space a button's text out // or provide a heading with some space. These exist because the letter-spacing // option in CSS doesn't allow for a unit-less value. If it ever does, then we'd // be able to specify something like "letter-spacing: 4" and be done with it. $letter-spacing-values: ( ls1: $ls1, ls2: $ls2, ls3: $ls3, ls4: $ls4, ls5: $ls5, ls6: $ls6, ls7: $ls7, ls8: $ls8, ls9: $ls9, ls10: $ls10 ) !default; @each $name, $amount in $letter-spacing-values { .#{$name} { letter-spacing: $amount } @if $beard-enable-responsive == true { @each $key, $breakpoint in $breakpoints { .#{$key}-#{$name} { @include media($key) { letter-spacing: $amount; } } } } } ================================================ FILE: stylesheets/_helpers.line-heights.scss ================================================ // Line Height Helpers // ------------------------------------------------------------------------------------ */ .lh1 { line-height: 1 !important; } .lh1-1 { line-height: 1.1 !important; } .lh1-2 { line-height: 1.2 !important; } .lh1-3 { line-height: 1.3 !important; } .lh1-4 { line-height: 1.4 !important; } .lh1-5 { line-height: 1.5 !important; } .lh1-6 { line-height: 1.6 !important; } .lh1-7 { line-height: 1.7 !important; } .lh1-8 { line-height: 1.8 !important; } .lh1-9 { line-height: 1.9 !important; } .lh2 { line-height: 2 !important; } @if $beard-enable-responsive == true { @each $key, $breakpoint in $breakpoints { .#{$key}-lh1 { @include media($key) { line-height: 1 !important; } } .#{$key}-lh1-1 { @include media($key) { line-height: 1.1 !important; } } .#{$key}-lh1-2 { @include media($key) { line-height: 1.2 !important; } } .#{$key}-lh1-3 { @include media($key) { line-height: 1.3 !important; } } .#{$key}-lh1-4 { @include media($key) { line-height: 1.4 !important; } } .#{$key}-lh1-5 { @include media($key) { line-height: 1.5 !important; } } .#{$key}-lh1-6 { @include media($key) { line-height: 1.6 !important; } } .#{$key}-lh1-7 { @include media($key) { line-height: 1.7 !important; } } .#{$key}-lh1-8 { @include media($key) { line-height: 1.8 !important; } } .#{$key}-lh1-9 { @include media($key) { line-height: 1.9 !important; } } .#{$key}-lh2 { @include media($key) { line-height: 2 !important; } } } } ================================================ FILE: stylesheets/_helpers.misc.scss ================================================ // Misceallaneous Helpers //-------------------------------------------------------------------------- */ // Center //-------------------------------------------------------------------------- */ %center, .center { margin-left: auto; margin-right: auto; } // Typeface Helper //-------------------------------------------------------------------------- */ %sans-serif, .sans-serif { font-family: $sans-serif; } %serif, .serif { font-family: $serif; } %code, .code { font-family: $code; } // Clearfix Helper // ------------------------------------------------------------------------------------ */ .clearfix, %clearfix { &:after { content: ""; display: table; clear: both; } } // Hidetext Helper //-------------------------------------------------------------------------- */ %hidetext, .hidetext { text-indent: 100%; white-space: nowrap; overflow: hidden; } // Active and Hover State Helpers //-------------------------------------------------------------------------- */ %default-hover, .default-hover { &:hover, &:focus { opacity: 0.5; } } %default-active, .default-active { &:active { opacity: 0.8; } } %dim, .dim { @extend %default-active; @extend %default-hover; } // Site Width Helper //-------------------------------------------------------------------------- */ %site-width, .site-width { max-width: $site-width; } // Font Transform Helpers //-------------------------------------------------------------------------- */ .lowercase { text-transform: lowercase; } .uppercase { text-transform: uppercase; } // Ellipses Text Helper // ------------------------------------------------------------------------------------ .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } // Border Removal Helper //-------------------------------------------------------------------------- */ .xbrdr { border: none; } // Image Helpers // ------------------------------------------------------------------------------------ .imax { max-width: 100%; width: auto; height: auto; } .i100 { width: 100%; } // Background Helpers //-------------------------------------------------------------------------- */ .bgcover { background-size: cover; } .bgcenter { background-position: center; } // Vertical Align Tables //-------------------------------------------------------------------------- */ .vam { vertical-align: middle; } .xts { text-shadow: none !important; } ================================================ FILE: stylesheets/_helpers.overflow.scss ================================================ // Overflow Helpers //-------------------------------------------------------------------------- */ .ofh { overflow: hidden !important; } .ofx { overflow-x: scroll !important; } .ofy { overflow-y: scroll !important; } ================================================ FILE: stylesheets/_helpers.position.scss ================================================ // Position Helpers //------------------------------------------------------------------------- .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } // Pin an item to the corners of the viewport //------------------------------------------------------------------------- .pin-top { top: 0; } .pin-right { right: 0; } .pin-bottom { bottom: 0; } .pin-left { left: 0; } .pin-edges { top: 0; right: 0; bottom: 0; left: 0; } ================================================ FILE: stylesheets/_helpers.spacing.scss ================================================ // Add the zero spacing helper manually so it's last in the source order @include new-spacing-helper(0); // Spacing Helpers //-------------------------------------------------------------------------- */ $position-units: ( padding: 'p', margin: 'm' ); // Generate Responsive Spacing Helpers //-------------------------------------------------------------------------- */ @if $beard-enable-spacing-helpers == true { @each $id, $position in $position-units { @each $name, $i in $spacing-amounts { .#{$position}a#{$name} { #{$id}: #{$i}rem !important; } @if $beard-enable-responsive == true { @each $key, $breakpoint in $breakpoints { .#{$key}-#{$position}a#{$name} { @include media($key) { #{$id}: #{$i}rem !important; } } } } .#{$position}t#{$name} { #{$id}-top: #{$i}rem !important; } @if $beard-enable-responsive == true { @each $key, $breakpoint in $breakpoints { .#{$key}-#{$position}t#{$name} { @include media($key) { #{$id}-top: #{$i}rem !important; } } } } .#{$position}r#{$name} { #{$id}-right: #{$i}rem !important; } @if $beard-enable-responsive == true { @each $key, $breakpoint in $breakpoints { .#{$key}-#{$position}r#{$name} { @include media($key) { #{$id}-right: #{$i}rem !important; } } } } .#{$position}b#{$name} { #{$id}-bottom: #{$i}rem !important; } @if $beard-enable-responsive == true { @each $key, $breakpoint in $breakpoints { .#{$key}-#{$position}b#{$name} { @include media($key) { #{$id}-bottom: #{$i}rem !important; } } } } .#{$position}l#{$name} { #{$id}-left: #{$i}rem !important; } @if $beard-enable-responsive == true { @each $key, $breakpoint in $breakpoints { .#{$key}-#{$position}l#{$name} { @include media($key) { #{$id}-left: #{$i}rem !important; } } } } .#{$position}v#{$name} { #{$id}-top: #{$i}rem !important; #{$id}-bottom: #{$i}rem !important; } @if $beard-enable-responsive == true { @each $key, $breakpoint in $breakpoints { .#{$key}-#{$position}v#{$name} { @include media($key) { #{$id}-top: #{$i}rem !important; #{$id}-bottom: #{$i}rem !important; } } } } .#{$position}h#{$name} { #{$id}-left: #{$i}rem !important; #{$id}-right: #{$i}rem !important; } @if $beard-enable-responsive == true { @each $key, $breakpoint in $breakpoints { .#{$key}-#{$position}h#{$name} { @include media($key) { #{$id}-left: #{$i}rem !important; #{$id}-right: #{$i}rem !important; } } } } } } } // Padding Removal Helpers // ------------------------------------------------------------------------------------ .xp { padding: 0 !important; } .xpv { padding-top: 0 !important; padding-bottom: 0 !important; } .xph { padding-left: 0 !important; padding-right: 0 !important; } // Margin Removal Helpers // ------------------------------------------------------------------------------------ .xm { margin: 0 !important; } .xmv { margin-top: 0 !important; margin-bottom: 0 !important; } .xmh { margin-left: 0 !important; margin-right: 0 !important; } @if $beard-enable-responsive == true and $beard-enable-spacing-helpers == true { @each $id, $position in $position-units { @each $key, $breakpoint in $breakpoints { // Generates classes like this: `sm-xm` and `md-xmh` .#{$key}-x#{$position} { @include media($key) { #{$id}: 0 !important; } } // Vertical Spacing Removal .#{$key}-x#{$position}v { @include media($key) { #{$id}-top: 0 !important; #{$id}-bottom: 0 !important; } } // Horizontal Spacing Removal .#{$key}-x#{$position}h { @include media($key) { #{$id}-left: 0 !important; #{$id}-right: 0 !important; } } // Horizontal Centering .#{$key}-center { @include media($key) { #{$id}-left: auto !important; #{$id}-right: auto !important; } } } } } ================================================ FILE: stylesheets/_helpers.text-align.scss ================================================ // Text Aligment Helpers // ------------------------------------------------------------------------------------ .tal { text-align: left !important; } .tac { text-align: center !important; } .tar { text-align: right !important; } @if $beard-enable-responsive == true { @each $key, $breakpoint in $breakpoints { .#{$key}-tal { @include media($key) { text-align: left !important; } } .#{$key}-tac { @include media($key) { text-align: center !important; } } .#{$key}-tar { @include media($key) { text-align: right !important; } } } } ================================================ FILE: stylesheets/_objects.media.scss ================================================ // Media Object //-------------------------------------------------------------------------- */ .media { display: flex; } .media--center { align-items: center; } .media--reverse { .media__figure { order: 1; } .media__content { order: 0; } } .media__figure { margin-right: 1em; } .media__content { flex: 1; } ================================================ FILE: stylesheets/_settings.colors.scss ================================================ // Global Colors // ------------------------------------------------------------------------------------ */ $white: #fff !default; $black: #000 !default; $beard-success-color: #4AB471 !default; $beard-warning-color: #F3AE4E !default; $beard-danger-color: #CF5C60 !default; // Set Brand colors //-------------------------------------------------------------------------- */ $brand-color-1: #3498DB !default; $brand-color-2: darken($brand-color-1, 5%) !default; $brand-color-3: darken($brand-color-2, 5%) !default; $brand-color-4: darken($brand-color-3, 5%) !default; $brand-color-5: darken($brand-color-4, 5%) !default; $g05: darken($white, 5%) !default; $g10: darken($white, 10%) !default; $g20: darken($white, 20%) !default; $g30: darken($white, 30%) !default; $g40: darken($white, 40%) !default; $g50: darken($white, 50%) !default; $g60: darken($white, 60%) !default; $g70: darken($white, 70%) !default; $g80: darken($white, 80%) !default; $g90: darken($white, 90%) !default; $beard-colors: ( b: $black, w: $white, 1: $brand-color-1, 2: $brand-color-2, 3: $brand-color-3, 4: $brand-color-4, 5: $brand-color-5, success: $beard-success-color, warning: $beard-warning-color, danger: $beard-danger-color, g05: $g05, g10: $g10, g20: $g20, g30: $g30, g40: $g40, g50: $g50, g60: $g60, g70: $g70, g80: $g80, g90: $g90, ) !default; // Define brand color variables //-------------------------------------------------------------------------- */ // Background colors $bgb: map-get($beard-colors, b); $bgw: map-get($beard-colors, w); $bg1: map-get($beard-colors, 1); $bg2: map-get($beard-colors, 2); $bg3: map-get($beard-colors, 3); $bg4: map-get($beard-colors, 4); $bg5: map-get($beard-colors, 5); // Text colors $tcb: map-get($beard-colors, b); $tcw: map-get($beard-colors, w); $tc1: map-get($beard-colors, 1); $tc2: map-get($beard-colors, 2); $tc3: map-get($beard-colors, 3); $tc4: map-get($beard-colors, 4); $tc5: map-get($beard-colors, 5); // Border colors $bcb: map-get($beard-colors, b); $bcw: map-get($beard-colors, w); $bc1: map-get($beard-colors, 1); $bc2: map-get($beard-colors, 2); $bc3: map-get($beard-colors, 3); $bc4: map-get($beard-colors, 4); $bc5: map-get($beard-colors, 5); // Background Colors // ------------------------------------------------------------------------------------ */ $bgg05: map-get($beard-colors, g05); $bgg10: map-get($beard-colors, g10); $bgg20: map-get($beard-colors, g20); $bgg30: map-get($beard-colors, g30); $bgg40: map-get($beard-colors, g40); $bgg50: map-get($beard-colors, g50); $bgg60: map-get($beard-colors, g60); $bgg70: map-get($beard-colors, g70); $bgg80: map-get($beard-colors, g80); $bgg90: map-get($beard-colors, g90); // Text Colors // ------------------------------------------------------------------------------------ */ $tcg05: map-get($beard-colors, g05); $tcg10: map-get($beard-colors, g10); $tcg20: map-get($beard-colors, g20); $tcg30: map-get($beard-colors, g30); $tcg40: map-get($beard-colors, g40); $tcg50: map-get($beard-colors, g50); $tcg60: map-get($beard-colors, g60); $tcg70: map-get($beard-colors, g70); $tcg80: map-get($beard-colors, g80); $tcg90: map-get($beard-colors, g90); // Border Colors // ------------------------------------------------------------------------------------ */ $bcg05: map-get($beard-colors, g05); $bcg10: map-get($beard-colors, g10); $bcg20: map-get($beard-colors, g20); $bcg30: map-get($beard-colors, g30); $bcg40: map-get($beard-colors, g40); $bcg50: map-get($beard-colors, g50); $bcg60: map-get($beard-colors, g60); $bcg70: map-get($beard-colors, g70); $bcg80: map-get($beard-colors, g80); $bcg90: map-get($beard-colors, g90); ================================================ FILE: stylesheets/_settings.scss ================================================ // Settings //-------------------------------------------------------------------------- */ // This file contains all of the configurable settings for Beard. You // can essentially make your own copy of this file for you project and // override every value to the one you want, minus the `!default` option. // Configuration Switches //-------------------------------------------------------------------------- */ $beard-reset: true !default; $beard-base: true !default; $beard-enable-responsive: true !default; // Allow the user to specify how many spacing helper amounts to generate $beard-spacing-helper-amount: 10 !default; // Allow the user to turn off the spacing helpers completely $beard-enable-spacing-helpers: true !default; // Responsive Breakpoints //-------------------------------------------------------------------------- */ @if $beard-enable-responsive == true { $beard-breakpoint-sm: '(min-width: 30rem)' !default; $beard-breakpoint-md: '(min-width: 60rem)' !default; $beard-breakpoint-lg: '(min-width: 90rem)' !default; $beard-breakpoint-xlg: '(min-width: 144rem)' !default; $beard-breakpoint-only-sm: '(max-width: 59.99999rem)' !default; $beard-breakpoint-only-md: '(min-width: 60rem) and (max-width: 89.99999rem)' !default; $beard-breakpoint-only-lg: '(min-width: 90rem) and (max-width: 143.99999rem)' !default; $beard-breakpoint-only-xlg: '(min-width: 144rem)' !default; $breakpoints: ( sm: $beard-breakpoint-sm, only-sm: $beard-breakpoint-only-sm, md: $beard-breakpoint-md, only-md: $beard-breakpoint-only-md, lg: $beard-breakpoint-lg, only-lg: $beard-breakpoint-only-lg, xlg: $beard-breakpoint-xlg, only-xlg: $beard-breakpoint-only-xlg ) !global; } // Block Grid //-------------------------------------------------------------------------- */ $beard-grid-block-count: 12 !default; $beard-grid-gutter: 30px !default; // Site Width // ------------------------------------------------------------------------------------ */ $site-width: 114rem !default; // Typefaces //-------------------------------------------------------------------------- */ $sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif !default; $serif: Merriweather, Georgia, serif !default; $code: Menlo, Consolas, Monaco, 'Andale Mono', monospace !default; // Font Sizes //-------------------------------------------------------------------------- */ // Value are based on a modular scale configured from here: // http://www.modularscale.com/?1,1.1,1.2&rem&1.5&web&text $ft1: 10 !default; $ft2: 11 !default; $ft3: 12 !default; $ft4: 15 !default; $ft5: 16.5 !default; $ft6: 18 !default; $ft7: 22.5 !default; $ft8: 24.75 !default; $ft9: 27 !default; $ft10: 33.75 !default; $ft11: 37.13 !default; $ft12: 40.5 !default; $ft13: 50.63 !default; $ft14: 55.69 !default; $ft15: 60.75 !default; $ft16: 75.94 !default; $ft17: 83.53 !default; $font-size-values: ( ft1: $ft1, ft2: $ft2, ft3: $ft3, ft4: $ft4, ft5: $ft5, ft6: $ft6, ft7: $ft7, ft8: $ft8, ft9: $ft9, ft10: $ft10, ft11: $ft11, ft12: $ft12, ft13: $ft13, ft14: $ft14, ft15: $ft15, ft16: $ft16, ft17: $ft17, ) !default; // Font Weights // ------------------------------------------------------------------------------------ */ $thin: 100 !default; $xlight: 200 !default; $light: 300 !default; $normal: 400 !default; $medium: 500 !default; $semibold: 600 !default; $bold: 700 !default; $xbold: 800 !default; $xxbold: 900 !default; // Letter Spacing //-------------------------------------------------------------------------- */ $ls1: 0.1rem !default; $ls2: 0.2rem !default; $ls3: 0.3rem !default; $ls4: 0.4rem !default; $ls5: 0.5rem !default; $ls6: 0.6rem !default; $ls7: 0.7rem !default; $ls8: 0.8rem !default; $ls9: 0.9rem !default; $ls10: 1.0rem !default; // Border Radius Amounts //-------------------------------------------------------------------------- */ $border-radius-amount: 6 !default; $circle-img-radius: 50% !default; // Max Border Size Helper Amount //-------------------------------------------------------------------------- */ $beard-border-size-amount: 3 !default; // Create an empty spacing-amount list //-------------------------------------------------------------------------- */ $spacing-amounts: (); ================================================ FILE: stylesheets/_tools.appearance.scss ================================================ // Appearance // ------------------------------------------------------------------------------------ */ @mixin appearance($value) { -webkit-appearance: $value; -moz-appearance: $value; appearance: $value; } ================================================ FILE: stylesheets/_tools.breakpoints.scss ================================================ @mixin media($thepoint) { $feature: 'screen and '; $value: map-get($breakpoints, $thepoint); $media-query: $feature + $value; @media #{$media-query} { @content; } } @mixin new-breakpoint($label, $def) { $map2: ($label: $def); $breakpoints: map-merge($breakpoints, $map2) !global; } ================================================ FILE: stylesheets/_tools.colors.scss ================================================ // Color Tools //-------------------------------------------------------------------------- */ @mixin new-color($label, $def) { $map2: ($label: $def); $beard-colors: map-merge($beard-colors, $map2) !global; } ================================================ FILE: stylesheets/_tools.font-size.scss ================================================ // Font Size Mixin //-------------------------------------------------------------------------- */ @function font-size($size) { @return #{$size / 10}rem; } @mixin font-size($size: 12) { font-size: #{$size}px; font-size: font-size($size); } ================================================ FILE: stylesheets/_tools.spacing.scss ================================================ // Tools to Generate Responsive Spacing Helpers //-------------------------------------------------------------------------- */ @mixin new-spacing-helper($name, $size: null) { @if $size == null { $size: $name; } $new-helper: ($name: $size); $spacing-amounts: map-merge($spacing-amounts, $new-helper) !global; } // Build the initial list of spacing amounts @for $i from 1 through $beard-spacing-helper-amount { @include new-spacing-helper($i); } ================================================ FILE: stylesheets/_tools.user-drag.scss ================================================ // Prevent the user from dragging the image // ------------------------------------------------------------------------------------ */ @mixin user-drag($value) { -moz-user-drag: $value; -webkit-user-drag: $value; user-drag: $value; }