Style Guide


h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.
h6. This is a tiny header.



h1. subheader

h2. subheader

h3. subheader

h4. subheader

h5. subheader
h6. subheader



Tiny Button
Small Button
Default Button
Disabled Button
Large Button
Expanded Button

Round Button
Radius Button

Default Button
Success Button
Secondary Button
Alert Button
Info Button
Disabled Button

$include-html-button-classes: $include-html-classes;

// We use these to build padding for buttons.
$button-med: rem-calc(12);
$button-tny: rem-calc(7);
$button-sml: rem-calc(9);
$button-lrg: rem-calc(16);

// We use this to control the display property.
$button-display: inline-block;
$button-margin-bottom: rem-calc(20);

// We use these to control button text styles.
$button-font-family: inherit;
$button-font-color: #fff;
$button-font-color-alt: #333;
$button-font-med: rem-calc(16);
$button-font-tny: rem-calc(11);
$button-font-sml: rem-calc(13);
$button-font-lrg: rem-calc(20);
$button-font-weight: bold;
$button-font-align: center;

// We use these to control various hover effects.
$button-function-factor: 10%;

// We use these to control button border styles.
$button-border-width: 1px;
$button-border-style: solid;

// We use this to set the default radius used throughout the core.
$button-radius: $global-radius;
$button-round: $global-rounded;

// We use this to set default opacity and cursor for disabled buttons.
$button-disabled-opacity: 0.6;
$button-disabled-cursor: $cursor-default-value;