ezy 0.0.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 419aed0574f79a72fe0d57628b36b2f72260ec92
+  data.tar.gz: 8cbcb16cfd857674686f937732deeff808fb5d3e
+SHA512:
+  metadata.gz: 3b1a926d137d51a25386b63db7cd0258f198e9baf2bb766dee1e0ac45becec7acf38bdbdc106723ababcbe5fbd25449ef0093c2c1554ee290c3c0f10a8d23181
+  data.tar.gz: 3666533edd3d26f08b5bbba2368be39c18437ef6dbd361ca795f81b3641c21fa1595afe98ab6853c3f67b58698f0684efbf64fa9f326fc4aa3afa93c59ccef7b

data/README.md

@@ -0,0 +1,17 @@
+Ezy Grid
+========
+
+My attempt to create a collection of simple-to-use grid helpers with SCSS
+
+
+Building and testing gem
+------------------------
+
+### Build gem ###
+$ gem build ezy.gemspec
+
+### Install local gem ###
+$ gem install --local ezy-[build version].gem
+
+### Open installed gem location (Mac) ###
+$ open /Users/[username]/.rvm/gems/

data/VERSION

@@ -0,0 +1 @@
+0.0.2

data/ezy.gemspec

@@ -0,0 +1,29 @@
+# -*- encoding: utf-8 -*-
+
+Gem::Specification.new do |s|
+  # Release Specific Information
+  s.version = "0.0.2"
+  s.date = "2013-11-10"
+
+  # Gem Details
+  s.name = "ezy"
+  s.author = "Frej Raahede Nielsen"
+  s.summary = "Responsive grid framework for SASS"
+  s.description = "Ezy Grid is a light weight grid framework for use with SASS. It's simple, but smart and will allow you to create even the most complex responsive layouts."
+  s.email = "frejraahede@gmail.com"
+  s.homepage = "http://github.com/raahede/"
+
+  # Gem Files
+  s.files = %w(README.md)
+  s.files += %w(ezy.gemspec)
+  s.files += %w(VERSION)
+  s.files += Dir.glob("lib/**/*.*")
+  s.files += Dir.glob("sass/**/*.*")
+  s.files += Dir.glob("templates/**/*.*")
+  s.files += Dir.glob("test/**/*.*")
+
+  # Gem Bookkeeping
+  s.rubygems_version = %q{1.3.6}
+  s.add_dependency(%q<compass>, [">= 0.12.2"])
+  s.add_dependency(%q<sass>, [">= 3.2.0"])
+end

data/lib/ezy.rb

@@ -0,0 +1,4 @@
+require 'compass'
+Compass::Frameworks.register('ezy',
+                             :stylesheets_directory => File.join(File.dirname(__FILE__), '..', 'sass'),
+                             :templates_directory => File.join(File.dirname(__FILE__), '..', 'templates'))

data/sass/_ezy.scss

@@ -0,0 +1,5 @@
+// This is your framework's main stylesheet. Use it to import all default modules.
+@import "ezy/clearfix";
+@import "ezy/functions";
+@import "ezy/media";
+@import "ezy/grid";

data/sass/ezy/_clearfix.scss

@@ -0,0 +1,25 @@
+/* -------------------------------------------------------------------- *
+ *  Micro Clearfix 
+ *  http://nicolasgallagher.com/micro-clearfix-hack/
+ */
+
+%clearfix:before,
+%clearfix:after {
+  content: " ";
+  display: table;
+}
+
+%clearfix:after {
+  clear: both;
+}
+
+
+%clearfix {
+  /**
+   * For IE 6/7 only
+   * Include this rule to trigger hasLayout and contain floats.
+   */
+  *zoom: 1;
+}
+
+/* -------------------------------------------------------------------- */

data/sass/ezy/_functions.scss

@@ -0,0 +1,59 @@
+
+// ------------------------------------------------------------- *
+// Function to return a percentage rounded down to 2 deimals
+// ---------------------------------------------------------
+//
+//      @function percentage-round
+//
+//          Example use:
+//          -------------------
+//          .selector{
+//              width: percentage-round( 2/3 ); // returns 66.66%
+//          }
+//
+// ------------------------------------------------------------- *
+
+@function percentage-round( $value ) {
+    @return floor( percentage( $value ) * 100 ) / 100;
+}
+
+
+@function return-key( $key, $array ) {
+  @each $item in $array {
+    @if ( nth( $item, 1 ) == $key ){
+        @return nth( $item, 2 );
+    }
+  }
+}
+
+@function comparable-multiple( $array ) {
+  $prev: false;
+
+  @if length( $array ) < 2 {
+    @warn "You need at least two values in order to do a comparison!";
+  }
+
+  @each $item in $array {
+    @if $prev {
+      @if not comparable( $prev, $item ) {
+        @return false;
+      }
+    } @else {
+      $prev: $item;
+    }
+  }
+  @return true;
+}
+
+@function remove-units( $value ) {
+  $units: "%" 1%, "in" 1in, "cm" 1cm, "mm" 1mm, "em" 1em, "rem" 1rem, "ch" 1ch, "ex" 1ex, "pt" 1pt, "pc" 1pc, "px" 1px, "vw" 1vw, "vh" 1vh, "vmin" 1vmin, "vmax" 1vmax;
+  @each $unit in $units {
+    @if unit($value) ==  nth( $unit, 1 ) {
+      @return $value / nth( $unit, 2 );
+    }
+  }
+  // @return $value / unit($value);
+}
+
+
+

data/sass/ezy/_grid.scss

@@ -0,0 +1,148 @@
+
+$column-width:  4em !default;
+$gutter-width:  1em !default;
+$total-columns: 12 !default;
+$is-fluid:      true !default;
+
+$grid-init: false;
+
+$context-warn: "You must set $context if $is-fluid is set to true.";
+
+@function layout-width( $columns ) {
+  @if comparable( $column-width, $gutter-width ) {
+    @return $columns * ( $column-width + $gutter-width ) - $gutter-width;
+  } @else {
+    @warn "$column-width and $gutter-width must have the same unit set. #{ unit($column-width) }'s and #{ unit($gutter-width) }'s are not comparable.";
+  }
+}
+
+@function context-width( $columns ) {
+  @return layout-width( $columns ) + $gutter-width;
+}
+
+@function span-column-width( $columns ) {
+  @return layout-width( $columns );
+}
+
+@function gutter(
+  $context: false
+  ) {
+  @if $is-fluid and $context {
+    @return ( percentage-round( ( $gutter-width / 2 ) / context-width( $context ) ) );
+  } @else if $is-fluid {
+    @warn $context-warn;
+  } @else {
+    @return $gutter-width / 2; 
+  }
+}
+
+@mixin gutters( 
+  $context: false
+  ) {
+  margin: {
+    left: gutter( $context );
+    right: gutter( $context );
+  }
+}
+
+%ezy-master {
+  @extend %clearfix;
+  margin: {
+    left: auto;
+    right: auto;
+  }
+}
+
+@mixin master(
+  $columns
+  ) {
+  @if $is-fluid {
+    max-width: layout-width( $columns );
+  } @else {
+    width: layout-width( $columns );
+  }
+  @extend %ezy-master;
+}
+
+%ezy-container {
+  @extend %clearfix;
+}
+
+@mixin container(
+  $context: false,
+  $at-breakpoint: false
+  ) {
+  $pullout: -( $gutter-width )/2;
+  @if $is-fluid and $context {
+    $pullout: -( percentage-round( $gutter-width / layout-width( $context ) ) )/2;
+  } @else if $is-fluid {
+    @warn $context-warn;
+  }
+  margin: {
+    left: $pullout;
+    right: $pullout;
+  }
+  @if (not $at-breakpoint) {
+    @extend %ezy-container;
+  }
+}
+
+@mixin grid-init() {
+  $grid-init: true;
+  @if $is-fluid {
+    @for $i from 1 through $total-columns {
+      %ezy-column-#{ $i } {
+        float: left;
+        @include gutters( $i );
+      }
+    }
+  } @else {
+    %ezy-column {
+      float: left;
+      @include gutters;
+    }
+  }
+}
+
+@mixin span-columns(
+  $columns,
+  $context: false,
+  $at-breakpoint: false
+  ) {
+  $width: span-column-width( $columns );
+  /* Spanning #{ $columns } of #{ $context } columns */
+  @if $is-fluid and $context {
+    $context-width: context-width( $context );
+    $pct-width: percentage-round( $width / $context-width );
+    width: $pct-width;
+  } @else {
+    width: $width;
+  }
+  @if $is-fluid {
+    @if (not $at-breakpoint) {
+      @if $total-columns < $context {
+        @warn "Please check if $total-columns is set. $total-columns should be the highest number of columns occuring in your layout. This error will not break your layout, but will increase the CSS output.";
+        @include gutters( $context );
+      } @else if (not $grid-init) {
+        @warn "Include grid-init() after setting $total-columns for cleaner CSS output.";
+        @include gutters( $context );
+      } @else {
+        @extend %ezy-column-#{ $context };
+      }
+    } @else {
+      @include gutters( $context );
+    }
+    @if $columns > $context {
+      @warn "You are trying to span #{ $columns } columns, but your layout only has #{ $context } columns.";
+    }
+    @if (not $context) {
+      @warn $context-warn;
+    }
+  } @else if (not $grid-init) {
+    @warn "Include grid-init() after setting $gutter-width for cleaner CSS output.";
+    @include gutters( $context );
+  } @else {
+    @extend %ezy-column;
+  }
+}
+

data/sass/ezy/_media.scss

@@ -0,0 +1,48 @@
+
+$legacy-selector: ".no-media-queries" !default;
+
+@function set-breakpoint(
+  $min: false,
+  $max: false,
+  $custom: false,
+  $legacy-support: false
+  ) {
+
+  @if (not $min) and (not $max) and (not $custom) {
+    @warn "Either $min, $max, or $custom must be defined for set-breakpoint to work.";
+  }
+
+  @if $min and $max {
+    // Both $min and $max
+    @return "(min-width: #{ $min }) and (max-width: #{ $max })", $legacy-support;
+  } @else {
+    @if $min and (not $max) {
+      // Min only:
+      @return "(min-width: #{ $min })", $legacy-support;
+    }
+    @if $max and (not $min) {
+      // Max only:
+      @return "(max-width: #{ $max })", $legacy-support;
+    } @else {
+      // Custom:
+      @return $custom, $legacy-support;
+    }
+  }
+}
+
+@mixin at-breakpoint( 
+  $breakpoint,
+  $legacy-support: false
+  ) {
+  @media #{ nth( $breakpoint, 1 ) } {
+    @content;
+  }
+  @if $legacy-support or nth( $breakpoint, 2 ) {
+    #{ $legacy-selector } & {
+      /* Fallback for browsers not supporting media queries */
+      @content;
+    }
+  }
+}
+
+

data/templates/project/_settings.scss

@@ -0,0 +1,32 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "ezy";
+
+// -----------------------------------------------------------
+// Required grid settings
+
+$column-width: 40px;  // column width
+$gutter-width: 30px;  // space between columns
+$total-columns: 12;   // max number of columns occuring
+@include grid-init; // doing some background magic for you
+
+// -----------------------------------------------------------
+// Grid layouts (column count)
+
+$columns-small:   4;
+$columns-medium:  8;
+$columns-large:   12;
+
+// -----------------------------------------------------------
+// Responsive settings
+
+// Widths for use in media queries
+$width-small:   context-width( $columns-small );
+$width-medium:  context-width( $columns-medium );
+$width-large:   context-width( $columns-large );
+
+// Defining media query breakpoints
+$breakpoint-small:  set-breakpoint( $max: $width-small );
+$breakpoint-medium: set-breakpoint( $min: $width-small+1 );
+$breakpoint-large:  set-breakpoint( $min: $width-medium+1, $legacy-support: true ); // Support for legacy browsers

data/templates/project/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js no-media-queries ie6"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js no-media-queries ie7"> <![endif]-->
+<!--[if lt IE 9]>      <html class="no-media-queries"> <![endif]-->
+<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
+  <head>
+    <meta charset="utf-8">
+
+    <title>Ezy Grid</title>
+
+    <meta name="description" content="Getting started with Ezy Grid">
+    <meta name="viewport" content="width=device-width">
+
+    <link href="css/demo.css" rel="stylesheet">
+
+  </head>
+  <body>
+  
+  <div class="page">
+    <div class="grid">
+      <div class="column">
+        brew ale, bottle conditioning alcohol saccharification wort chiller. bottom fermenting yeast hand pump bunghole original gravity. bung conditioning ibu all-malt hoppy ipa?
+      </div>
+      <div class="column">
+        brew ale, bottle conditioning alcohol saccharification wort chiller. bottom fermenting yeast hand pump bunghole original gravity. bung conditioning ibu all-malt hoppy ipa?
+      </div>
+      <div class="column">
+        brew ale, bottle conditioning alcohol saccharification wort chiller. bottom fermenting yeast hand pump bunghole original gravity. bung conditioning ibu all-malt hoppy ipa?
+      </div>
+      <div class="column">
+        brew ale, bottle conditioning alcohol saccharification wort chiller. bottom fermenting yeast hand pump bunghole original gravity. bung conditioning ibu all-malt hoppy ipa?
+      </div>
+      <div class="column">
+        brew ale, bottle conditioning alcohol saccharification wort chiller. bottom fermenting yeast hand pump bunghole original gravity. bung conditioning ibu all-malt hoppy ipa?
+      </div>
+    </div>
+  </body>
+</html>

data/templates/project/manifest.rb

@@ -0,0 +1,18 @@
+stylesheet 'screen.scss', :media => "screen, projection"
+stylesheet '_base.scss'
+
+description "Ezy Grid: a minimal grid framework with mammoth potential."
+
+help %Q{
+Please see the source repository for all documentation and help:
+
+    http://github.com/raahede/ezy-grid
+}
+
+welcome_message %Q{
+Please see the source repository for all documentation and help:
+
+    http://github.com/raahede/ezy-grid
+
+To get started, set up your grid in the base partial by following the inline instructions.
+}

data/templates/project/screen.scss

@@ -0,0 +1,40 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "layout";
+
+/* -------------------------------------------------------------------------*/
+/* Layout: mobile first */
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+.page {
+  @include master( $columns-large ); // Sets max-width
+  padding: {
+    left: $gutter-width / 2;
+    right: $gutter-width / 2;
+  }
+}
+
+.grid {
+  @include container( $columns-small );
+  @include at-breakpoint( $breakpoint-medium ) {
+    @include container( $columns-medium, $at-breakpoint: true );
+  }
+  @include at-breakpoint( $breakpoint-large ) {
+    @include container( $columns-large, $at-breakpoint: true );
+  }
+}
+
+.column {
+  @include span-columns( 4, $context: $columns-small);
+  @include at-breakpoint( $breakpoint-medium ) {
+    @include span-columns( 4, $context: $columns-medium, $at-breakpoint: true);
+  }
+  @include at-breakpoint( $breakpoint-large ) {
+    @include span-columns( 4, $context: $columns-large, $at-breakpoint: true);
+  }
+}

data/test/config.rb

@@ -0,0 +1,10 @@
+# Compass CSS framework config file
+
+project_type = :stand_alone
+http_path = "/"
+sass_dir = "scss"
+css_dir = "css"
+line_comments = false
+preferred_syntax = :scss
+output_style = :expanded
+relative_assets = true

data/test/css/grid/fluid.css

@@ -0,0 +1,93 @@
+/* -------------------------------------------------------------------- *
+ *  Micro Clearfix 
+ *  http://nicolasgallagher.com/micro-clearfix-hack/
+ */
+.page:before, .grid:before,
+.page:after,
+.grid:after {
+  content: " ";
+  display: table;
+}
+
+.page:after, .grid:after {
+  clear: both;
+}
+
+.page, .grid {
+  /**
+   * For IE 6/7 only
+   * Include this rule to trigger hasLayout and contain floats.
+   */
+  *zoom: 1;
+}
+
+/* -------------------------------------------------------------------- */
+.page {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.page {
+  max-width: 1050px;
+}
+
+.grid {
+  margin-left: -1.425%;
+  margin-right: -1.425%;
+}
+
+/* -------------------------------------------------------------------- *
+ * Grid columns: not using grid-init()
+ */
+.span-columns-2 {
+  /* Spanning 2 of 12 columns */
+  width: 13.88%;
+  margin-left: 1.38%;
+  margin-right: 1.38%;
+}
+
+.span-columns-4 {
+  /* Spanning 4 of 12 columns */
+  width: 30.55%;
+  margin-left: 1.38%;
+  margin-right: 1.38%;
+}
+
+.span-columns-6 {
+  /* Spanning 6 of 12 columns */
+  width: 47.22%;
+  margin-left: 1.38%;
+  margin-right: 1.38%;
+}
+
+/* -------------------------------------------------------------------- *
+ * Grid columns: using grid-init()
+ */
+.span-columns-2, .span-columns-4, .span-columns-6, .span-columns-18 {
+  float: left;
+  margin-left: 1.38%;
+  margin-right: 1.38%;
+}
+
+.span-columns-2 {
+  /* Spanning 2 of 12 columns */
+  width: 13.88%;
+}
+
+.span-columns-4 {
+  /* Spanning 4 of 12 columns */
+  width: 30.55%;
+}
+
+.span-columns-6 {
+  /* Spanning 6 of 12 columns */
+  width: 47.22%;
+}
+
+/* -------------------------------------------------------------------- *
+ * Grid colum spanning more columns than layout
+ */
+.span-columns-18 {
+  /* Spanning 18 of 12 columns */
+  width: 147.22%;
+}

data/test/css/grid/responsive.css

@@ -0,0 +1,84 @@
+/* -------------------------------------------------------------------- *
+ *  Micro Clearfix 
+ *  http://nicolasgallagher.com/micro-clearfix-hack/
+ */
+.page:before, .grid:before,
+.page:after,
+.grid:after {
+  content: " ";
+  display: table;
+}
+
+.page:after, .grid:after {
+  clear: both;
+}
+
+.page, .grid {
+  /**
+   * For IE 6/7 only
+   * Include this rule to trigger hasLayout and contain floats.
+   */
+  *zoom: 1;
+}
+
+/* -------------------------------------------------------------------- */
+.page {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.page {
+  max-width: 1050px;
+}
+
+.grid {
+  margin-left: -4.545%;
+  margin-right: -4.545%;
+}
+@media (min-width: 361px) {
+  .grid {
+    margin-left: -2.17%;
+    margin-right: -2.17%;
+  }
+}
+@media (min-width: 721px) {
+  .grid {
+    margin-left: -1.425%;
+    margin-right: -1.425%;
+  }
+}
+.no-media-queries .grid {
+  /* Fallback for browsers not supporting media queries */
+  margin-left: -1.425%;
+  margin-right: -1.425%;
+}
+
+.column {
+  /* Spanning 4 of 4 columns */
+  width: 91.66%;
+  margin-left: 4.16%;
+  margin-right: 4.16%;
+}
+@media (min-width: 361px) {
+  .column {
+    /* Spanning 4 of 8 columns */
+    width: 45.83%;
+    margin-left: 2.08%;
+    margin-right: 2.08%;
+  }
+}
+@media (min-width: 721px) {
+  .column {
+    /* Spanning 4 of 12 columns */
+    width: 30.55%;
+    margin-left: 1.38%;
+    margin-right: 1.38%;
+  }
+}
+.no-media-queries .column {
+  /* Fallback for browsers not supporting media queries */
+  /* Spanning 4 of 12 columns */
+  width: 30.55%;
+  margin-left: 1.38%;
+  margin-right: 1.38%;
+}

data/test/css/grid/static.css

@@ -0,0 +1,93 @@
+/* -------------------------------------------------------------------- *
+ *  Micro Clearfix 
+ *  http://nicolasgallagher.com/micro-clearfix-hack/
+ */
+.page:before, .grid:before,
+.page:after,
+.grid:after {
+  content: " ";
+  display: table;
+}
+
+.page:after, .grid:after {
+  clear: both;
+}
+
+.page, .grid {
+  /**
+   * For IE 6/7 only
+   * Include this rule to trigger hasLayout and contain floats.
+   */
+  *zoom: 1;
+}
+
+/* -------------------------------------------------------------------- */
+.page {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.page {
+  width: 1050px;
+}
+
+.grid {
+  margin-left: -15px;
+  margin-right: -15px;
+}
+
+/* -------------------------------------------------------------------- *
+ * Static columns: not using grid-init()
+ */
+.span-columns-2 {
+  /* Spanning 2 of false columns */
+  width: 150px;
+  margin-left: 15px;
+  margin-right: 15px;
+}
+
+.span-columns-4 {
+  /* Spanning 4 of false columns */
+  width: 330px;
+  margin-left: 15px;
+  margin-right: 15px;
+}
+
+.span-columns-6 {
+  /* Spanning 6 of false columns */
+  width: 510px;
+  margin-left: 15px;
+  margin-right: 15px;
+}
+
+/* -------------------------------------------------------------------- *
+ * Static columns: using grid-init()
+ */
+.span-columns-2, .span-columns-4, .span-columns-6, .span-columns-18 {
+  float: left;
+  margin-left: 15px;
+  margin-right: 15px;
+}
+
+.span-columns-2 {
+  /* Spanning 2 of false columns */
+  width: 150px;
+}
+
+.span-columns-4 {
+  /* Spanning 4 of false columns */
+  width: 330px;
+}
+
+.span-columns-6 {
+  /* Spanning 6 of false columns */
+  width: 510px;
+}
+
+/* -------------------------------------------------------------------- *
+ * Grid colum spanning more columns than layout
+ */
+.span-columns-18 {
+  /* Spanning 18 of false columns */
+  width: 1590px;
+}

data/test/css/media.css

@@ -0,0 +1,79 @@
+/* -------------------------------------------------------------------- *
+ *  Micro Clearfix 
+ *  http://nicolasgallagher.com/micro-clearfix-hack/
+ */
+/* -------------------------------------------------------------------- */
+@media (max-width: 400px) {
+  .test {
+    content: "Breakpoint 1 (A)";
+  }
+}
+@media (max-width: 400px) {
+  .test {
+    content: "Breakpoint 1 (B)";
+  }
+}
+.no-media-queries .test {
+  /* Fallback for browsers not supporting media queries */
+  content: "Breakpoint 1 (B)";
+}
+@media (min-width: 401px) and (max-width: 800px) {
+  .test {
+    content: "Breakpoint 2 (A)";
+  }
+}
+@media (min-width: 401px) and (max-width: 800px) {
+  .test {
+    content: "Breakpoint 2 (B)";
+  }
+}
+.no-media-queries .test {
+  /* Fallback for browsers not supporting media queries */
+  content: "Breakpoint 2 (B)";
+}
+@media (min-width: 801px) {
+  .test {
+    content: "Breakpoint 3 (A)";
+  }
+}
+@media (min-width: 801px) {
+  .test {
+    content: "Breakpoint 3 (B)";
+  }
+}
+.no-media-queries .test {
+  /* Fallback for browsers not supporting media queries */
+  content: "Breakpoint 3 (B)";
+}
+@media (min-width: 40em) and (max-width: 80em) {
+  .test {
+    content: "Breakpoint 4 (A)";
+  }
+}
+@media (min-width: 40em) and (max-width: 80em) {
+  .test {
+    content: "Breakpoint 4 (B)";
+  }
+}
+.no-media-queries .test {
+  /* Fallback for browsers not supporting media queries */
+  content: "Breakpoint 4 (B)";
+}
+@media (max-width: 400px) {
+  .test {
+    content: "Forcing legacy support";
+  }
+}
+.no-media-queries .test {
+  /* Fallback for browsers not supporting media queries */
+  content: "Forcing legacy support";
+}
+@media (min-width: 401px) and (max-width: 800px) {
+  .test {
+    content: "Custom legacy selector";
+  }
+}
+.ie8 .test {
+  /* Fallback for browsers not supporting media queries */
+  content: "Custom legacy selector";
+}

data/test/scss/grid/fluid.scss

@@ -0,0 +1,62 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "../../../sass/ezy";
+
+$column-width: 60px;
+$gutter-width: 30px;
+$total-columns: 12;
+
+.page {
+  @include master( $total-columns ); // Sets max-width
+}
+
+.grid {
+  @include container( $total-columns );
+}
+
+/* -------------------------------------------------------------------- *
+ * Grid columns: not using grid-init()
+ */
+
+.span-columns-2 {
+  @include span-columns( 2, $context: $total-columns );
+}
+
+.span-columns-4 {
+  @include span-columns( 4, $context: $total-columns );
+}
+
+.span-columns-6 {
+  @include span-columns( 6, $context: $total-columns );
+}
+
+/* -------------------------------------------------------------------- *
+ * Grid columns: using grid-init()
+ */
+
+@include grid-init();
+
+.span-columns-2 {
+  @include span-columns( 2, $context: $total-columns );
+}
+
+.span-columns-4 {
+  @include span-columns( 4, $context: $total-columns );
+}
+
+.span-columns-6 {
+  @include span-columns( 6, $context: $total-columns );
+}
+
+/* -------------------------------------------------------------------- *
+ * Grid colum spanning more columns than layout
+ */
+
+.span-columns-18 {
+  @include span-columns( 18, $context: $total-columns );
+}
+
+
+
+

data/test/scss/grid/responsive.scss

@@ -0,0 +1,42 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "../../../sass/ezy";
+
+$column-width: 60px;
+$gutter-width: 30px;
+$total-columns: 12;
+
+// Widths for use in media queries
+$width-small:   context-width( 4 );
+$width-medium:  context-width( 8 );
+$width-large:   context-width( $total-columns );
+
+// Defining media query breakpoints
+$breakpoint-small:  set-breakpoint( $max: $width-small );
+$breakpoint-medium: set-breakpoint( $min: $width-small+1 );
+$breakpoint-large:  set-breakpoint( $min: $width-medium+1, $legacy-support: true ); // Support for legacy browsers
+
+.page {
+  @include master( $total-columns ); // Sets max-width
+}
+
+.grid {
+  @include container( 4 );
+  @include at-breakpoint( $breakpoint-medium ) {
+    @include container( 8, $at-breakpoint: true );
+  }
+  @include at-breakpoint( $breakpoint-large ) {
+    @include container( $total-columns, $at-breakpoint: true );
+  }
+}
+
+.column {
+  @include span-columns( 4, $context: 4);
+  @include at-breakpoint( $breakpoint-medium ) {
+    @include span-columns( 4, $context: 8, $at-breakpoint: true);
+  }
+  @include at-breakpoint( $breakpoint-large ) {
+    @include span-columns( 4, $context: $total-columns, $at-breakpoint: true);
+  }
+}

data/test/scss/grid/static.scss

@@ -0,0 +1,61 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "../../../sass/ezy";
+
+$column-width: 60px;
+$gutter-width: 30px;
+$total-columns: 12;
+$is-fluid: false;
+
+.page {
+  @include master( $total-columns ); // Sets max-width
+}
+
+.grid {
+  @include container();
+}
+
+/* -------------------------------------------------------------------- *
+ * Static columns: not using grid-init()
+ */
+
+.span-columns-2 {
+  @include span-columns( 2 );
+}
+
+.span-columns-4 {
+  @include span-columns( 4 );
+}
+
+.span-columns-6 {
+  @include span-columns( 6 );
+}
+
+/* -------------------------------------------------------------------- *
+ * Static columns: using grid-init()
+ */
+
+@include grid-init();
+
+.span-columns-2 {
+  @include span-columns( 2 );
+}
+
+.span-columns-4 {
+  @include span-columns( 4 );
+}
+
+.span-columns-6 {
+  @include span-columns( 6 );
+}
+
+/* -------------------------------------------------------------------- *
+ * Grid colum spanning more columns than layout
+ */
+
+.span-columns-18 {
+  @include span-columns( 18 );
+}
+
+

data/test/scss/media.scss

@@ -0,0 +1,66 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "../../sass/ezy";
+
+// ---------------------------------------------------------------------------
+// Media
+
+$width-1: 400px;
+$width-2: 800px;
+
+$breakpoint-1-a:  set-breakpoint( $max: $width-1 );
+$breakpoint-1-b:  set-breakpoint( $max: $width-1, $legacy-support: true );
+$breakpoint-2-a:  set-breakpoint( $min: $width-1+1, $max: $width-2 );
+$breakpoint-2-b:  set-breakpoint( $min: $width-1+1, $max: $width-2, $legacy-support: true );
+$breakpoint-3-a:  set-breakpoint( $min: $width-2+1);
+$breakpoint-3-b:  set-breakpoint( $min: $width-2+1, $legacy-support: true);
+$breakpoint-4-a:  set-breakpoint( $custom: "(min-width: 40em) and (max-width: 80em)");
+$breakpoint-4-b:  set-breakpoint( $custom: "(min-width: 40em) and (max-width: 80em)", $legacy-support: true);
+
+.test{
+  @include at-breakpoint( $breakpoint-1-a ) {
+    content: "Breakpoint 1 (A)";
+  }
+  @include at-breakpoint( $breakpoint-1-b ) {
+    content: "Breakpoint 1 (B)";
+  }
+  @include at-breakpoint( $breakpoint-2-a ) {
+    content: "Breakpoint 2 (A)";
+  }
+  @include at-breakpoint( $breakpoint-2-b ) {
+    content: "Breakpoint 2 (B)";
+  }
+  @include at-breakpoint( $breakpoint-3-a ) {
+    content: "Breakpoint 3 (A)";
+  }
+  @include at-breakpoint( $breakpoint-3-b ) {
+    content: "Breakpoint 3 (B)";
+  }
+  @include at-breakpoint( $breakpoint-4-a ) {
+    content: "Breakpoint 4 (A)";
+  }
+  @include at-breakpoint( $breakpoint-4-b ) {
+    content: "Breakpoint 4 (B)";
+  }
+
+  // -------------------------------------------------------------------- *
+  // Force legacy support
+
+  @include at-breakpoint( $breakpoint-1-a, $legacy-support: true ) {
+    content: "Forcing legacy support";
+  }
+
+  // -------------------------------------------------------------------- *
+  // Custom legacy selector
+
+  $legacy-selector: ".ie8";
+
+  @include at-breakpoint( $breakpoint-2-b ) {
+    content: "Custom legacy selector";
+  }
+
+ 
+}
+
+

metadata

@@ -0,0 +1,93 @@
+--- !ruby/object:Gem::Specification
+name: ezy
+version: !ruby/object:Gem::Version
+  version: 0.0.2
+platform: ruby
+authors:
+- Frej Raahede Nielsen
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2013-11-10 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: 0.12.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: 0.12.2
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+description: Ezy Grid is a light weight grid framework for use with SASS. It's simple,
+  but smart and will allow you to create even the most complex responsive layouts.
+email: frejraahede@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- ezy.gemspec
+- VERSION
+- lib/ezy.rb
+- sass/_ezy.scss
+- sass/ezy/_clearfix.scss
+- sass/ezy/_functions.scss
+- sass/ezy/_grid.scss
+- sass/ezy/_media.scss
+- templates/project/_settings.scss
+- templates/project/index.html
+- templates/project/manifest.rb
+- templates/project/screen.scss
+- test/config.rb
+- test/css/grid/fluid.css
+- test/css/grid/responsive.css
+- test/css/grid/static.css
+- test/css/media.css
+- test/scss/grid/fluid.scss
+- test/scss/grid/responsive.scss
+- test/scss/grid/static.scss
+- test/scss/media.scss
+homepage: http://github.com/raahede/
+licenses: []
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.0.6
+signing_key: 
+specification_version: 4
+summary: Responsive grid framework for SASS
+test_files: []