Take a look at our yummy self-cooked plugins for developers' everyday-needs. Annoyed by either oversized plugins or out-of-the-box-solutions that incapacitate us from taking full code-control according to best practices we decided to write our own plugins - so here it is: the TTS-plugins-lib.
The goal is to keep the code minimalistic simple (KISS - Keep It Simple, Stupid and DRY - Don't Repeat Yourself), build independent modules ready-to-wear and provide the plugins in a sort of API-style to secure plug'n'play-readiness.
Requirements: jQuery (whatever version), HTML5
One of the CSS-grids I like best is inuit.css developed by Harry Roberts, @inuitcss. It's easy to use and minimalistic, independent from HTML-elements, sort of plug'n'play-ready. What I am missing is the possibility to have it generated on the fly via SASS to ease layout-changes and not having to regenerate the grid and re-import it.
Seems I'm not the only one, but I don't see any changes to be made to the inuit-grid, so the inuit-grid-mixin produces exactly the same output as the grid-generator does for the pixel grid (not the fluid grid). All the comments stay in SASS, so you can get rid of some extra-bytes.
To use the mixin simply put @include inuit_grid($columns, $col_width, $gutter_width) in your main SASS-file and replace $columns with the amount of columns your grid should have, $col_width with the width of a column in pixel, 20px for example, and $gutter_width with the pixels you want as space between the columns. And there you go.
I decided to use real SASS, not SCSS because SASS definitely spares us a bit more of the typing than SCSS does. For the use of the grid visit its site or take a look at a tutorial. However: have fun and thanks to Harry Roberts for the good work.
@mixin inuit_grid($columns, $col_width, $gutter_width)
// Page wrapper. Apply to the body where possible, as per: http://csswizardry.com/2011/01/using-the-body-element-as-a-wrapper/
width: $columns * $col_width + $columns * $gutter_width - $gutter_width
margin: 0 auto
padding: 0 $gutter_width / 2
// Most frameworks rely on class="end" or similar to remove the margin from the last column in a row of grids. We don't want to do that so we use a combination of margin- and negative margin-left. It's clever...
// We also allow you to use grid items as stand alone columns or in a series of columns. To use a series just wrap them all in <div class="grids">...</div>
max-width: $columns * $col_width + $columns * $gutter_width
margin: 0 0 0 0-$gutter_width
// So we can make grids out of lists
// Here we are using an attribute selector to detect the string 'grid-' in an element's class. This works by assuming that anything we call grid-
// Ensure any grid item's FIRST class is a grid-
// VALID: class="grid-4 text-centre"
// INVALID: class="left grid-4"
margin: 0 $gutter_width 0 0
margin: 0 0 0 $gutter_width
// Allow nested grids:
margin: 0 0-$gutter_width
// create col classes
@for $i from 1 through $columns
width: $col_width * $i + ($i - 1) * $gutter_width
@if $i == $columns