Skip to content

Home

Jump to bottom
AtomicPages LLC edited this page May 21, 2013 · 15 revisions

Background

As you know, Skeleton SASS is based off of Dave Gamache's Skeleton CSS. Skeleton is similar to 960.gs except it is 100% responsive with the power of pure-CSS media queries.

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 grid that is used by millions of websites across the world. After tinkering with Bootstrap, Gumby, and Foundation 3 I became tiresome of bloated frameworks that had many features I didn't need for responsive designs.

Why I like Skeleton

  • It's lightweight (6270 bytes, 5173 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

Why Skeleton SASS?

To the best of my knowledge, there was no SASS transcription of this amazing responsive grid available for SASS, SCSS, and Compass. I found myself relying more on CSS pre-processors rather than writing conventional CSS. Why not make it available to everyone?

What does Skeleton SASS have to offer?

Skeleton SASS is literally a SASS, SCSS, and Compass translation of Skeleton CSS with a few twists.

Goals of Skeleton SASS

The goal of Skeleton SASS is to provide 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? 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

Similar to Skeleton CSS and 960.gs, this grid is created on math. By math I literally mean math - you know, that high school algebra class you always dozed off in ;)

Two simple sequences:

  • 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.gs 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?

The Fluid Grid

The second equation you saw is the 960.gs fluid grid equation for creating - you guessed it - 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?

Why not?! Wouldn't it be great if a easy-to-use responsive grid came in a fluid flavor too? Let's be honest... of course it would.

Why Document the Equations?

Again, why not?! I like free code. I like code that documented well. I like being able to pick apart and figure out what the code is doing.

Works Cited

  1. Mozilla Developer Network
Clone this wiki locally