Permalink
Browse files

Recover the repository that used to reside at chriseppstein/compass-9…

…60-plugin
  • Loading branch information...
0 parents commit 74f79c17fcb067cd4578016a2f8172a78c14a5c0 @timriley committed Feb 20, 2012
@@ -0,0 +1,2 @@
+*.css
+pkg/
@@ -0,0 +1,59 @@
+960 Grid System - Compass Plugin
+================================
+
+* Port of Version 1.0
+* 2008-03-24
+
+Created by Nathan Smith. See the official site for more info: <http://960.gs/>
+
+---------
+
+This plugin adds the 960 Grid System framework to [Compass](http://compass-style.org/).
+
+Install
+=======
+
+ gem install compass-960-plugin
+
+Create a 960-based Compass Project
+==================================
+
+ compass create -r ninesixty my_project --using 960
+
+Or, If you prefer to use Sass's indentation based syntax:
+
+ compass create -r ninesixty my_project --using 960 --syntax sass
+
+Then edit your `grid.sass` and `text.sass` files accordingly. A reset is added into grid.sass automatically.
+
+Customizing your Grid System
+============================
+
+To create a grid system with other number of columns use the `+grid-system` mixin to generate
+the corresponding classes.
+
+Example:
+
+ #wrap
+ +grid-system(24)
+
+Making Semantic Grids
+=====================
+
+* Use the `+grid-container` mixin to declare your container element.
+* Use the `+grid` mixin to declare a grid element.
+* Use the `+alpha` and `+omega` mixins to declare the first and last grid elements for a row.
+* User the `+grid-prefix` and `+grid-suffix` mixins to add grid columns before or after a grid element.
+
+Example:
+
+ #wrap
+ +grid-container
+ #left-nav
+ +alpha
+ +grid(5,16)
+ #main-content
+ +grid-prefix(1,16)
+ +grid(10, 16)
+ +omega
+
@@ -0,0 +1,29 @@
+# -*- encoding: utf-8 -*-
+
+Gem::Specification.new do |s|
+ s.name = %q{compass-960-plugin}
+ s.version = "0.10.0.beta.0"
+
+ s.required_rubygems_version = Gem::Requirement.new(">= 1.3.5")
+ s.authors = ["Chris Eppstein"]
+ s.date = %q{2010-06-07}
+ 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 = %q{chris@eppsteins.net}
+ s.has_rdoc = false
+ s.files = [
+ "compass-960-plugin.gemspec",
+ "README.mkdn",
+ "lib/ninesixty.rb",
+ "stylesheets/960/_grid.sass",
+ "stylesheets/960/_text.sass",
+ "templates/project/grid.sass",
+ "templates/project/manifest.rb",
+ "templates/project/text.sass"
+ ]
+ s.homepage = %q{http://github.com/chriseppstein/compass-960-plugin}
+ s.require_paths = ["lib"]
+ s.rubyforge_project = %q{compass-960-plugin}
+ s.rubygems_version = %q{1.3.6}
+ s.summary = %q{Compass compatible Sass port of 960.gs.}
+ s.add_dependency(%q<compass>, [">= 0.10.0"])
+end
@@ -0,0 +1,2 @@
+require 'compass'
+Compass::Frameworks.register("960", :path => "#{File.dirname(__FILE__)}/..")
@@ -0,0 +1,86 @@
+$ninesixty-gutter-width: 20px !default
+
+$ninesixty-grid-width: 960px !default
+
+$ninesixty-columns: 12 !default
+
+=grid-container
+ margin-left: auto
+ margin-right: auto
+ width: $ninesixty-grid-width
+
+=grid-width($n, $cols: $ninesixty-columns, $gutter-width: $ninesixty-gutter-width)
+ width: $ninesixty-grid-width / $cols * $n - $gutter-width
+
+=grid-unit-base($gutter-width: $ninesixty-gutter-width)
+ display: inline
+ float: left
+ margin:
+ left: $gutter-width / 2
+ right: $gutter-width / 2
+
+=grid($n, $cols: $ninesixty-columns, $gutter-width: $ninesixty-gutter-width)
+ +grid-unit-base($gutter-width)
+ +grid-width($n, $cols, $gutter-width)
+
+=alpha
+ margin-left: 0
+
+=omega
+ margin-right: 0
+
+=grids($cols: $ninesixty-columns, $gutter-width: $ninesixty-gutter-width)
+ #{enumerate(".grid", 1, $cols, "_")}
+ +grid-unit-base
+ @for $n from 1 through $cols
+ .grid_#{$n}
+ +grid-width($n, $cols, $gutter-width)
+
+=grid-prefix($n, $cols: $ninesixty-columns)
+ padding-left: $ninesixty-grid-width / $cols * $n
+
+=grid-prefixes($cols: $ninesixty-columns)
+ @for $n from 1 through $cols - 1
+ .prefix_#{$n}
+ +grid-prefix($n, $cols)
+
+=grid-suffix($n, $cols: $ninesixty-columns)
+ padding-right: $ninesixty-grid-width / $cols * $n
+
+=grid-suffixes($cols: $ninesixty-columns)
+ @for $n from 1 through $cols - 1
+ .suffix_#{$n}
+ +grid-suffix($n, $cols)
+
+=grid-children
+ .alpha
+ +alpha
+ .omega
+ +omega
+
+=grid-move-base
+ position: relative
+
+=grid-push($n, $cols)
+ left: ($ninesixty-grid-width / $cols) * $n
+
+=grid-pull($n, $cols)
+ left: -($ninesixty-grid-width / $cols) * $n
+
+=grid-movements($cols: $ninesixty-columns)
+ #{enumerate(".push", 1, $cols, "_")},
+ #{enumerate(".pull", 1, $cols, "_")}
+ +grid-move-base
+ @for $n from 1 through $cols
+ .push_#{$n}
+ +grid-push($n, $cols)
+ .pull_#{$n}
+ +grid-pull($n, $cols)
+
+=grid-system($cols: $ninesixty-columns)
+ +grid-container
+ +grids($cols)
+ +grid-prefixes($cols)
+ +grid-suffixes($cols)
+ +grid-children
+ +grid-movements($cols)
@@ -0,0 +1,47 @@
+$ninesixty-font-family: unquote("Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif") !default
+
+=text($font-family: $ninesixty-font-family)
+ body
+ font: unquote("13px/1.5") $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: 25px
+ h2
+ font-size: 23px
+ h3
+ font-size: 21px
+ h4
+ font-size: 19px
+ h5
+ font-size: 17px
+ h6
+ font-size: 15px
+ 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
@@ -0,0 +1,32 @@
+/* 960 Grid System ~ Core CSS.
+ * Learn more ~ http://960.gs/
+ * *
+ * Licensed under GPL and MIT.
+
+@import compass/reset
+@import 960/grid
+
+// The following generates the default grids provided by the css version of 960.gs
+.container_12
+ +grid-system(12)
+
+.container_16
+ +grid-system(16)
+
+// But most compass users prefer to construct semantic layouts like so (two column layout with header and footer):
+
+$ninesixty-columns: 24
+
+.two-column
+ +grid-container
+ #header,
+ #footer,
+ #sidebar,
+ #main-content
+ +grid-unit-base
+ #header, #footer
+ +grid-width(24)
+ #sidebar
+ +grid-width(8)
+ #main-content
+ +grid-width(16)
@@ -0,0 +1,17 @@
+stylesheet 'grid.sass', :media => "screen, projection"
+stylesheet 'text.sass', :media => "screen, projection"
+
+description "The 960 Grid System."
+
+help %Q{
+Please see the 960 website for documentation:
+
+ http://960.gs/
+}
+
+welcome_message %Q{
+Please see the 960 website for documentation:
+
+ http://960.gs/
+}
+
@@ -0,0 +1,8 @@
+/* 960 Grid System ~ Text CSS.
+ * Learn more ~ http://960.gs/
+ * *
+ * Licensed under GPL and MIT.
+
+@import 960/text
+
++text

0 comments on commit 74f79c1

Please sign in to comment.