Colors
Colors consist of base colors such as black, white, and greys as well as the site brand colors and framework colors for such items as header, nav, links, hero, etc.
// Base
$black: #000;
$white: #fff;
// Greys
$grey: #58595b;
$grey-default: #ccc;
$grey-dark: #4c4c4c;
$grey-medium: #999;
$grey-light: #e5e5e5;
$grey-ultra-light: #f2f2f2;
$brand-primary: #d85e00;
$brand-secondary: #303030;
$success: #68ab69;
$error: #de4949;Typography
Typography contains font sizing for both text and headings as well as line heights and font weights.
$font-size-base: 16 !default;
$font-size-small: ceil(($font-size-base * 0.85));
$font-size-h1: floor(($font-size-base * 3.998)); // ~63px
$font-size-h2: floor(($font-size-base * 2.827)); // ~45px
$font-size-h3: ceil(($font-size-base * 1.999)); // ~31px
$font-size-h4: ceil(($font-size-base * 1.414)); // ~22px
$font-size-h5: $font-size-base;
$font-size-h6: ceil(($font-size-base * 0.707)); // ~11px
$font-light: 300;
$font-normal: 400;
$font-bold: 700;
$font-extra-bold: 800;Margins/Padding
Margins/Padding section sets up the base sizes for each type and contains adjustable variables for certain framework elements to allow for a single point of adjustment.
$padding-base: 10;
$margin-base: 10;
// PADDINGS
$header-padding: ($padding-base * 1.5px) 0;
$header-padding-xs: ($margin-base * 1px) 0;
$topbar-padding: ($padding-base * 0.5px);
$footer-padding: ($padding-base * 2px);
$section-padding: ($padding-base * 6px);Heights & Widths
Heights & Widths is similar to the Margins/Padding in that it presents a single point of adjustment for certain framework elements.
$container-max-width: 1170px;
$header-height: 140px;
$header-shrink-height: 90px;
// Adjust to logo sizing
$logo-height: 25px;
$logo-width: 275px;
$logo-shrink-height: 55px;
$logo-shrink-width: 278px;Media Query Widths
$media-query-small: 575px; // min-width: 576px
$media-query-medium: 767px; // min-width:768ox;
$media-query-large: 991px; // min-width: 992px;
$media-query-xlarge: 1199px; // min-width: 1200px;Buttons
Buttons sets up the shared button styling for across the site. The buttons include the standard button and the button alternative.
.button,
.button:visited,
button {
background-color: $brand-primary;
color: $white;
&:hover {
background-color: $brand-secondary;
color: $white;
outline: 0;
}
&:focus {
background-color: rgba($brand-primary, 0.5);
color: $white;
outline: 0;
}
}