ezy 0.2.0 → 0.2.6.alpha

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ecc5a657ba9ce7ab7a6b85269db4ff0ca3f8ffe9
-  data.tar.gz: 8f348367ead3da3f9165770262ffd30dfb24e45d
+  metadata.gz: 150e5ad3b59fb4f46ae274647edc755e8e69bafa
+  data.tar.gz: 5b9411e323d5f38f110be02cd32cc8372c59c538
 SHA512:
-  metadata.gz: dba7608afd2431e094919d09201ea90044dcabde24febff0fe8cdacb05b10c0dedd287073b047c1dc8ae0e3875a66c285a056622d8e35a8ec6d97ac8c7ab69cc
-  data.tar.gz: 0c5d73d8dc8f025b14488a25532c89dd71c161583f2ce81809a5cb939d7b593dd47cb7f677463ab857b6bcdabaad0c3e1fc6315bd637614022f0c88114278e26
+  metadata.gz: b0bd3eb1dd5e750585513adbc7d265fcaf336c9fead365cb43b99ea683fd8d276391ee363e8092494a8ab9e53a9b2671a5ee5318dae094aabb69d5402b1472b3
+  data.tar.gz: 06e0a26007226fdf805c87c48bed85a2e7f2bc11bc8da53aa7b91b52f0dcdc9b0d4991b9f167a1a95ff6c8879116d6078911a2259cba4eaa5f4d882c0f7c5b08

data/README.md

@@ -3,12 +3,107 @@ Ezy: The developer's toolbox for responsive websites
 
 My attempt to create a collection of simple-to-use grid helpers and other tools with SCSS and Ruby
 
-> NOTE: Ezy is now in beta, with only sprites out-of-the-box.
-> Stand by for release of the grid. 
+Installing Ezy
+--------------
 
-> If you can't wait, you can check out the progress [here](https://github.com/raahede/ezy/tree/grid-alpha).
+#### 1) Install the gem (This is an alpha release!)
 
-Documentation
--------------
+`gem install ezy --pre`
 
-View documentation here: [raahede.github.io/ezy](http://raahede.github.io/ezy/)
+#### 2) Require Ezy in your config.rb
+
+`require "ezy"`
+
+#### 3) Import the part you need in your SCSS
+
+Import all features:
+
+`@import "ezy";`
+
+Import grid only:
+
+`@import "ezy/grid";`
+
+Import media queries only:
+
+`@import "ezy/media";`
+
+Import sprites only:
+
+`@import "ezy/sprites";`
+
+Using Ezy
+---------
+
+### Sprites
+
+#### 1) Create sprite
+
+Simple use without retina:
+
+    @include make-sprite(
+      $name:            "icons",          // (required) your name to use when calling sprites
+      $folder:          "icon-images"     // (required) folder path relative to image folder
+    );
+
+Simple use with retina:
+
+    @include make-sprite(
+      $name:            "icons",          // (required) your name to use when calling sprites
+      $folder:          "icon-images",    // (required) folder path relative to image folder
+      $folder-retina:   "icon-images@2x"  // (optional) folder path relative to image folder
+    );
+
+Advanced use:
+
+    @include make-sprite(
+      $name:            "icons",          // (required) your name to use when calling sprites
+      $folder:          "icon-images",    // (required) folder path relative to image folder
+      $folder-retina:   "icon-images@2x", // (optional) folder path relative to image folder
+      $spacing:         20px,             // (optional) [default: 0px] spacing between images in compiled sprite
+      $layout:          vertical,         // (optional) [default: vertical] vertical, horizontal, diagonal
+      $position:        0%,               // (optional) [default: 0%] alignment of images in the sprite 
+      $spacing-retina:  40px,             // (optional) [default: $spacing x 2]
+      $layout-retina:   diagonal,         // (optional) [default: $layout]
+      $position-retina: 100%              // (optional) [default: $position]
+    );
+
+#### 2) Use sprite
+
+Simple use: (if a sprite has a retina version, it uses retina as a default)
+
+    .icon-git-fork {
+      @include background-sprite( "icons", "git-fork" ); // using image git-fork.png from images/icon-images/
+    }
+    
+Simple use, force no retina:
+
+    .icon-git-fork {
+      @include background-sprite( "icons", "git-fork", $use-retina: false );
+    }
+    
+Advanced use: 
+
+    .icon-git-fork {
+      @include background-sprite( 
+        $name:          "icons",    // (required) sprite name
+        $image:         "git-fork", // (required) image to use
+        $offset-x:      10px,       // (optional) [default: 0] background offset x
+        $offset-y:      20px,       // (optional) [default: 0] background offset y
+        $use-retina:    true        // (optional) [default: true] wether to use retina on hi-res screens 
+      );
+    }
+
+Building and testing local 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/`
+or
+`open /Library/Ruby/Gems/[version]/gems/`

data/VERSION

@@ -1 +1 @@
-0.2.0
+0.2.6.alpha

data/ezy.gemspec

@@ -2,8 +2,8 @@
 
 Gem::Specification.new do |s|
   # Release Specific Information
-  s.version = "0.2.0"
-  s.date = "2013-12-08"
+  s.version = "0.2.6.alpha"
+  s.date = "2013-12-03"
 
   # Gem Details
   s.name = "ezy"
@@ -19,9 +19,7 @@ Gem::Specification.new do |s|
   s.files += %w(ezy.gemspec)
   s.files += %w(VERSION)
   s.files += Dir.glob("lib/**/*.*")
-  # s.files += Dir.glob("sass/**/*.*")
-  s.files += Dir.glob("sass/_ezy.scss")
-  s.files += Dir.glob("sass/ezy/_sprites.scss")
+  s.files += Dir.glob("sass/**/*.*")
   s.files += Dir.glob("templates/**/*.*")
   s.files += Dir.glob("test/config.rb")
   s.files += Dir.glob("test/css/**/*.*")

data/sass/_ezy.scss

@@ -1,6 +1,6 @@
 // ---------------------------------------------------------------------------
 // Partials
 
-// @import "ezy/media";
-// @import "ezy/grid";
-@import "ezy/sprites";
+@import "ezy/media";
+@import "ezy/grid";
+@import "ezy/sprites";

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;
+}
+
+/* --- End clearfix --- */

data/sass/ezy/_functions.scss

@@ -0,0 +1,11 @@
+
+// ---------------------------------------------------------------------------
+// @function percentage-round
+// 
+// Similar to the SASS percentage() function, but rounds down to 2 decimals
+// $columns :   Fraction to convert to percentage
+// @return  :   Percentage value rounded down to 2 decimals
+
+@function percentage-round( $value ) {
+    @return floor( percentage( $value ) * 100 ) / 100;
+}

data/sass/ezy/_grid.scss

@@ -0,0 +1,250 @@
+/* ------------------------------------------------- *
+ *  Ezy Grid by Frej Raahede Nielsen
+ *  http://github.com/raahede/ezy
+ * ------------------------------------------------- *
+ */
+
+// ---------------------------------------------------------------------------
+// Grid defaults: can be overridden
+
+$column-width     : 4em   !default;
+$gutter-width     : 1em   !default;
+$gutter-property  : "margin" !default;
+$total-columns    : 12    !default;
+$is-fluid         : true  !default;
+$grid-padding     : 0     !default;
+
+// ---------------------------------------------------------------------------
+// Variables used in grid context
+
+$grid-init        : false;
+$at-breakpoint    : false;
+$grid-init-index  : 0; // Prevents columns defined before grid-init() from extending new placeholder selectors
+$context-warn     : "You must set $context if $is-fluid is set to true.";
+$init-gutter-property: $gutter-property;
+
+// ---------------------------------------------------------------------------
+// Importing dependencies
+
+@import "settings";
+@import "functions";
+@import "clearfix";
+@import "grid/debug";
+@import "grid/helpers";
+@import "grid/layout";
+
+// ---------------------------------------------------------------------------
+// Grid master placeholder selector
+// Adds cleafix and centers page in browser
+
+%ezy-master {
+  @extend %clearfix;
+  margin: {
+    left: auto;
+    right: auto;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// @mixin master
+// 
+// Sets width on page. If the grid is fluid, it's set as a max-width
+// Extends the grid master placeholder selector
+// $context : Number of columns in the current context. 
+
+@mixin master(
+  $context        : $total-columns,
+  $at-breakpoint  : $at-breakpoint
+  ) {
+  @if $is-fluid {
+    max-width: layout-width( $context );
+  } @else {
+    width: layout-width( $context );
+  }
+
+  $grid-padding-left  : $grid-padding;
+  $grid-padding-right : $grid-padding;
+
+  @if type-of( $grid-padding ) == "list"  {
+    // If grid padding is set as 2 values
+    $grid-padding-left  : nth( $grid-padding, 1 );
+    $grid-padding-right : nth( $grid-padding, 2 );
+  }
+
+  @if $grid-padding-left {  padding-left: $grid-padding-left; }
+  @if $grid-padding-right { padding-right: $grid-padding-right; }
+  
+  @if ( not $at-breakpoint ) {
+    @extend %ezy-master;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Grid container placeholder selector
+// Adds cleafix
+
+%ezy-container {
+  @extend %clearfix;
+}
+
+// ---------------------------------------------------------------------------
+// @mixin container
+// 
+// Sets width on page. If the grid is fluid, it's set as a max-width
+// Extends the grid master placeholder selector
+// $context           :   Number of columns in the current context
+//                    :   Only mandatory if grid is fluid
+// $at-breakpoint     :   Set to true if mixin is called within a media query
+//                    :   Avoids SASS compillation errors from extending within
+//                    :   a media query
+
+@mixin container(
+  $context        : $total-columns,
+  $at-breakpoint  : $at-breakpoint
+  ) {
+  $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 column-base
+// Common styles for grid columns
+
+@mixin column-base {
+  float: left;
+  @if $legacy-support-for-ie6 {
+    /* Fixing double margin on IE6 */
+    _display: inline;
+  }
+  // Inserting debug styles
+  @if $debug {
+    @include debug-styles;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// @mixin grid-init
+// 
+// Prints out placeholder selectors used with columns. Helps reduce the CSS output.
+// 
+// Should be called after setting grid variables:
+// ----------------
+// $column-width
+// $gutter-width
+// $gutter-property
+// $total-columns
+// ----------------
+
+@mixin grid-init( $columns: $total-columns ) {
+  $grid-init            : true;
+  $grid-init-index      : $grid-init-index + 1;
+  $init-gutter-property : $gutter-property;
+
+  // Placeholder selector for fluid grid columns
+  @for $i from 1 through $columns {
+    %ezy-column-#{ $grid-init-index }-#{ $i } {
+      /* Grid column base at a #{ $i }-column context */
+      @include gutters( $i );
+      @include column-base;
+    }
+  }
+
+  // Placeholder selector for non-fluid grid columns
+  %ezy-column-#{ $grid-init-index } {
+    /* Grid column base */
+    #{ $gutter-property }: {
+      left: $gutter-width / 2;
+      right: $gutter-width / 2;
+    }
+    @include column-base;
+  }
+
+}
+
+// ---------------------------------------------------------------------------
+// @mixin span-columns
+// 
+// Sets width and gutter on columns
+// Uses @extend for gutters outside media queries if grid-init() has been called
+// $columns           :   Number of columns to span
+// $context           :   Number of columns in the current context
+//                    :   Only mandatory if grid is fluid
+// $at-breakpoint     :   Set to true if mixin is called within a media query
+//                    :   Avoids SASS compillation errors from extending within
+//                    :   a media query
+// $gutter-property   :   Overrides the global $gutter-property
+
+@mixin span-columns(
+  $columns,
+  $context          : $total-columns,
+  $at-breakpoint    : $at-breakpoint,
+  $gutter-property  : $gutter-property
+  ) {
+  $width: span-column-width( $columns );
+  @if $is-fluid and $context {
+  /* Spanning #{ $columns } of #{ $context } columns */
+    $context-width: context-width( $context );
+    $pct-width: percentage-round( $width / $context-width );
+    width: $pct-width;
+  } @else {
+  /* Spanning #{ $columns } columns */
+    width: $width;
+  }
+
+  // Inserting debug text
+  @if $debug {
+    @include debug-info( $columns, $context );
+  }
+
+  // Setting base column styles when a column can't 
+  // have extended the base columns placeholder selector
+  @if ( not $grid-init ) {
+    @include column-base;
+  }
+
+  // Some crazy logic to set gutter or 
+  // extend column placeholder selectors
+
+  @if $grid-init and ( not $at-breakpoint )  {
+    // Those are the conditions for using @extend
+    @if $context {
+      @if ( $total-columns < $context ) {
+        @include gutters( $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.";
+
+      } @else {
+        @extend %ezy-column-#{ $grid-init-index }-#{ $context };
+      }
+      
+    } @else {
+      @extend %ezy-column-#{ $grid-init-index };
+    }
+
+  }
+  @if ( $gutter-property and $gutter-property != $init-gutter-property )
+      or ( not $grid-init ) 
+      or $at-breakpoint {
+
+    @if $is-fluid and $context {
+      @include gutters( $context, $gutter-property );
+
+    } @else if $is-fluid and ( not $context ) {
+      @warn $context-warn;
+    } @else {
+      @include gutters( $gutter-property: $gutter-property );
+    } 
+
+  }
+}
+

data/sass/ezy/_media.scss

@@ -0,0 +1,47 @@
+@import "settings";
+
+@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/sass/ezy/_settings.scss

@@ -0,0 +1,18 @@
+// ---------------------------------------------------------------------------
+// Debug mode
+
+$debug : false !default;
+
+// ---------------------------------------------------------------------------
+// Cross-browser support configuration
+// Using same naming convension as Compass
+
+$legacy-support-for-ie  : true !default;
+$legacy-support-for-ie6 : $legacy-support-for-ie !default;
+$legacy-support-for-ie7 : $legacy-support-for-ie !default;
+$legacy-support-for-ie8 : $legacy-support-for-ie !default;
+
+// ---------------------------------------------------------------------------
+// Selector used for legacy support in media queries
+
+$legacy-selector: ".no-media-queries" !default;