compass-scalablegs-plugin 0.0.1

data/README.md

@@ -0,0 +1,92 @@
+# Scalable Grid System - Compass Plugin
+
+
+Scalable.gs is a cross screen size and device CSS framework. Check out the [Scalable.gs](http://scalable.gs/) website for more information and use cases.
+
+* This plugin is consistent with latest version of scalable.gs as of 4/5/2011
+
+____
+
+This plugin adds the Scalable Grid System framework to [Compass](http://compass-style.org/).
+
+The plugin is build upon the great work done by [Christopher M. Eppstein and Matt Sanders with the 960 Grid System framework compass plugin](https://github.com/chriseppstein/compass-960-plugin). The framework follows some of the name convention from the [960.gs by Nathan Smith](http://960.gs).
+
+#Install
+
+
+    gem install compass-scalablegs-plugin
+
+##Create a 960-based Compass Project
+
+
+    compass create -r scalablegs my_project --using scalablegs
+
+Or, If you prefer to use Sass's indentation based syntax:
+
+    compass create -r scalablegs my_project --using scalablegs --syntax sass
+
+Then edit your `scalablegs.sass` accordingly.
+
+# Customising your Grid System
+
+
+This plugin uses the following configuration variables:
+
+* `$scalablegs-columns` (default: 20) controls the default number of grid columns
+* `$scalablegs-grid-min-width` (default: 26em - with the assumption of a 12px body font size) controls the default minimum site width
+* `$scalablegs-grid-max-width` (default: 82em - with the assumption of a 12px body font size) controls the default maximum site width
+* `$scalablegs-gutter-width` (default: 2%) controls the default gutter width
+
+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 Scalable.gs framework
+use the `+grid-system` mixin to generate the corresponding classes. You can
+also customize the number of columns as demonstrated in the following example.
+
+Example:
+
+    #wrap
+      +grid-system(24)
+
+# Making Semantic Grids
+
+
+To create a grid system using only CSS, use the following semantic grid mixins:
+
+* Use the `+grid-container` mixin to declare your container element.
+* Use the `+grid(N, columns, gutter-width)` mixin to declare a grid element.
+* Use the `+first` and `+last` mixins to declare the first and last grid elements for a row.
+* Use the `+grid-prefix(N, columns)` and `+grid-suffix(N, columns)` mixins to add empty grid columns before or after a grid element.
+* Use the `+grid-push(N, columns)` and `+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:
+
+    $scalablegs-columns: 24
+
+    #wrap
+      +grid-container
+      #left-nav
+        +alpha
+        +grid(5)
+      #main-content
+        +grid-prefix(1)
+        +grid(10)
+        +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.
+
+[Matt Sanders](https://github.com/mattsa) is probably the best go to person if you want more information about the original compass-960-plugin.
+
+[Kenneth Nordahl](https://github.com/kdn) forked and then converted the original plugin over to the [Scalable Grid System](http://scalable.gs).
+
+[Other contributors](https://github.com/KDN/compass-scalablegs-plugin/contributors) have worked on original fork of this plugin.

data/compass-scalablegs-plugin.gemspec

@@ -0,0 +1,27 @@
+# -*- encoding: utf-8 -*-
+
+Gem::Specification.new do |s|
+  s.name = %q{compass-scalablegs-plugin}
+  s.version = "0.0.1"
+
+  s.required_rubygems_version = Gem::Requirement.new(">= 1.3.5")
+  s.authors = ["Chris Eppstein", "Matt Sanders", "Kenneth Nordahl"]
+  s.date = %q{2011-04-05}
+  s.description = %q{The Scalable Grid System or scalable.gs for short, is a device independent and cross screen size CSS framework.}
+  s.email = %w{kenneth@nordahl.me}
+  s.has_rdoc = false
+  s.files = [
+    "compass-scalablegs-plugin.gemspec",
+    "README.md",
+    "lib/scalablegs.rb",
+    "stylesheets/scalablegs/_grid.sass",
+    "templates/project/scalablegs.sass",
+    "templates/project/manifest.rb"
+  ]
+  s.homepage = %q{http://github.com/KDN/compass-scalablegs-plugin}
+  s.require_paths = ["lib"]
+  s.rubyforge_project = %q{compass-scalablegs-plugin}
+  s.rubygems_version = %q{1.3.6}
+  s.summary = %q{Compass compatible Sass port of scalable.gs.}
+  s.add_dependency(%q<compass>, [">= 0.10.0"])
+end

data/lib/scalablegs.rb

@@ -0,0 +1,2 @@
+require 'compass'
+Compass::Frameworks.register("scalablegs", :path => "#{File.dirname(__FILE__)}/..")

data/stylesheets/scalablegs/_grid.sass

@@ -0,0 +1,102 @@
+# Config defaults
+$scalablegs-gutter-width: 2\% !default
+
+$scalablegs-grid-min-width: 26em !default
+
+$scalablegs-grid-max-width: 82em !default
+
+$scalablegs-grid-width: 100% !default
+
+$scalablegs-columns: 20 !default
+
+
+=grid-container
+  margin-left: auto
+  margin-right: auto
+  min-width: $scalablegs-grid-min-width
+  max-width: $scalablegs-grid-max-width
+  position: relative
+
+=grid-width($n, $cols: $scalablegs-columns, $gutter-width: $scalablegs-gutter-width)
+  width: $scalablegs-grid-width / $cols * $n - $gutter-width
+
+=grid-unit-base($gutter-width: $scalablegs-gutter-width)
+  display: inline
+  float: left
+  margin:
+    left: $gutter-width / 2
+    right: $gutter-width / 2
+
+=grid($n, $cols: $scalablegs-columns, $gutter-width: $scalablegs-gutter-width)
+  +grid-unit-base($gutter-width)
+  +grid-width($n, $cols, $gutter-width)
+
+=grid-first
+  margin-left: 0
+
+=grid-last
+  margin-right: 0
+
+=grids($cols: $scalablegs-columns, $gutter-width: $scalablegs-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: $scalablegs-columns)
+  padding-left: $scalablegs-grid-width / $cols * $n
+
+=grid-prefixes($cols: $scalablegs-columns)
+  @for $n from 1 through $cols - 1
+    .prefix_#{$n}
+      +grid-prefix($n, $cols)
+
+=grid-suffix($n, $cols: $scalablegs-columns)
+  padding-right: $scalablegs-grid-width / $cols * $n
+
+=grid-suffixes($cols: $scalablegs-columns)
+  @for $n from 1 through $cols - 1
+    .suffix_#{$n}
+      +grid-suffix($n, $cols)
+
+=grid-children
+  .first
+    +first
+  .last
+    +last
+
+=grid-move-base
+  position: relative
+
+=grid-move-push($n, $cols)
+  left: ($scalablegs-grid-width / $cols) * $n
+
+=grid-move-pull($n, $cols)
+  left: -($scalablegs-grid-width / $cols) * $n
+
+=grid-push($n, $cols: $scalablegs-columns)
+  +grid-move-base
+  +grid-move-push($n, $cols)
+
+=grid-pull($n, $cols: $scalablegs-columns)
+  +grid-move-base
+  +grid-move-pull($n, $cols)
+
+=grid-movements($cols: $scalablegs-columns)
+  #{enumerate(".push", 1, $cols, "_")},
+  #{enumerate(".pull", 1, $cols, "_")}
+    +grid-move-base
+  @for $n from 1 through $cols
+    .push_#{$n}
+      +grid-move-push($n, $cols)
+    .pull_#{$n}
+      +grid-move-pull($n, $cols)
+
+=grid-system($cols: $scalablegs-columns)
+  +grid-container
+  +grids($cols)
+  +grid-prefixes($cols)
+  +grid-suffixes($cols)
+  +grid-children
+  +grid-movements($cols)

data/templates/project/manifest.rb

@@ -0,0 +1,16 @@
+stylesheet 'scalablegs.sass', :media => "screen, projection"
+
+description "Scalable Grid System for cross device and screen size web development."
+
+help %Q{
+Please see the Scalable.gs website for documentation:
+
+    http://scalable.gs/
+}
+
+welcome_message %Q{
+Please see the Scalable.gs website for documentation:
+
+    http://scalable.gs/
+}
+

data/templates/project/scalablegs.sass

@@ -0,0 +1,30 @@
+/* Scalable Grid System ~ Core CSS.
+ * Learn more ~ http://scalable.gs/
+ * *
+ * Licensed under GPL and MIT.
+
+
+@import scalablegs/grid
+
+// The following generates the default grids provided by the css version of 960.gs
+.scalablegs
+  +grid-system(20)
+
+
+// But most compass users prefer to construct semantic layouts like so (two column layout with header and footer):
+
+$scalablegs-columns: 20
+
+.two-column
+  +grid-scalable
+  #header,
+  #footer,
+  #sidebar,
+  #main-content
+    +grid-unit-base
+  #header, #footer
+    +grid-width(20)
+  #sidebar
+    +grid-width(6)
+  #main-content
+    +grid-width(14)

metadata

@@ -0,0 +1,72 @@
+--- !ruby/object:Gem::Specification 
+name: compass-scalablegs-plugin
+version: !ruby/object:Gem::Version 
+  prerelease: 
+  version: 0.0.1
+platform: ruby
+authors: 
+- Chris Eppstein
+- Matt Sanders
+- Kenneth Nordahl
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2011-04-05 00:00:00 Z
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        version: 0.10.0
+  type: :runtime
+  version_requirements: *id001
+description: The Scalable Grid System or scalable.gs for short, is a device independent and cross screen size CSS framework.
+email: 
+- kenneth@nordahl.me
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- compass-scalablegs-plugin.gemspec
+- README.md
+- lib/scalablegs.rb
+- stylesheets/scalablegs/_grid.sass
+- templates/project/scalablegs.sass
+- templates/project/manifest.rb
+homepage: http://github.com/KDN/compass-scalablegs-plugin
+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: compass-scalablegs-plugin
+rubygems_version: 1.7.1
+signing_key: 
+specification_version: 3
+summary: Compass compatible Sass port of scalable.gs.
+test_files: []
+