Skip to content

Version 1 Docs

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

Background

Skeleton SASS is based off of Dave Gamache's Skeleton CSS. Skeleton CSS a fork of the popular 960 grid system that harness the power of media queries to handle styles at different viewport dimensions.

What are Media Queries?

Media queries "consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color." [1]

Why Skeleton?

The 960 grid system is a time-tested tool that is used by millions of websites. This grid system offers designers and developers the flexibility to structure their web pages without having the write additional CSS to alter the structure.

Why Skeleton SASS is Better

  • It's lightweight. The entire library is 26024 bytes uncompressed and 18716 bytes compressed
  • It's easy to use
  • Packaged with minimal styling
  • Only requirement is importing or linking skeleton.css
    • Assuming you're only looking for the responsive part and not the predefined styles part
  • Offers both styles of SASS syntax
  • Offers the option of using compass

Why Skeleton SASS?

Why not! Skeleton CSS is a widely-used front-end CSS framework so why not make a SASS port that is identical to the original? Why skim through dozens of files when you don't have to? Why only get the structure when you want the base.css styles too? If you've tried other SASS ports and been unsatisfied, then give Skeleton SASS a try! You'll quickly notice that it's almost identical to working with Skeleton CSS.

Goals of Skeleton SASS

The goal of Skeleton SASS is to provide the most simple experience during the initial stages of website markup. Using SASS, you are able to easily customize your grid to suit you needs (e.g. 12-column grid, 16-column grid, 20-column grid, etc). With Skeleton SASS, you can spend less time combating mountains of documentation and more time styling your site using SASS or vanilla CSS.

Additionally, Skeleton SASS provides you with flexibility in the smallest, lightest possible package while delivering a high-performing framework that results in a package that is identical to the original Skeleton CSS.

  • Few files make editing easy. My main complaint of other Skeleton SASS translations is that they use too few or too many files to accomplish their goal. Skeleton SASS has six files each are logically named. All files are heavily documented, all files contain only the necessary information, and only three css files will be produced; this is the same as the original Skeleton CSS.
  • Logical separation. Mixins, variables, and functions all have their own files. These files are non-intrusive and will not tamper with the original architecture of Skeleton.
  • Little to no conversion factor. If you know SASS and/or Compass and you have an existing project that uses Skeleton CSS, the conversion factor is minimal.

The Code

  1. Conversion into SASS/SCSS syntax
  2. Use of $variables
  3. Use of @mixins
  4. Use of @functions

For consider: This little bit of code generates the entire grid without hassle.

// grid generation
@include grid($baseWidth);

Use of nested-style syntax to easily discern parent-child relationships.

.clearfix, .row {
	zoom: 1;
	&:before, &:after {
		content: '\0020';
		display: block;
		overflow: hidden;
		visibility: hidden;
		width: 0;
		height: 0;
	}
	&:after { clear: both; }
}

A single coherent file that houses default settings for the entire translation. Want to edit a value on a global level? Yes, please! Do so without wasting time searching through mountains of unorganized code and ambiguous variable names.

// font vars
$fontSize: 14px; 											
$fontFamily: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
$fontColor: #444;

The Grid

The entire grid is a simple algorithm that generates the grid for you. If you want to learn more about how Skeleton SASS generates the grid, check out _functions file and the _mixins file.

Two simple sequences make this happen:

  • a_n = column_width + ( column_width + gutter_width ( n - 1 ) )
  • a_n = ( ( 100 * n ) / column_count ) - 2

The first sequence requires explanation. Taking a look at 960 fixed-grid we will see the following:

  • column_width = 40px
  • column_count = 16
  • gutter_width = 20px

Plugging all values into our equation and we have:

  • a_1 = column_width + ( column_width + gutter_width ( 1 - 1 ) ) => 40px
  • a_2 = column_width + ( column_width + gutter_width ( 2 - 1 ) ) => 100px
  • a_3 = column_width + ( column_width + gutter_width ( 3 - 1 ) ) => 160px

Pretty easy, right? Let's check out the fluid grid next.

The Fluid Grid

The second equation you saw is the 960 fluid-grid equation for creating fluid grids.

The only variable we need for fluid grid creation is the number of columns we wish to have. In our case, we want 16.

  • column_count = 16
  • a_n = ( ( 100 * 1 ) / 16 ) - 2 => 4.25[%]
  • a_n = ( ( 100 * 2 ) / 16 ) - 2 => 10.5[%]
  • a_n = ( ( 100 * 3 ) / 16 ) - 2 => 16.75[%]

Want something different? Just pass in a different column_count value!

Why Fluid Grid?

Skeleton CSS did not originally offer a fluid grid. Depending on your design, you might want a fluid grid. So, I ask you all, why not offer a fluid grid that is as seamless as the fixed grid?

Function Documentation

This page contains information of and relating to the custom functions in the _functions.scss and _functions.sass file. I'll be using the SCSS syntax for documentation and examples on this page. SASS data type reference can be viewed here.

We only have two lovely functions for Skeleton SASS. See below for additional information.

numToString()

This function converts a number to its English word.

string numToString ( number $int )
	
/**
 * This function generates a number from 1 to 100 using SASS - amazing!
 * @param number $int; number to convert to English word
 * @return String
 */
@function numToString($int) {
	$ones: "one", "two", "three", "four", "five", "six", "seven", "eight", "nine";
	$teens: "eleven", "twelve", "thirteen", "fourteen", "fifteen", "sixteen", "seventeen", "eighteen", "nineteen";
	$tens: "", "twenty", "thirty", "fourty", "fifty", "sixty", "seventy", "eighty", "nintey";
	$int: abs($int); // no nonnegative numbers
	$number: "";
	@if($int > 100) { // I'm sorry Dave; I can't let you do that.
		$number: "No numbers past 100";
	}
	$temp: $int / 10;
	$temp: floor($temp);
	@if($int >= 1 and $int <= 100) {
		@if($temp < 1) { // it's a one!
			$number: nth($ones, $int % 10);
		}
		@if($temp == 1) { // in the teen range
			// in the teen range
			@if($int % 10 == 0) {
				$number: "ten";
			} @else {
				$number: nth($teens, $int % 10);
			}
		}
		@if($temp >= 2 and $temp <= 9) { // more than our teens
			@if($int % 10 == 0) {
				// means it's a number evenly divisible by 10
				$number: nth($tens, $int / 10);
			} @else {
				$number: "#{nth($tens, floor($int / 10))}-#{nth($ones, $int % 10)}";
			}
		}
		@if($temp == 10) { // this is the end...
			$number: "one-hundred";
		}
	} @else {
		$number: "Invalid parameter passed. Number must be between 1 and 100."
	}
	@return $number;
}

The next function we have addresses an issue with the unitless function in SASS. According to this GitHub issue the unitless function does not actually strip the units. We have included this function for your convenience.

number strip-units ( number $number )

/**
 * This function actually strips the unit!
 * @param number $number; number + unit
 * @return number
 */

@function strip-units($number) {
	@return $number / ($number * 0 + 1);
}

Mixin Documentation

This page contains information of and relating to the custom mixins in the _mixins.scss and _mixins.sass file. I'll be using the SCSS syntax for documentation and examples on this page. SASS data type reference can be viewed here.

Compass & SASS

The compass mixin file depends on _dependencies.scss or _dependencies.sass (depending on your preferred style of syntax).

@grid

The @grid mixin utilizes two "private" mixins to actually generate the fluid or fixed grids.

Note: by "private" we simply mean that the mixin is prefixed with an underscore to indicate that it shouldn't be used on its own. SASS has no access control so there is no real way to curb using this mixin directly.

mixed // grid ( [ number $width: 960px, [ bool $fluid: false, [  number $gutterWidth: 20px, [ number $colCount: 16 ] ] ] ] )

/**
 * The grid mixin calculates and creates the grid based on three factors:
 * * $colWidth
 * * $gutterWidth
 * * $colCount
 *
 * @param number $width = 960px; width of .container
 * @param bool $fluid = false; fluid grid or not?
 * @param number $gutterWidth = 40px; width of the gutter
 * @param number $colCount = 16; number of columns to create
 */

@mixin grid($width: $baseWidth, $fluid: $isFluid, $gutterWidth: $baseGutterWidth, $colCount: $baseColCount) {
	@if ( $fluid == true ) {
		@include _fluidGrid($colCount);
	} @else {
		// we no longer need to set a value for $colWdith because it is generated dynamically right here!
		// @see https://github.com/atomicpages/skeleton-sass/issues/7
		$colWidth: ($width / $colCount) - $gutterWidth;
		@include _fixedGrid($width, $colWidth, $gutterWidth, $colCount);
	}
}

// EXAMPLES

@include grid($baseWidth, true); // makes a fluid grid with default settings
@include grid(92%, true); // makes a fluid grid with a .container width of 92%
@include grid(960px, false, 20px, 12); // creates a 12 column grid
@include grid(1200px, false, 20px, 20); // creates a wide 20 column grid
_fluidGrid

This is the first of the private mixins. This mixin builds the fluid grid and only takes the parameters that it needs to actually build the grid. This reduces overhead when compiling to CSS and makes life easier when debugging.

mixed _fluidGrid ( number $colCount [, string $unit = "%"] )

/**
 * Mixin that creates the fluid grid
 * @param number $colCount number of columns to create
 * @param string $unit = "%"; the unit to append to the end of the width. This should never be changed.
 */
@mixin _fluidGrid($colCount, $unit: "%") { // generate the fluid grid
	// override only for fluid
	.container {
		.column,
		.columns {
			margin: {
				left: 1%;
				right: 1%;
			}
		}
	}
	/* The Grid */
	.container {
		@for $i from 1 through $colCount {
			@if ( $i == 1 ) {
				.#{numToString($i)}.column,
				.#{numToString($i)}.columns { width: ( ( 100 * $i ) / $colCount ) - 2#{$unit}; }
			} @else {
				.#{numToString($i)}.columns { width: ( ( 100 * $i ) / $colCount ) - 2#{$unit}; }
			}
		}
		@include _offset($unit, $colCount, false);
	}
}
_fixedGrid

Like the _fluidGrid mixin, the _fixedGrid calculates a fixed grid. A fixed grid is simply one that relies on pixels (or other absolute units) opposed to percentages.

mixed _fixedGrid ( number $width, number $colWidth, number $gutterWidth, number $colCount )

/**
 * Mixin to create a fixed grid
 * @param number $width width of .container
 * @param number $colWidth width of the column
 * @param number $gutterWidth width of the gutter
 * @param number $colCount number of columns
 */
@mixin _fixedGrid($width, $colWidth, $gutterWidth, $colCount) {
	/* The Grid */
	.container {
		@for $i from 1 through $colCount {
			 @if ( $i == 1 ) {
				.#{getWordFromNum($i)}.column,
				.#{getWordFromNum($i)}.columns { width: $colWidth; }
			} @else {
				.#{getWordFromNum($i)}.columns { width: $colWidth + ( ( $colWidth + $gutterWidth ) * ( $i - 1 ) ); }
			}
		}
		.one-third.column { width: ( $width / 3 ) - 20}
		.two-thirds.column { width: ( ( $width * 2 ) / 3 ) - 20 }
		/* The Offsets */
		@include _offset("px", $colCount, $colWidth);
	}
}

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;

Overriding Global Variables

Overriding variables on a global level is easy to do with Sass. As it stands, Sass will see any two variables on a global level. For example:

$foo: "bar";
@mixin bar($s: $foo) {
    $foo: $s;
    content: $foo;
}
body {
    @include bar("this is a test");
    content: $foo;
}

With the result being:

body {
     content: "this is a test";
     content: "this is a test";
}

Starting in Sass 3.3.x the above convention will be deprecated. In order to specify a global variable, we need to include the !global flag after the name of the variable. ALthough this feature is not available in 3.2.x, Skeleton Sass will incorporate this feature as soon as the stable release of 3.3.x is available.

$foo: "bar";
@mixin bar($s: $foo) {
    $foo: $s !global; // specifies global $foo, not a local variable called $foo
    content: $foo;
}
body {
    @include bar("this is a test");
    content: $foo;
}

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;

Setting up a Fluid Grid

Setting up a fluid grid with Skeleton SASS is easy! Accomplishing this only takes a few steps.

Step 1

Currently with version 1.4.0, there is no way for the .container width to be dynamically adjusted. With that being said, we need to adjust that first and foremost. By default, I like to use 92%. You may change it to a value that suits your needs. You may even leave it to the default 960px if you wish!

.container {
	width: 92%; // CHANGE ME
	margin: 0 auto;
	padding: 0;
	.column,
	.columns {
		float: left;
		display: inline;
		position: relative;
		&.alpha { margin-left: 0; }
		&.omega { margin-right: 0; }
	}
}

Step 2

Secondly, we need to change our grid mixin. Since our fluid grid operates on a system of percentages, width is not important.

@include grid($baseWidth, true);

Since our first parameter is a width, we don't use it. We can change it to be something like false or null if we want and the grid will not be altered.

Fluid Tablet Grid

If you desire to change the tablet media query to a fluid grid, the process is just as easy! Just follow the same simple steps:

Step 1

.container {
	width: $tabletWidth; // you may leave this or change it to a different percentage
	.column, .columns {
		&.alpha {
			margin: {
				left: 0;
				right: 10px;
			};
		}
		&.omega {
			margin: {
				right: 0;
				left: 10px;
			};
		}
	} 
}

Step 2

Similar to our desktop adjustment, width is not important for our fluid grid.

@include grid($tabletWidth, true); // fluid

Works Cited

  1. Mozilla Developer Network
Clone this wiki locally