compass-lucid-grid 0.1.0

data/README.md

@@ -0,0 +1 @@
+#Yay!

data/lib/lucid.rb

@@ -0,0 +1,3 @@
+require 'compass'
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('lucid', :path => extension_path)

data/stylesheets/_lucid.scss

@@ -0,0 +1,32 @@
+//============================================================================//
+//
+// THE LUCID GRID | SETUP
+// plugin by Yifei Zhang [http://yifei.co]
+// 
+//============================================================================//
+
+// Grid configuration 
+$grid-width: 960px !default;
+$grid-columns: 12 !default;
+$grid-gutter: 15px !default;
+$grid-outer-gutter: 30px !default;
+
+// @extend hook class names
+$grid-hook-container: ".lucid-grid" !default;
+$grid-hook-row: ".lucid-row" !default;
+$grid-hook-column: ".lucid-column" !default;
+$grid-hook-gutterless: ".lucid-gutterless" !default;
+
+// Use "pie-clearfix" clearfix or "overflow" clearfix?
+$grid-clearfix: "pie-clearfix" !default;
+
+// Center rows by default?
+$grid-centering: true !default;
+
+//
+// Imports
+//
+
+@import 'lucid/internal';
+@import 'lucid/public';
+

data/stylesheets/lucid/_internal.scss

@@ -0,0 +1,62 @@
+//============================================================================//
+//
+// THE LUCID GRID | INTERNAL MIXINS
+// plugin by Yifei Zhang [http://yifei.co]
+// 
+//============================================================================//
+
+// Calculate the base grid "unit"
+$grid-inner-width: $grid-width - (2 * ($grid-outer-gutter - $grid-gutter));
+$gu: $grid-inner-width / $grid-columns;
+
+// Grid Container
+// Applies the grid width and centering
+@mixin _grid-container($width: $grid-width, $centered: $grid-centering);
+  @if $centered == true {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  width: $width;
+}
+
+// Grid Rows
+// Centered to create outer gutter appearance
+// Applies clearfix (to contain floats)
+@mixin _grid-row($clearfix) {
+  margin-left: auto;
+  margin-right: auto;
+
+  @if $clearfix == overflow {
+    @include clearfix;
+  } @else {
+    @include pie-clearfix;
+  }
+}
+
+// Styles shared by all grid elements
+// Optionally include gutter
+@mixin _grid-element($gutter) {
+  display: inline;
+  float: left;
+
+  @if $gutter > 0 {
+    margin-left: $grid-gutter;
+    margin-right: $grid-gutter;
+  }
+}
+
+// Individual styles for each grid element
+@mixin _grid-element-style($columns, $offset, $gutter, $adjustment) {
+
+  // Shift element left or right with +/- $offset
+  @if $offset > 0 {
+    margin-left: ($offset * $gu) + $gutter;
+  } @else if $offset < 0 {
+    margin-left: ($offset * $gu) - $gutter;
+  }
+
+  // Adjust element width 
+  width: ($columns * $gu) - $adjustment - ($gutter * 2);
+}
+

data/stylesheets/lucid/_public.scss

@@ -0,0 +1,67 @@
+//============================================================================//
+//
+// THE LUCID GRID | PUBLIC MIXINS
+// plugin by Yifei Zhang [http://yifei.co]
+// 
+//============================================================================//
+
+// Generate @extend hooks
+@mixin grid-hooks {
+  #{$grid-hook-container} { @include _grid-container; }
+  #{$grid-hook-row} { @include _grid-row($grid-clearfix); }
+  #{$grid-hook-column} { @include _grid-element($grid-gutter); }
+  #{$grid-hook-gutterless} { @include _grid-element(0); }
+}
+
+//
+// Grid Mixins
+//
+
+// Container
+@mixin grid {
+  @extend #{$grid-hook-container};
+}
+
+// Row
+@mixin row {
+  @extend #{$grid-hook-row};
+}
+
+// Element (with gutters)
+@mixin col($columns, $offset: 0, $width-adjustment: 0) {
+  @extend #{$grid-hook-column};
+  @include _grid-element-style($columns, $offset, $grid-gutter, $width-adjustment);
+}
+
+// Element (without gutters)
+@mixin col-gutterless($columns, $offset: 0, $width-adjustment: 0) {
+  @extend #{$grid-hook-gutterless};
+  @include _grid-element-style($columns, $offset, 0, $width-adjustment);
+}
+
+//
+// Experimental Media Query Adjustments
+//
+
+@mixin grid-adjustment($columns) {
+  $width: $columns * $gu;
+
+  #{$grid-hook-container} { @include _grid-container($width, false); }
+}
+
+//
+// Generate Non-semantic Classes
+//
+
+@mixin grid-classes($gutterless: false, $prefix: 'g', $gutterless-prefix: 'gl') {
+  @for $i from 1 through $grid-columns {
+    .#{$prefix}#{$i} { @include col($i); }
+  }
+
+  @if $gutterless != false {
+    @for $i from 1 through $grid-columns {
+      .#{$gutterless-prefix}#{$i} { @include col-gutterless($i); }
+    }
+  }
+}
+

data/templates/project/_grid.scss

@@ -0,0 +1,52 @@
+//============================================================================//
+// 
+// THE LUCID GRID | QUICKSTART
+// plugin by Yifei Zhang [http://yifei.co]
+//
+// @import this into your project or paste into your base/bootstrap file 
+//
+//============================================================================//
+
+//
+// Configuration and Initialization
+//
+// Already have Compass @imported? Go ahead and remove `clearfix`.
+//
+// Configuration $variables should be defined before Lucid is @imported. 
+// View the full list of options and defaults at [http://yifei.co/lucid]
+//
+
+@import "compass/utilities/general/clearfix";
+@import 'lucid';
+
+//
+// @Extend Hooks (Required)
+//
+// Lucid uses SASS's @extend (internally!) in order to produce leaner compiled 
+// stylesheets*. The `grid-hooks` mixin generates four base classes that are 
+// reused by Lucid's other mixins through @extend.
+//
+// * @include misused leads to fat, repetative stylesheets. Lucid knows better.
+//
+
+@include grid-hooks;
+
+//============================================================================//
+//
+// BASIC USAGE
+// For the full docs, visit [http://yifei.co/lucid]
+//
+// @include grid;                   // setup a new grid container
+// @include row;                    // setup a new grid row 
+//
+// @include col(3);                 // grid element that spans 3 columns
+// @include col(3, 2);              // shifted 2 columns to right
+// @include col(3, 2, 20px);        // subtract 20px from `width` to adjust for borders/padding
+// @include col-gutterless(5, 2);   // "gutterless" element, identical usage to `col()`
+//
+// @include grid-classes;           // generate .g* classes to use in markup
+// @include grid-classes(true);     // generate .g* and .gl* (gutterless) classes
+//
+// @include grid-adjustment($n);    // reduce container to $n columns (width)
+//
+//============================================================================//

data/templates/project/manifest.rb

@@ -0,0 +1,49 @@
+description "A Compass/SASS grid for people who love semantics."
+
+discover :all
+
+help %Q{
+THE LUCID GRID | HELP
+
+SETUP
+
+  @import 'lucid'
+  @include grid-hooks;             // generate @extend hooks 
+
+
+BASIC USAGE
+
+  @include grid;                   // setup a new grid container
+  @include row;                    // setup a new grid row 
+
+  @include col(3);                 // grid element that spans 3 columns
+  @include col(3, 2);              // shifted 2 columns to right
+  @include col(3, 2, 20px);        // subtract 20px from `width` to adjust for borders/padding
+  @include col-gutterless(5, 2);   // "gutterless" element, identical usage to `col()`
+
+  @include grid-classes;           // generate .g* classes to use in markup
+  @include grid-classes(true);     // generate .g* and .gl* (gutterless) classes
+
+  @include grid-adjustment($n);    // reduce container to $n columns (width)
+
+***
+
+For the full docs, visit [http://yifei.co/lucid]
+To view the source, visit [https://github.com/ezYZ/lucid]
+
+}
+
+welcome_message %Q{
+THE LUCID GRID
+plugin by Yifei Zhang
+
+Congrats! Your project templating life is about to become a lot saner.
+
+For examples and documentation, visit:
+http://yifei.co/lucid
+
+Contribute on GitHub: 
+https://github.com/ezYZ/lucid
+
+***
+}

metadata

@@ -0,0 +1,62 @@
+--- !ruby/object:Gem::Specification
+name: compass-lucid-grid
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+  prerelease: 
+platform: ruby
+authors:
+- Yifei Zhang
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2011-05-21 00:00:00.000000000Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: &85923390 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.11'
+  type: :runtime
+  prerelease: false
+  version_requirements: *85923390
+description: A Compass/SASS grid for people who love semantics.
+email: yz@yifei.co
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- lib/lucid.rb
+- stylesheets/lucid/_internal.scss
+- stylesheets/lucid/_public.scss
+- stylesheets/_lucid.scss
+- templates/project/manifest.rb
+- templates/project/_grid.scss
+homepage: http://yifei.co/lucid/
+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: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.3
+signing_key: 
+specification_version: 3
+summary: A Compass/SASS grid for people who love semantics.
+test_files: []