Variables

Configuration for every aspect of your styling baseline

Addresses

address.color = '$colors.darkestGray';
address.family = '$font.family';
address.size = '$font.size';
address.weight = 'normal';
address.style = 'normal';
address.lineHeight = '$paragraph.lineHeight'

Base

unit.default: 'rem';
unit.fontSize: 'rem';
unit.lineHeight: 'em';

root.fontSize: '62.5%';

Buttons

button.color: '$colors.white';
button.family: '$font.family';
button.size: '$font.size';
button.weight: 'normal';

button.padding.horizontal: '3rem';
button.padding.vertical: '1.3rem';

button.margin.bottom: 0;

button.transition.property: 'background-color';
button.transition.duration: '0.2s';

button.background: '$colors.darkGray';

button.border.color: false;
button.border.radius: '$default.radius';
button.border.width: 0;

// Colored Buttons

coloredButton.class: '.colored-button';
coloredButton.color: '$colors.white';
coloredButton.background: '$link.color';

coloredButton.border.color: false;
coloredButton.border.radius: '$button.border.radius';
coloredButton.border.width: '$button.border.width';

// Hover Effects

button.hover.background: defer(darken, ['$button.background', 5]);

coloredButton.hover.background: defer(darken, ['$coloredButton.background'], 5);

// Active Buttons

button.active.background: defer(darken, ['$button.background'], 10);
button.active.transition.property: 'none';

coloredButton.active.background: defer(darken, ['$coloredButton.background'], 10);

// Disabled Buttons

button.disabled.modifier: '.-disabled';
button.disabled.color: '$colors.darkGray';
button.disabled.background: '$colors.lightGray';

button.disabled.border.color: false;

button.disabled.cursor: 'not-allowed';

Code

// Code

code.color: '$colors.gray';
code.family: 'monospace';
code.size: '$font.size';
code.lineHeight: '1.4em';
code.background: '$colors.lighterGray';

code.border.color: false;
code.border.radius: false;

code.padding.horizontal: '0.5em';
code.padding.vertical: '0.5em';

// Code Block

code.block.color: '$colros.lightestGray';
code.block.family: '$code.family';
code.block.size: '1.3rem';
code.block.lineHeight: '$paragraph.lineHeight';
code.block.tabSize: 4;
code.block.wrap: false;

code.block.margin.bottom: '$block.margin.bottom';

code.block.background: '$colors.darkestGray';

code.block.border.color: '$code.border.color';
code.block.border.radius: false;

code.block.padding.horizontal: '2rem';
code.block.padding.vertical: '1.4rem';

Colors

colors.primary: '#349bb9';
colors.secondary: '#70c1b3';
colors.tertiary: '#f18f01';
colors.info: '#00f';
colors.success: '#008000';
colors.warning: '#f00';

// Body Colors

colors.body.background: '$colors.white';

Fonts

font.color: '$colors.darkestGray';
font.family: 'Arial, Helvetica, sans-serif';
font.lineHeight: '1em';
font.path: '../fonts/';
font.size: '1.6rem';

font.weight.normal: 'normal';
font.weight.bold: 'bold';

Forms

// Inputs

input.background: '$colors.white',
input.color: '$colors.darkerGray',
input.family: '$font.family',
input.minHeight: '3rem', // false to disable
input.minWidth: '20rem', // false to disable
input.size: '$font.size',
input.weight: '$font.weight',

input.border.color: '$colors.lighterGray',
input.border.radius: '$default.radius', // false to disable
input.border.width: '1px'

input.margin.bottom: '2rem'

input.padding.horizontal: '1.6rem',
input.padding.vertical: '1rem'

input.placeholder.color: defer(lighten, ['$input.color', 40])

input.hover.border.color: defer(darken, ['$input.border.color', 10]);

input.focus.border.color: defer(darken, ['$input.border.color', 20]);

// Invalid Inputs

input.invalid.background: '$colors.white';
input.invalid.color: defer(darken, ['$input.invalid.border.color', 10]);

input.invalid.border.color: '#a41818';
input.invalid.border.width: '1px'; // false to disable

input.invalid.hover.border.color: defer(darken, ['$input.invalid.border.color', 10]);

input.invalid.focus.border.color: defer(darken, ['$input.invalid.border.color', 20]);

// Required Inputs

input.required.background: '$colors.white';
input.required.color: defer(darken, ['$input.required.border.color', 10]);

input.required.border.color: '$colors.darkGray';
input.required.border.width: '1px'; // false to disable

input.required.hover.border.color: defer(darken, ['$input.required.border.color', 10]);

input.required.focus.border.color: defer(darken, ['$input.required.border.color', 20]);

// Disabled Inputs

input.disabled.background: '$colors.lightestGray';
input.disabled.color: '$colors.darkGray';
input.disabled.cursor: 'not-allowed';
input.disabled.modifier: '.-disabled';

input.disabled.border.width: false // false to disable

// Selects

multiSelect.minHeight: '8rem';

// Checkboxes

checkbox.margin.bottom: '1rem';
checkbox.margin.right: '0.5rem';

// Textareas

textarea.lineHeight: '1.3em';
textarea.minHeight: '8rem';
textarea.resize: 'vertical';

textarea.padding.horizontal: '1.6rem';
textarea.padding.vertical: '1rem';

// Legends

legend.color: '$colors.darkerGray';
legend.family: '$font.family';
legend.size: '1.8rem';

legend.margin.bottom: '1.4rem';

// Labels

label.weight: 'normal';
label.lineHeight: '1.3em';

label.margin.bottom: '0.4rem';
label.margin.right: '1rem';

Grayscale

colors.white: '#fff';
colors.lightestGray: defer(darken, ['$colors.white', 4]);
colors.lighterGray: defer(darken, ['$colors.white', 10]);
colors.lightGray: defer(darken, ['$colors.white', 25]);
colors.gray: defer(darken, ['$colors.white', 35]);
colors.darkGray: defer(darken, ['$colors.white', 55]);
colors.darkerGray: defer(darken, ['$colors.white', 65]);
colors.darkestGray: defer(darken, ['$colors.white', 75]);
colors.black: '#000';

Headings

heading.color: 'inherit';
heading.family: 'Tahoma, Geneva, sans-serif';
heading.weight: '$font.weight.bold';
heading.lineHeight: '1.4em';

heading.margin.bottom: '2rem';

h1 = '3.6rem';
h2 = '3.2rem';
h3 = '2.8rem';
h4 = '2.4rem';
h5 = '2rem';
h5 = '1.6rem';

Horizontal Rules

rule.color: '$colors.lightGray';
rule.height: '1px';
rule.style: 'solid';

rule.margin: '$block.margin.bottom';

Images

image.path: '../images/';         // absolute or relative path

image.margin.bottom: '2rem';
image.margin.side: '2rem';

// Figures

figure.border.color: false;
figure.border.radius: false;

figure.padding: '$block.margin.bottom';

// Figure Captions

figCaption.color: '$colors.darkGray';
figCaption.style: 'italic';
figCaption.lineHeight: '$paragraph.lineHeight';

// Alignment

image.class.left: '.img-left';
image.class.right: '.img-right';

Layout

width.min: false;  // min container width, false to disable
width.max: '1280px'; // max container width, false to disable

bumper.padding: 6%;
bumper.enabled: true;

grid.margin: '5%';
grid.columns: 8;
grid.spaceless: false; // set to true to eliminate inline grid whitespace hack

block.margin.bottom: '4rem'; // default spacing for lists, form elements, and other blocks
link.color: '$colors.primary';
link.decoration: 'none';

link.hover.color: defer(darken, ['$link.color', 10]);
link.hover.decoration: 'none';

link.active.color: defer(darken, ['$link.color', 20]),

Miscellaneous

small.size: '0.8em';

selection.color: '$colors.white';
selection.background: '$link.color';

mark.color: '$font.color';
mark.background: 'yellow';

default.radius: '3px';
default.opacity: 0.2;
default.duration: '0.2s';
default.timing: 'ease-in-out';
default.delay: '0s';

abbr.underline: 'dotted'; // dotted, solid, none

Paragraphs

paragraph.color: '$font.color';
paragraph.weight: '$font.weight.normal';
paragraph.lineHeight: '1.7em';

paragraph.margin.bottom: '2rem';

Print

print.page.margin: '2cm .5cm';

Quotes

quote.color: '$colors.darkestGray';
quote.family: 'Georgia, Times, serif';
quote.size: '2rem';
quote.styles: 'italic';
quote.weight: 'normal';
quote.lineHeight: '1.4em';

quote.padding.horizontal: '2em';
quote.padding.vertical: '1em';

// Cites

cite.color: '$colors.gray';
cite.family: '#font.family';
cite.size: '1.8rem';
cite.style: 'normal';
cite.weight: 'normal';
cite.lineHeight: '1.2em';

cite.margin.top: '1.4rem';

cite.indicator: '\\2014\\00a0';

Tables

table.size: '$font.size';

table.bordered.modifier: '-bordered';

// Table Cells

table.cell.border.color: '$colors.lighterGray';

table.cell.lineHeight: '$paragraph.lineHeight';

table.cell.padding.horizontal: '1.6rem';
table.cell.padding.vertical: '0.6rem';

// Table Captions

table.caption.background: '$colors.lightestGray';
table.caption.style: 'italic';

table.caption.padding.horizontal: '$table.cell.padding.horizontal';
table.caption.padding.vertical: '1.2rem';

// Striping

table.striped.background: '$colors.lightestGray';
table.striped.modifier: '-striped';
table.striped.position: 'odd';