sass-960gs 0.0.1

data/README.md

@@ -0,0 +1,97 @@
+960 Grid System - Standalone
+================================
+
+960.gs is created by Nathan Smith. See the official site for more info: <http://960.gs/>
+
+> This plugin is consistent with latest version of 960.gs as of 3/19/2012
+
+Install
+=======
+
+    gem install sass-960
+
+Adding the 960 plugin to an existing project
+============================================
+
+Then make sure you have imported the grid library into your core .sass or .scss file with:
+
+    @import '960/grid';
+
+Customizing your Grid System
+============================
+
+This plugin uses the following configuration variables:
+
+* Global:
+  * `$ninesixty-columns` (default: 12) count of grid columns
+  * `$ninesixty-class-separator` (default: `_`) separator for generated classes
+* Fixed grid:
+  * `$ninesixty-gutter-width` (default: 20px) default gutter width
+  * `$ninesixty-grid-width` (default: 960px) default width of the grid container
+* Fluid grid
+  * `$ninesixty-fluid-gutter-margin` (default: 2%) default gutter width for fluid grid
+  * `$ninesixty-fluid-grid-width` (default: 92%) default width of the fluid grid container
+  * `$ninesixty-fluid-grid-margin` width of container margin
+  * `$ninesixty-fluid-grid-min-width` (default: 960px) default minimum width of container
+
+All of the mixins included with this plugin use these configuration variables
+as defaults if the corresponding argument is omitted from a mixin call.
+
+Class-Based Grid System
+=======================
+
+To create a grid system that works like the original 960 Grid System framework
+use the `@include grid-system-complete` mixin to generate the corresponding classes. You
+can also customize the number of columns as demonstrated:
+
+Example:
+
+    @include grid-system-complete(24);
+
+If you want to scope the grid inside a specific set of selectors or control your container class' name you can use the `+grid-system` mixin instead.
+
+Example:
+
+    #wrap {
+      .my_container {
+        @include grid-system(16); } }
+
+This will render all of the grid system nested below your selector, replacing the normal function of the container class (would be .container_16 in this example).
+
+Making Semantic Grids
+=====================
+
+To create a grid system using only CSS, use the following semantic grid mixins:
+
+* Use the `@include grid-container` mixin to declare your container element.
+* Use the `@include grid(N, columns, gutter-width)` mixin to declare a grid element.
+* Use the `@include alpha` and `@include omega` mixins to declare the first and last grid elements for a row.
+* Use the `@include grid-prefix(N, columns)` and `@include grid-suffix(N, columns)` mixins to add empty grid columns before or after a grid element.
+* Use the `@include grid-push(N, columns)` and `@include grid-pull(N, columns)` mixins to move a grid element from its default position.
+
+`N` is the number of grid columns to span as in `grid_N` or `push_N` with the original 960 Grid System framework.
+
+Example:
+
+    $ninesixty-columns: 16
+
+    #wrap {
+      @include grid-container
+      #header {
+        @include grid(16); }
+      #middle {
+        @include grid(16);
+        #left-nav {
+          @include grid(5);
+          @include alpha; }
+        #main-content {
+          @include grid-prefix(1);
+          @include grid(10);
+          @include omega; } } }
+
+Authors/Contributors
+====================
+
+[Chris Eppstein](http://chriseppstein.github.com/) is the creator of Compass, a core contributor to Sass and the father of this plugin.
+
+[Nathan Smith](http://sonspring.com/) is the author of [960.gs](http://960.gs/), the grid system this plugin is based on. He's also kind enough to let us pester him with questions from time to time.

data/sass-960gs.gemspec

@@ -0,0 +1,25 @@
+# -*- encoding: utf-8 -*-
+
+Gem::Specification.new do |s|
+  s.name = %q{sass-960gs}
+  s.version = "0.0.1"
+
+  s.required_rubygems_version = Gem::Requirement.new(">= 1.3.5")
+  s.authors = ["Chris Eppstein", "Matt Sanders", "Łukasz Niemier"]
+  s.date = %q{2012-03-19}
+  s.description = %q{The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. http://960.gs/}
+  s.email = %w{chris@eppsteins.net matt@modal.org lukasz@niemier.pl}
+  s.has_rdoc = false
+  s.files = %w{
+    README.md
+    sass-960gs.gemspec
+    stylesheets/960/_grid.scss
+    stylesheets/960/_fixed_grid.scss
+    stylesheets/960/_fluid_grid.scss
+    stylesheets/960/_text.scss
+    stylesheets/960/_variables.scss
+  }
+  s.homepage = %q{https://github.com/Hauleth/sass-960gs}
+  s.rubygems_version = %q{1.3.6}
+  s.summary = %q{Standalone SCSS port of 960.gs.}
+end

data/stylesheets/960/_fixed_grid.scss

@@ -0,0 +1,94 @@
+@import 'variables';
+
+@mixin grid-container {
+  margin-left: auto;
+  margin-right: auto;
+  width: $ninesixty-grid-width; }
+
+@mixin grid-width($n, $cols: $ninesixty-columns, $gutter-width: $ninesixty-gutter-width) {
+  width: $ninesixty-grid-width / $cols * $n - $gutter-width; }
+
+@mixin grid-unit-base($gutter-width: $ninesixty-gutter-width) {
+  display: inline;
+  float: left;
+  margin: {
+    left: $gutter-width / 2;
+    right: $gutter-width / 2; }; }
+
+@mixin grid($n, $cols: $ninesixty-columns, $gutter-width: $ninesixty-gutter-width) {
+  @include grid-unit-base($gutter-width);
+  @include grid-width($n, $cols, $gutter-width); }
+
+@mixin alpha {
+  margin-left: 0; }
+
+@mixin omega {
+  margin-right: 0; }
+
+@mixin grids($cols: $ninesixty-columns, $gutter-width: $ninesixty-gutter-width) {
+  #{enumerate(".grid", 1, $cols, $ninesixty-class-separator)} {
+    @include grid-unit-base($gutter-width); }
+  @for $n from 1 through $cols {
+    .grid#{$ninesixty-class-separator}#{$n} {
+      @include grid-width($n, $cols, $gutter-width); } } }
+
+@mixin grid-prefix($n, $cols: $ninesixty-columns) {
+  padding-left: $ninesixty-grid-width / $cols * $n; }
+
+@mixin grid-prefixes($cols: $ninesixty-columns) {
+  @for $n from 1 through $cols - 1 {
+    .prefix#{$ninesixty-class-separator}#{$n} {
+      @include grid-prefix($n, $cols); } } }
+
+@mixin grid-suffix($n, $cols: $ninesixty-columns) {
+  padding-right: $ninesixty-grid-width / $cols * $n; }
+
+@mixin grid-suffixes($cols: $ninesixty-columns) {
+  @for $n from 1 through $cols - 1 {
+    .suffix#{$ninesixty-class-separator}#{$n} {
+      @include grid-suffix($n, $cols); } } }
+
+@mixin grid-children {
+  .alpha {
+    @include alpha; }
+  .omega {
+    @include omega; } }
+
+@mixin grid-move-base {
+  position: relative; }
+
+@mixin grid-move-push($n, $cols) {
+  left: $ninesixty-grid-width / $cols * $n; }
+
+@mixin grid-move-pull($n, $cols) {
+  left: -($ninesixty-grid-width / $cols) * $n; }
+
+@mixin grid-push($n, $cols: $ninesixty-columns) {
+  @include grid-move-base;
+  @include grid-move-push($n, $cols); }
+
+@mixin grid-pull($n, $cols: $ninesixty-columns) {
+  @include grid-move-base;
+  @include grid-move-pull($n, $cols); }
+
+@mixin grid-movements($cols: $ninesixty-columns) {
+  #{enumerate(".push", 1, $cols - 1, $ninesixty-class-separator)},
+  #{enumerate(".pull", 1, $cols - 1, $ninesixty-class-separator)} {
+    @include grid-move-base; }
+  @for $n from 1 through $cols - 1 {
+    .push#{$ninesixty-class-separator}#{$n} {
+      @include grid-move-push($n, $cols); }
+    .pull#{$ninesixty-class-separator}#{$n} {
+      @include grid-move-pull($n, $cols); } } }
+
+@mixin grid-system($cols: $ninesixty-columns) {
+  @include grid-container;
+  @include grids($cols);
+  @include grid-prefixes($cols);
+  @include grid-suffixes($cols);
+  @include grid-children;
+  @include grid-movements($cols); }
+
+@mixin grid-system-complete($cols: $ninesixty-columns) {
+  .container#{$ninesixty-class-separator}#{$cols} {
+    @include grid-system($cols); } }

data/stylesheets/960/_fluid_grid.scss

@@ -0,0 +1,95 @@
+@import 'variables';
+
+@mixin fluid-grid-container {
+  margin-left: $ninesixty-fluid-grid-margin;
+  margin-right: $ninesixty-fluid-grid-margin;
+  width: $ninesixty-fluid-grid-width;
+  min-width: $ninesixty-fluid-grid-min-width; }
+
+@mixin fluid-grid-width($n, $cols: $ninesixty-columns, $gutter-width: $ninesixty-fluid-gutter-width) {
+  width: 100% / $cols * $n - $gutter-width; }
+
+@mixin fluid-grid-unit-base($gutter-width: $ninesixty-fluid-gutter-width) {
+  display: inline;
+  float: left;
+  margin: {
+    left: $gutter-width / 2;
+    right: $gutter-width / 2; }; }
+
+@mixin fluid-grid($n, $cols: $ninesixty-columns, $gutter-width: $ninesixty-fluid-gutter-width) {
+  @include fluid-grid-unit-base($gutter-width);
+  @include fluid-grid-width($n, $cols, $gutter-width); }
+
+@mixin alpha {
+  margin-left: 0; }
+
+@mixin omega {
+  margin-right: 0; }
+
+@mixin fluid-grids($cols: $ninesixty-columns, $gutter-width: $ninesixty-fluid-gutter-width) {
+  #{enumerate(".fluid_grid", 1, $cols, $ninesixty-class-separator)} {
+    @include fluid-grid-unit-base($gutter-width); }
+  @for $n from 1 through $cols {
+    .fluid-grid#{$ninesixty-class-separator}#{$n} {
+      @include fluid-grid-width($n, $cols, $gutter-width); } } }
+
+@mixin fluid-grid-prefix($n, $cols: $ninesixty-columns) {
+  padding-left: $ninesixty-fluid-grid-width / $cols * $n; }
+
+@mixin fluid-grid-prefixes($cols: $ninesixty-columns) {
+  @for $n from 1 through $cols - 1 {
+    .prefix#{$ninesixty-class-separator}#{$n} {
+      @include fluid-grid-prefix($n, $cols); } } }
+
+@mixin fluid-grid-suffix($n, $cols: $ninesixty-columns) {
+  padding-right: $ninesixty-fluid-grid-width / $cols * $n; }
+
+@mixin fluid-grid-suffixes($cols: $ninesixty-columns) {
+  @for $n from 1 through $cols - 1 {
+    .suffix#{$ninesixty-class-separator}#{$n} {
+      @include fluid-grid-suffix($n, $cols); } } }
+
+@mixin fluid-grid-children {
+  .alpha {
+    @include alpha; }
+  .omega {
+    @include omega; } }
+
+@mixin fluid-grid-move-base {
+  position: relative; }
+
+@mixin fluid-grid-move-push($n, $cols) {
+  left: $ninesixty-fluid-grid-width / $cols * $n; }
+
+@mixin fluid-grid-move-pull($n, $cols) {
+  left: -($ninesixty-fluid-grid-width / $cols) * $n; }
+
+@mixin fluid-grid-push($n, $cols: $ninesixty-columns) {
+  @include fluid-grid-move-base;
+  @include fluid-grid-move-push($n, $cols); }
+
+@mixin fluid-grid-pull($n, $cols: $ninesixty-columns) {
+  @include fluid-grid-move-base;
+  @include fluid-grid-move-pull($n, $cols); }
+
+@mixin fluid-grid-movements($cols: $ninesixty-columns) {
+  #{enumerate(".push", 1, $cols - 1, $ninesixty-class-separator)},
+  #{enumerate(".pull", 1, $cols - 1, $ninesixty-class-separator)} {
+    @include fluid-grid-move-base; }
+  @for $n from 1 through $cols - 1 {
+    .push#{$ninesixty-class-separator}#{$n} {
+      @include fluid-grid-move-push($n, $cols); }
+    .pull#{$ninesixty-class-separator}#{$n} {
+      @include fluid-grid-move-pull($n, $cols); } } }
+
+@mixin fluid-grid-system($cols: $ninesixty-columns) {
+  @include fluid-grid-container;
+  @include fluid-grids($cols);
+  @include fluid-grid-prefixes($cols);
+  @include fluid-grid-suffixes($cols);
+  @include fluid-grid-children;
+  @include fluid-grid-movements($cols); }
+
+@mixin fluid-grid-system-complete($cols: $ninesixty-columns) {
+  .fluid_container#{$ninesixty-class-separator}#{$cols} {
+    @include fluid-grid-system($cols); } }

data/stylesheets/960/_grid.scss

@@ -0,0 +1,2 @@
+@include 'fixed_grid';
+@include 'fluid_grid';

data/stylesheets/960/_text.scss

@@ -0,0 +1,47 @@
+@include 'variables';
+
+@mixin text($font-family: $ninesixty-font-family, $font-size: $ninesixty-font-size) {
+  body {
+    font: $font-size $font-family; }
+  a:focus {
+    outline: 1px dotted invert; }
+  hr {
+    border-color: #cccccc;
+    border-style: solid;
+    border-width: 1px 0 0;
+    clear: both;
+    height: 0; }
+  h1 {
+    font-size: 1.667px; }
+  h2 {
+    font-size: 1.533px; }
+  h3 {
+    font-size: 1.4em; }
+  h4 {
+    font-size: 1.267em; }
+  h5 {
+    font-size: 1.133em; }
+  h6 {
+    font-size: 1em; }
+  ol {
+    list-style: decimal; }
+  ul {
+    list-style: square; }
+  li {
+    margin-left: 30px; }
+  p,
+  dl,
+  hr,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  ol,
+  ul,
+  pre,
+  table,
+  address,
+  fieldset {
+    margin-bottom: 20px; } }

data/stylesheets/960/_variables.scss

@@ -0,0 +1,15 @@
+// Global use variables
+$ninesixty-class-separator: "_" !default;
+$ninesixty-columns: 12 !default;
+$ninesixty-font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif !default;
+$ninesixty-font-size: 10pt/1.5 !default;
+
+// Fixed grid variables
+$ninesixty-grid-width: 960px !default;
+$ninesixty-gutter-width: 20px !default;
+
+// Fluid grid variables
+$ninesixty-fluid-grid-margin: (100% - $ninesixty-fluid-grid-width)/2 !default;
+$ninesixty-fluid-grid-min-width: 960px !default;
+$ninesixty-fluid-grid-width: 92% !default;
+$ninesixty-fluid-gutter-margin: 2% !default;

metadata

@@ -0,0 +1,58 @@
+--- !ruby/object:Gem::Specification
+name: sass-960gs
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+  prerelease: 
+platform: ruby
+authors:
+- Chris Eppstein
+- Matt Sanders
+- Łukasz Niemier
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-03-19 00:00:00.000000000Z
+dependencies: []
+description: The 960 Grid System is an effort to streamline web development workflow
+  by providing commonly used dimensions, based on a width of 960 pixels. http://960.gs/
+email:
+- chris@eppsteins.net
+- matt@modal.org
+- lukasz@niemier.pl
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- sass-960gs.gemspec
+- stylesheets/960/_grid.scss
+- stylesheets/960/_fixed_grid.scss
+- stylesheets/960/_fluid_grid.scss
+- stylesheets/960/_text.scss
+- stylesheets/960/_variables.scss
+homepage: https://github.com/Hauleth/sass-960gs
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: 1.3.5
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.18
+signing_key: 
+specification_version: 3
+summary: Standalone SCSS port of 960.gs.
+test_files: []
+has_rdoc: false