diff --git a/.gitignore b/.gitignore index 371e8b0..d103eb4 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,5 @@ /test/.sass-cache /test/css/test.css /test/css/example.css -/compass-grid-0.0.1.gem \ No newline at end of file +/compass-grid-0.0.1.gem +/compass-grid-plugin-0.0.1.gem \ No newline at end of file diff --git a/README.md b/README.md index 0d1b6ea..5d963c7 100644 --- a/README.md +++ b/README.md @@ -6,9 +6,38 @@ Simple grid system based on [the 1KB CSS Grid](http://1kbgrid.com/) designed to The next better best thing would be fully responsive media query support, but there's [some limitations in Sass as a language](https://github.com/nex3/sass/issues/116#issuecomment-5166163) that make that difficult to do in a Compass plugin. +## Installation +###Install the Ruby Gem. +``` +gem install compass-grid-plugin +``` + +### Use a Gemfile + + +### Existing Compass Projects +You can include it in any existing Compass project by including the grid in your config.rb file. + +```ruby +# Require any additional compass plugins here. +require 'compass-grid' +``` + +### New Compass Projects +You can install the grid plugin as part of a new Compass project + +``` +compass create ./my_project -r compass-grid -u compass-grid +``` + ## Fixed Grid Usage The primary grid is a fixed, pixel grid. This grid is ideal for designs that do not require responsive design. +```scss +// import the grid +@import "grid"; +``` + ### Variables - **$grid-column-width**: *60px* - The width of 1 column - **$grid-gutter-width**: *20px* - The space between 2 columns @@ -32,6 +61,11 @@ The primary grid is a fixed, pixel grid. This grid is ideal for designs that do ## Fluid Grid Usage This is a fluid version of the grid that uses percentages for widths. This grid is ideal for responsive designs that need to scale depending on the device. The fluid grid is more complex because percentage widths depend on their context for meaning. Every function and mixin is similar to the fixed grid but there are two additional variables to provide context. +```scss +// import the fluid grid +@import "grid/fluid"; +``` + ### Variables The fluid grid uses the variable from the fixed grid module diff --git a/templates/project/manifest.rb b/templates/project/manifest.rb index 72cb236..66c4d86 100644 --- a/templates/project/manifest.rb +++ b/templates/project/manifest.rb @@ -1,8 +1,8 @@ -stylesheet 'screen.scss', :media => "screen, projection" -stylesheet '_base.scss' - description "Sass Grid based on the 1KB CSS Grid" +stylesheet 'screen.scss', :media => "screen, projection" +stylesheet 'partials/_base.scss' + help %Q{ Please see the website for all documentation and tutorials: diff --git a/templates/project/_base.scss b/templates/project/partials/_base.scss similarity index 100% rename from templates/project/_base.scss rename to templates/project/partials/_base.scss