gridstrap 0.1.0

data/README.md

@@ -0,0 +1,63 @@
+Compass Gridstrap
+=================
+
+Gridstrap is a Bootstrap inspired grid system, for both responsive and
+non-responsive designs.
+
+
+Installation
+============
+
+From the command line:
+
+    (sudo) gem install gridstrap
+
+Add to a project:
+
+    // rails: compass.config, other: config.rb
+    require "gridstrap"
+
+    // command line
+    compass install gridstrap
+
+Or create a new project:
+
+    compass -r gridstrap -f gridstrap project_directory
+
+
+Setup/Usage
+===========
+
+The grid is setup via the `gridstrap` mixin:
+
+	@include gridstrap();
+
+You can use the responsive version by specifying a responsive mode:
+
+	@include gridstrap(up);
+
+This implements the mobile-first version of the grid. The different
+modes are listed below:
+
+* `"up"`: Mobile first, with the "plain" columns being overridden going up
+  through tablet, desktop and widescreen.
+* `"down"`: Desktop first, with the "plain" columns being overridden going
+  up for widescreen, and down for tablet/mobile.
+* `"exact"`: Isolated, the column rules don"t bubble up, and are localized
+  to their respective breakpoints.
+* `"none"`: No responsive, just a simple grid. You will have to specify the
+  size for the .container when using this.
+
+Gridstrap comes with a few additional classes:
+
+* `.span-`: A centered column of a particular column size.
+* `.of-`: A centered column of 1/Xth the container width.
+* `.offset-`: Offset the column by X columns via margin.
+* `.push/pull-`: Move the column over by X columns via left/right.
+
+You can toggle these options by setting the $gridstrap-use-? booleans, or
+with the `gridstrap-use` mixin:
+
+	@include gridstrap-use(span, offset);
+
+Pass a list containing the addons you want to use: span/of/offset/move.

data/lib/gridstrap.rb

@@ -0,0 +1,9 @@
+require 'compass'
+
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('gridstrap', :path => extension_path)
+
+module Gridstrap
+  VERSION = "0.1.0"
+  DATE = "2014-01-27"
+end

data/stylesheets/_gridstrap.scss

@@ -0,0 +1,6 @@
+// Requires the HandySASS responsive mixins
+@import "handysass/mixins/responsive";
+
+@import "inc/vars";
+@import "inc/mixins";
+@import "inc/build";

data/stylesheets/inc/_build.scss

@@ -0,0 +1,51 @@
+// Load the mixins for each mode
+@import "build/none";
+@import "build/up";
+@import "build/down";
+@import "build/exact";
+
+// The Main Mixin, sets up and builds the grid system
+//
+// The $responsive mode can be "up", "down", "exact" or "off"
+// "none": No breakpoints added for columns; plain columns
+//  	are the only columns available.
+// "up": The plain columns are the baseline, with sm/md/lg
+//  	overwriting as the min-width increases
+// "down": The plain columns are the medium screen ones,
+//  	with xs/sm/lg overwriting at min/max-width points
+// "exact": No plain columns, and each set applies strictly
+//  	to their breakpoin, with no bleed over.
+//
+// Non-zero values for $cols and $gutter will change and
+// overwrite $gridstrap-cols and $gridstrap-gutter(-half)
+//
+// @param string $responsive The responsive mode to use
+// @param mixed  $cols       The number of columns
+// @param mixed  $gutter     The width of the gutter
+
+@mixin gridstrap($responsive: "none", $cols: 0, $gutter: 0){
+	@if $cols != 0 {
+		$gridstrap-cols: $cols;
+	}
+	@if $gutter != 0 {
+		$gridstrap-gutter: $gutter;
+		$gridstrap-gutter-half: $gutter / 2;
+	}
+
+	// Base Grid Setup
+	@include gridstrap-base();
+
+	// Use appropriate buid mixin
+	@if $responsive == "none" {
+		@include gridstrap-build-simple();
+	}
+	@else if $responsive == "up" {
+		@include gridstrap-build-up();
+	}
+	@else if $responsive == "down" {
+		@include gridstrap-build-down();
+	}
+	@else if $responsive == "exact" {
+		@include gridstrap-build-exact();
+	}
+}

data/stylesheets/inc/_mixins.scss

@@ -0,0 +1,180 @@
+// Variable setup mixin.
+//
+// Pass a list of column modifiers you intend to use.
+//
+// "span": centered column of X size
+// "of": centered column of 1/X the container width
+// "offset": offset column by X columns (with margin)
+// "move": move column by X columns (via left/right)
+//
+// @param string $uses... The list of modifiers to use.
+
+@mixin gridstrap-use($uses...){
+	// Default all to false
+	$gridstrap-use-span:   false;
+	$gridstrap-use-of:     false;
+	$gridstrap-use-offset: false;
+	$gridstrap-use-push:   false;
+	$gridstrap-use-pull:   false;
+
+	// If first $use isn"t "all"...
+	@if nth($uses, 1) != "all" {
+		// Loop through and set matched options to true
+		@each $use in $uses {
+			@if $use == "span" {
+				$gridstrap-use-span:   true;
+			} @else if $use == "of" {
+				$gridstrap-use-of:   true;
+			} @else if $use == "offset" {
+				$gridstrap-use-offset:   true;
+			} @else if $use == "move" {
+				$gridstrap-use-push:   true;
+				$gridstrap-use-pull:   true;
+			}
+		}
+	} @else {
+		// Make all true
+		$gridstrap-use-span:   true;
+		$gridstrap-use-of:     true;
+		$gridstrap-use-offset: true;
+		$gridstrap-use-push:   true;
+		$gridstrap-use-pull:   true;
+	}
+}
+
+// Internal Use.
+// Sets up placeholders and contianer/row styling.
+
+@mixin gridstrap-base(){
+	%gridstrap-gutter-padding{
+		padding-right: $gridstrap-gutter-half;
+		padding-left: $gridstrap-gutter-half;
+	}
+
+	%gridstrap-col{
+		@extend %gridstrap-gutter-padding;
+		float: left;
+		position: relative;
+		min-height: 1px;
+	}
+
+	%gridstrap-span{
+		@extend %gridstrap-gutter-padding;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	%gridstrap-clearfix{
+		@include pie-clearfix();
+	}
+
+	.container,
+	.container-fluid{
+		@extend %gridstrap-clearfix, %gridstrap-gutter-padding;
+		position: relative;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.row{
+		@extend %gridstrap-clearfix;
+		margin-left: $gridstrap-gutter-half;
+		margin-right: $gridstrap-gutter-half;
+	}
+}
+
+// Setup the base styling for columns/spans
+//
+// Applies $midfix to class names if present.
+// e.g. "sm" > .col-sm-X
+//
+// @param string $midfix Optional The midfix to use on the classes
+
+@mixin gridstrap-setup-columns($midfix:""){
+	@if $midfix != "" {
+		$midfix: $midfix + "-";
+	}
+
+	@for $i from 1 through $gridstrap-cols {
+		.col-#{$midfix}#{$i}{
+			@extend %gridstrap-col;
+		}
+
+		@if $gridstrap-use-span {
+			.span-#{$midfix}#{$i}{
+				@extend %gridstrap-span;
+			}
+		}
+	}
+}
+
+// Sets the actual sizing for the columns/spans/ofs,
+// and modifiers
+//
+// Applies $midfix to class names if present.
+// e.g. "sm" > .col-sm-X
+//
+// @param string $midfix Optional The midfix to use on the classes
+
+@mixin gridstrap-build-columns($midfix: "") {
+	@if $midfix != "" {
+		$midfix: $midfix + "-";
+	}
+
+	// Add classes/modifiers for each column number
+	@for $i from 1 through $gridstrap-cols {
+		$width: ($i / $gridstrap-cols) * 100%;
+
+		.col-#{$midfix}#{$i}{
+			width: $width;
+		}
+
+		@if $gridstrap-use-span {
+			.span-#{$midfix}#{$i}{
+				width: $width;
+			}
+		}
+
+		@if $gridstrap-use-of {
+			.of-#{$midfix}#{$i}{
+				width: 100% / $i;
+			}
+		}
+
+		// No modifiers for final column
+		@if $i < $gridstrap-cols {
+			@if $gridstrap-use-offset {
+				.offset-#{$midfix}#{$i}{
+					margin-left: $width;
+				}
+			}
+			@if $gridstrap-use-push {
+				.push-#{$midfix}#{$i}{
+					left: $width;
+				}
+			}
+			@if $gridstrap-use-pull {
+				.pull-#{$midfix}#{$i}{
+					right: $width;
+				}
+			}
+		}
+	}
+
+	// Add resets
+	@if $gridstrap-use-offset {
+		.offset-#{$midfix}0{
+			margin-left: 0;
+		}
+	}
+	@if $gridstrap-use-push {
+		.push-#{$midfix}0{
+			margin-left: 0;
+		}
+	}
+	@if $gridstrap-use-pull {
+		.pull-#{$midfix}0{
+			margin-left: 0;
+		}
+	}
+}

data/stylesheets/inc/_vars.scss

@@ -0,0 +1,11 @@
+// Column/Gutter values
+$gridstrap-cols:        12 !default;
+$gridstrap-gutter:      30px !default;
+$gridstrap-gutter-half: $gridstrap-gutter / 2;
+
+// Span and Modifer class options
+$gridstrap-use-span:    true !default;
+$gridstrap-use-of:      true !default;
+$gridstrap-use-offset:  true !default;
+$gridstrap-use-push:    true !default;
+$gridstrap-use-pull:    true !default;

data/stylesheets/inc/build/_down.scss

@@ -0,0 +1,36 @@
+@mixin gridstrap-build-down(){
+	@include gridstrap-build-simple();
+
+	// Tablet/Desktop/Widescreen Columns Setup
+	@include gridstrap-setup-columns("xs");
+	@include gridstrap-setup-columns("sm");
+	@include gridstrap-setup-columns("lg");
+
+	.container{
+		max-width: $md-screen - $gridstrap-gutter;
+	}
+
+	// Large (Widescreen) and up
+	@include lg-screen-min{
+		.container{
+			max-width: $lg-screen - $gridstrap-gutter;
+		}
+		@include gridstrap-build-columns("lg");
+	}
+
+	// Small (Tablet) and down
+	@include sm-screen-max{
+		.container{
+			max-width: $sm-screen - $gridstrap-gutter;
+		}
+		@include gridstrap-build-columns("sm");
+	}
+
+	// Extra-Small (Mobile) and down
+	@include xs-screen{
+		.container{
+			max-width: none;
+		}
+		@include gridstrap-build-columns("xs");
+	}
+}

data/stylesheets/inc/build/_exact.scss

@@ -0,0 +1,39 @@
+@mixin gridstrap-build-exact(){
+	// Mobile/Tablet/Desktop/Widescreen Columns Setup
+	@include gridstrap-setup-columns("xs");
+	@include gridstrap-setup-columns("sm");
+	@include gridstrap-setup-columns("md");
+	@include gridstrap-setup-columns("lg");
+
+	// Extra-Small (Mobile) and down
+	@include xs-screen($gridstrap-gutter){
+		.container{
+			max-width: none;
+		}
+		@include gridstrap-build-columns("xs");
+	}
+
+	// Small (Tablet) only
+	@include sm-screen{
+		.container{
+			max-width: $sm-screen - $gridstrap-gutter;
+		}
+		@include gridstrap-build-columns("sm");
+	}
+
+	// Medium (Desktop) only
+	@include md-screen{
+		.container{
+			max-width: $md-screen - $gridstrap-gutter;
+		}
+		@include gridstrap-build-columns("md");
+	}
+
+	// Large (Widescreen) only
+	@include lg-screen{
+		.container{
+			max-width: $lg-screen - $gridstrap-gutter;
+		}
+		@include gridstrap-build-columns("lg");
+	}
+}

data/stylesheets/inc/build/_none.scss

@@ -0,0 +1,5 @@
+@mixin gridstrap-build-simple(){
+	// Base Columns Setup/Build
+	@include gridstrap-setup-columns();
+	@include gridstrap-build-columns();
+}

data/stylesheets/inc/build/_up.scss

@@ -0,0 +1,32 @@
+@mixin gridstrap-build-up(){
+	@include gridstrap-build-simple();
+
+	// Tablet/Desktop/Widescreen Columns Setup
+	@include gridstrap-setup-columns("sm");
+	@include gridstrap-setup-columns("md");
+	@include gridstrap-setup-columns("lg");
+
+	// Small (Tablet) and Up
+	@include sm-screen-min{
+		.container{
+			max-width: $sm-screen - $gridstrap-gutter;
+		}
+		@include gridstrap-build-columns("sm");
+	}
+
+	// Medium (Desktop) and up
+	@include md-screen-min{
+		.container{
+			max-width: $md-screen - $gridstrap-gutter;
+		}
+		@include gridstrap-build-columns("md");
+	}
+
+	// Large (Widescreen) and up
+	@include lg-screen{
+		.container{
+			max-width: $lg-screen - $gridstrap-gutter;
+		}
+		@include gridstrap-build-columns("lg");
+	}
+}

metadata

@@ -0,0 +1,70 @@
+--- !ruby/object:Gem::Specification
+name: gridstrap
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+  prerelease: 
+platform: ruby
+authors:
+- Doug Wollison
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-01-27 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.11'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.11'
+description: A bootstrap inspired grid system kit for Compass.
+email: doug@wollison.net
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- lib/gridstrap.rb
+- stylesheets/_gridstrap.scss
+- stylesheets/inc/_vars.scss
+- stylesheets/inc/build/_up.scss
+- stylesheets/inc/build/_none.scss
+- stylesheets/inc/build/_down.scss
+- stylesheets/inc/build/_exact.scss
+- stylesheets/inc/_mixins.scss
+- stylesheets/inc/_build.scss
+homepage: http://github.com/dougwollison/gridstrap
+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.23
+signing_key: 
+specification_version: 3
+summary: A bootstrap inspired grid system kit for Compass.
+test_files: []