Skeleton's responsive CSS grid rocks. But some of us don't like muddling up our clean semantic HTML markup with grid framework classes. The value of CSS is in letting you separate presentation and content, so a good CSS grid framework will let you use it completely in your own site's CSS, by applying grid widths to your pre-existing CSS classes and selectors.
Skeleton-SASS is a one-to-one translation of the classes in Skeleton's grid framework, but remixed as SASS mixins. Instead of giving a div a class of six columns, inside your own CSS specifying the div you'd simply include the mixin +columns(6).
You can still use the pre-define classes to quickly build the grid by using just 2 includes column-list and offset-list.
You can generate the whole grid using the mixin generate-grid.
The other big advantage of Skeleton-SASS is that the actual grid widths are only calculated at compile-time. This means that your page width, number of columns, and margin sizes are all easily tweakable if you want to mix things up —- say, switch from a 16-column grid to a 24-column, or bump everything up to 1024px instead of 960px.
The @media queries have been mixin-fied for a clear implementation throughout your project. Use respond-to() with simple names such as desktop, tablet or mobile rather complicate min and max widths.
###Usage
-
Add this partial to your project.
-
Define $base-width, $tablet-width, $mobile-portrait-width,$mobile-landscape-width, $num-columns, $gutter-width, $border-width, $class-column and $class-offset with the rest of your varibles or remove the comment slashes ( // ).
-
Use the mixins on your layout SCSS to quickly create a responsive grid.