Variable Documentation

This page contains information of and relating to the variables used in all of the files. You may include this file in any child style (private or public) at any time using any valid SASS data type. SASS data type reference can be viewed here.

_vars.scss and _vars.sass are already documented well if I may say so myself. Alas, there is always room for clarification :)

This document will be separated via function... Here is an example:

Sample Variable Set

/**
 * Some description here
 * Some additional stuff here...
 * @param expected data type
 * Note on @param, if there are more than one possible expected data type the format will be (type1 | type2) where | is "or"
 */
$myVar: null;

Typography

General Font Styles

/**
 * Adjusts the size of the font as used in base.sass and base.scss. All headings and other font sizes are calculated based on this single variable. Change here will result in changes for headings and other font sizes.
 * Any valid font unit will do (e.g. px, em, pt, %, etc)
 * @param number
 */
$fontSize: 14px;

/**
 * Same concept as above except these are GENERAL font families that will be used on elements like body and, by default, input fields.
 * @param list | string
 */
$fontFamily: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

/**
 * Again, same idea except this is the same thing as above except it's the color of the font.
 * @param color
 */
$fontColor: #444;

Form Font Styles

/**
 * If you would like a custom form font, this is the place to do it! Enter a string or list and that's all you need to do. The value here will apply to the following elements:
 * * .button
 * * button
 * * input[type="submit"]
 * * input[type="reset"]
 * * input[type="button"]
 * * input[type="text"],
 * * input[type="password"]
 * * input[type="email"]
 * * input[type="search"]
 * * input[type="url"]
 * * input[type="tel"]
 * * textarea
 * * select
 * @param list | string
 */
$formFont: $fontFamily;

Link/Anchor Styles

/**
 * Hopefully the name is self-explanatory but this variable controls the default anchor/link color. If you change this variable then the color of your link will change.
 * @param color
 */
$linkColor: #333;

/**
 * Same idea as above except this is the color that will happen when you move your cursor over a link or anchor.
 * @param color
 */
$linkHoverColor: #000;

/**
 * Same idea as above but you must pass in a valid value for the text-decoration property.
 * @param string
 */
$linkDecoration: underline;

Heading Styles

/**
 * The font family that you wish ALL headings to be. By "headings" I mean h1-h6.
 * @param list | string
 */
$headingFamily: "Georgia", "Times New Roman", serif;

/**
 * Want a default color for those headings (h1 - h6)? Set that here!
 * @param color
 */
$headingColor: #181818;

Grid Variables

/**
 * The width of the .container element. This element is the width of the page. All content will be inside this element so it is essentially the width of the page. Value can be a percentage or a pixel value only.
 * @param number
 */
$baseWidth: 960px;

/**
 * This variable is used in media query calculations. If you change the value of the width this value will not be changed. You may change this to a different value; however, you me see undesired results on your media queries as a result.
 * @param number
 */
$baseWidthMQ: 960px;

/**
 * This is the width of the column. You will need to change this value if you wish to use a different column count. Here are predefined values:
 * * 12 column = 60px
 * For additional information you can visit http://grids.heroku.com/
 * @param number
 */
$baseColWidth: 40px;

/**
 * The gutter width is the distance between columns on either side. This is used in the calculation of the grid and can usually be left at 20px.
 * @param number
 */
$baseGutterWidth: 20px;

/**
 * A true/false value that you may specify (by default) if you wish the grid to be fluid. If the grid is fluid then the column values will be replaced with percentages rather than absolute pixel widths. This is great if you want a fluid grid. For additional information on fluid grids check out our demo at http://atomicpages.github.io/skeleton-sass/
 * @param boolean
 */
$isFluid: false;

Danger Zone

/**
 * Default value for the columns. You may change this setting but you will need to properly adjust the $baseColWidth value in order to correctly generate the grid. The only exception is if you wish to use nothing but a fluid grid, then you can safely change this value without a headache.
 * @param number
 */
$baseColCount: 16;

/**
 * The width of the tablet. This will change the media queries in the skeleton and layout files. It is recommended that you do NOT change this value.
 * @param number
 */
$tabletWidth: 768px;

/**
 *The width of the mobile portrait. This will change the media queries in the skeleton and layout files. It is recommended that you do NOT change this value.
 * @param number
 */
$mobilePortraitWidth: 300px;

/**
 * The width of the mobile landscape. This will change the media queries in the skeleton and layout files. It is recommended that you do NOT change this value.
 * @param number
 */
$mobileLandscapeWidth: 420px;