Skip to content

Variable Documentation

Jump to bottom
AtomicPages LLC edited this page Sep 4, 2016 · 10 revisions

Skeleton Sass 2 introduces many new things to the table as well as refining many things that Skeleton Sass 1 created. Variables are no exception and have been rethought completely.

Two Categories

Skeleton Sass 2 has two distinct categories of variables – global and theme-scoped variables.

Global Variables

The global variables are found in skeleton/core/_config.scss and are the default settings for Skeleton Sass 2. Let's begin by taking a look at each global variable.

Backgrounds

As it stands, Skeleton Sass 2 has only a single background variable that controls the color of the background on the body element.

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

Skeleton Sass 2 introduces a some new players to the field and gives you better control when choosing your font unit of choice.

$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
  • $use-rem uses rem units as a base rather than em units or absolute units like pixels.
  • $use-em uses em units as the default
  • $use-percent sets the default unit to percentages (a safe relative unit)

Out of the box, Skeleton Sass 2 uses rem units for all relative units including, but not limited to, font sizes, margins, and padding. We can disable the use of rem, em, and percentages by setting these variables all to false. This will enable pixels as the base unit.

  • $use-px-fallback allows us to use a pixel fallback for legacy browsers that may not support our fancy units like rem or em.
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
  • $font-size sets the font size and will influence all of the calculations across the framework. Although we specify these units as pixels, they will be converted automatically for us during compilation.
  • $font-family adjusts the family of font that is used by default. This is the font family used in the body element.
  • $heading-family stays true to the origins of Skeleton Sass 2. Change this variable to use a different font for headings.
  • $font-color adjusts the default font color specified in the body element.
  • $heading-color adjusts the default color used for all the headings
  • $form-font adjusts the font used with all the form elements that accept user input. By default, this font is the same as the font-family.
Links
$link-color: #333 !global; // default link color
$link-hover: #000 !global; // default link color on :hover
$link-decoration: underline !global; // default link decoration
  • $link-color adjusts the link color. A change here will alter every link that is styled under the a element. If you have specific styles under a different selector, these styles will be overridden.
  • $link-hover adjusts the color when the user hovers on a link. A change here will alter every link that is styled under the a element. If you have specific styles under a different selector, these styles will be overridden.
  • $link-decoration adjusts whether or not all links have an underline by default or not. If underline is used, then all links will have an underline. If none is used, then all links will not have an underline on any state unless you specify differently in your theme files.
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
  • $is-fluid is a boolean (true/false) value that creates a fluid grid or a fixed grid.
  • $base-col-width is the width of the column. By default, this value is 40px. When a fluid grid is used, this number is not factored into the calculation.
  • $base-gutter-width is the width of the gutter, or margins on either side of the column. By default, we have a 20px gutter width which means we have a 10px of margins on left and right side of the column.
  • $base-col-count is the number of columns to generate. This is the most important number when generating any grid.
  • $base-width is the overall width of the .container element (the width of the grid). Note: this value is calculated automatically.
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

Note: these breakpoints are the default in Skeleton Sass. It is best practice to let the content determine the breakpoints. We strongly recommend changing these values when appropriate.

  • $tablet-width acts as the width for .container when using a fixed grid and serves as a breakpoint for tablet and mobile devices
  • $mobile-portrait-width is the width of the .container when using a fixed layout
  • $mobile-landscape-width is the width if the .container when using a fixed layout. This variable also serves as a breakpoint for mobile devices in landscape mode after we add 60 to our current number:
    • @media only screen and (min-width: $mobile-landscape-width + 60) and (max-width: $tablet-width - 1)
  • $mobile-fluid-width is the with of .container when we use a fluid layout
Danger Zone
// ------ 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

Thankfully, we only have a single variable in our danger zone. $base-font-size is the home base for our relative font calculations. This font size is included in the html element (the root element in our DOM). If you are unfamiliar with this usage then read on.

By default, most browsers don't have relative units setup in such a way that 1.2em means a font with the same size as 12px. If we set our default font size in the root of our DOM to 10px, this means that for every child of our root, it will inherit a default font size of 10px. This makes our conversion to relative units much easier. All of a sudden, 1em is the same as 10px, 240% is the same as 24px, and 1.4rem is the same as 14px.

You may change this variable if you wish. However, there will be changes to every style defined in skeleton/themes/[theme]/_base.scss (replacing [theme] with the name of the active theme) that uses the relative function (used 47 times).

Clone this wiki locally