Core Variables API

IMPORTANT

Skeleton Sass API Docs have been moved: https://atomicpages.github.io/skeleton-sass/docs/index.html

Leaving the docs below for historical value for earlier revisions.

---

// background vars
$background-color: #fff !global; // default background color

// GENERAL
$use-global-border-box: true !global; // use global border box?
$use-rem: true !global; // use rem as default unit?
$use-em: false !global; // use em as default unit?
$use-percent: false !global; // use percentage as default unit?
$use-px-fallback: true !global; // allow for pixel fall back

// FONTS
$font-size: 14px !global;  // default font size. Change here will adjust sizes across the board.
$font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif !global; // default fonts
$heading-family: "Georgia", "Times New Roman", serif !global; // default heading (h1-h6) font
$font-color: #444 !global;  // default font color
$heading-color: #181818 !global; // default heading (h1-h6) color
$form-font: $font-family !global; // default form font

// LINKS
$link-color: #333 !global; // default link color
$link-hover: #000 !global; // default link color on :hover
$link-decoration: underline !global; // default link decoration

// GRID
$is-fluid: false !global; // Change to true to enable the fluid grid
$base-col-width: 40px !global; // The width of each columns
$base-gutter-width: 20px !global; // The space between columns
$base-col-count: 16 !global; // The number of columns
$base-width: if($is-fluid, 98%, ($base-col-width + $base-gutter-width) * $base-col-count) !global; // Calculated
$new-grid-width: 80%; // the new grid with set within the 550px breakpoint

// BREAKPOINTS
$tablet-width: 768px !global; // the tablet width media query
$mobile-portrait-width: 300px !global; // the mobile portrait media query
$mobile-landscape-width: 420px !global; // the mobile landscape media query
$mobile-fluid-width: 100%; // this value is not used with breakpoints, it is used in generating a fluid grid for mobile devices

// ------ CHANGE MAY CAUSE UNDESIRED RESULTS
$base-font-size: 10px !global; // the font size in the html element so we can use ems and rems in a friendly way
$use-new-grid: true !global; // Uses the new grid released in Skeleton CSS 2