978.gs in sass

978.scss

$gutter-width: 30px !default;
$grid-width: 978px !default;
$columns: 12 !default;
$column-width: ($grid-width + $gutter-width) / $columns - $gutter-width;

@mixin container {
  margin-left: auto;
  margin-right: auto;
  width: $grid-width;
}

@mixin first {
  margin-left: 0;
  clear: left;
}

@mixin grid($cols, $first: false) {
  @include grid_common($first);
  @include grid_width($cols);
}

@mixin grid_common($first: false) {
  float: left;
  @if $first { @include first; }
  @if not $first {
    margin-left: $gutter-width;
  }
}

@mixin grid_width($cols) {
  width: $column-width * $cols + $gutter-width * ($cols - 1);
}

@mixin grid_prefix($cols) {
  padding-left: ($grid-width + $gutter-width) / $columns * $cols;
}

.container {
  @include container;
}

@if $columns == 8 {
  .grid_1,
  .grid_2,
  .grid_3,
  .grid_4,
  .grid_5,
  .grid_6,
  .grid_7,
  .grid_8 {
    @include grid_common;
  }
}
@if $columns == 12 {
  .grid_1,
  .grid_2,
  .grid_3,
  .grid_4,
  .grid_5,
  .grid_6,
  .grid_7,
  .grid_8,
  .grid_9,
  .grid_10,
  .grid_11,
  .grid_12 {
    @include grid_common;
  }
}
@if $columns == 16 {
  .grid_1,
  .grid_2,
  .grid_3,
  .grid_4,
  .grid_5,
  .grid_6,
  .grid_7,
  .grid_8,
  .grid_9,
  .grid_10,
  .grid_11,
  .grid_12,
  .grid_13,
  .grid_14,
  .grid_15,
  .grid_16 {
    @include grid_common;
  }
}

@for $i from 1 through $columns {
  .grid_#{$i} {
    @include grid_width($i);
  }
  .prefix_#{$i} {
    @include grid_prefix($i);
  }
}

.first {
  @include first;
}

_form.html.slim

= semantic_form_for(@post) do |f|
  = f.inputs do
    = f.input :title
    = f.input :body, :as => :text
    = f.input :shown
  = f.buttons

application-n.scss

/* application-1378.scss */

$gutter-width: 30px;
$grid-width: 1378px;
$columns: 16;
@import "includes/application.scss";

a#gs-overlay-badge {
  background-image: url(/images/1378-badge.png);
}

/* application-1218.scss */

$gutter-width: 30px;
$grid-width: 1218px;
$columns: 16;
@import "includes/application.scss";

a#gs-overlay-badge {
  background-image: url(/images/1218-badge.png);
}

/* application-978.scss */

@import "includes/application.scss";

a#gs-overlay-badge {
  background-image: url(/images/948-badge.png);
}

/* application-748.scss */

$gutter-width: 20px;
$grid-width: 748px;
$columns: 12;
@import "includes/application.scss";

a#gs-overlay-badge {
  background-image: url(/images/748-badge.png);
}

/* application-300.scss */

$gutter-width: 12px;
$grid-width: 300px;
$columns: 8;
@import "includes/application.scss";

a#gs-overlay-badge {
  background-image: url(/images/300-badge.png);
}

application.html.slim

! doctype html
html
  head
    meta{charset='utf-8'}
    meta{name="viewport" content="initial-scale=1"}
    title 978.gs with Sass
    = stylesheet_link_tag 'formtastic', :media => 'all'
    = stylesheet_link_tag 'application-978',  :media => 'all'
    = stylesheet_link_tag 'application-1378', :media => 'all and (min-width: 1408px)'
    = stylesheet_link_tag 'application-1218', :media => 'all and (min-width: 1248px) and (max-width: 1407px)'
    /= stylesheet_link_tag 'application-978',  :media => 'all and (min-width: 1002px) and (max-width: 1247px)'
    = stylesheet_link_tag 'application-748',  :media => 'all and (min-width: 768px) and (max-width: 1001px)'
    = stylesheet_link_tag 'application-300',  :media => 'all and (min-width: 0px) and (max-width: 767px)'
    = javascript_include_tag :defaults, 'jquery.gs-overlay.min', :cache => true
    | <!--[if lte IE 8]>
    = javascript_include_tag 'jquery.media-query.min'
    javascript:
      $(function() {
        $.mediaquery([
          {minWidth: 1248, maxWidth: 1407, href: '/stylesheets/application-1218.css'},
          {minWidth: 1002, maxWidth: 1247, href: '/stylesheets/application-978.css'},
          {minWidth:  768, maxWidth: 1001, href: '/stylesheets/application-748.css'},
          {minWidth:    0, maxWidth:  767, href: '/stylesheets/application-300.css'}
        ]);
      });
    | <![endif]-->
    = csrf_meta_tag
  body
    div#gs-overlay &nbsp;
    nav.user_nav
      a{href="#" id="gs-overlay-badge" title="This site is built with 978 grid system"}
    div.notification
      - flash.each do |name, msg|
        span{class=name}= msg
    .first= yield

application.js

input {
get_grid_width = function() {
  var grid_width = $(window).width();
  grid_width = grid_width >= 1408 ? 1378 :
    grid_width >= 1248 ? 1218 :
    grid_width >= 1002 ?  978 :
    grid_width >=  768 ?  748 : 300;
  return grid_width;
}
$(function() {
  $('div#gs-overlay').gsoverlay({
    trigger: $('a#gs-overlay-badge'),
    grid: get_grid_width(),
    color: '#aa1b4a',
    opacity: 0.2
  });
});

application.scss

@import "includes/978.scss";
@import "includes/formtastic_changes.scss";

html {
  background-color: #ccc;
  font: 13px/1.5 Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
}

.body {
  padding: 6px 12px;
  @include container;
  position: relative;
  background-color: #eee;
}

.user_nav {
  position: absolute;
  @include grid($columns, true);
  text-align: right;
}

h1 {
  @include first;
  margin-top: 0;
}

input,textarea {
  border: 2px solid #dca;
  color: #44a;
}

input[type="button"],input[type="submit"] {
  background-color: #dca;
  color: #000;
}

form.post {
  @if $columns == 8 {
    @include grid_prefix(0);
    @include grid(8, true);
    @include formtastic(8, 3);
  }
  @if $columns == 12 {
    @include grid_prefix(2);
    @include grid(8, true);
    @include formtastic(8);
  }
  @if $columns == 16 {
    @include grid_prefix(3);
    @include grid(10, true);
    @include formtastic(10);
  }
}

a#gs-overlay-badge {
  float: right;
  margin-left: 1em;
  width: 59px;
  height: 25px;
}

formtastic_changes.scss

@mixin formtastic_labels($cols: 2) {
  $label-width: $column-width * $cols + $gutter-width * ($cols - 1);
  fieldset.buttons,ul.errors { padding-left: $label-width; margin-left: $gutter-width; }
  fieldset > ol > li {
    label {width: $label-width; }
    p.inline-hints,p.inline-errors{ padding-left: $label-width; margin-left: $gutter-width;}
    fieldset ol { padding-left: $label-width; margin-left: $gutter-width; }
    &.boolean label { padding-left:$label-width; margin-left: $gutter-width; width:auto; }
  }
}

@mixin formtastic_fields($cols) {
  fieldset > ol > li {
    $width: $cols*$column-width + ($cols - 1)*$gutter-width - 4px;
    &.text textarea,&.string input,&.password input,&.numeric input,&.email input,&.url input,&.phone input,&.search input { width: $width; margin-left: $gutter-width; }
    &.text textarea[cols],&.string input[size],&.password input[size],&.numeric input[size],&.email input[size],&.url input[size],&.phone input[size],&.search input[size] { width:auto; max-width: $width; margin-left: $gutter-width; }
    fieldset ol { width: $width; }
  }
}

@mixin formtastic($field-cols, $label-cols: 2) {
  @include formtastic_labels($label-cols);
  @include formtastic_fields($field-cols - $label-cols);
}

form.formtastic {
  @include formtastic_labels;
}

@for $i from 3 through $columns - 2 {
  .grid_#{$i} form.formtastic {
    @include formtastic_fields($i);
  }
}