ezy 0.1.1 → 0.2.0.alpha

data/README.md

@@ -3,9 +3,6 @@ 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
 --------------
 
@@ -19,7 +16,11 @@ Installing Ezy
 
 #### 3) Import the part you need in your SCSS
 
-Import sprites: (only option ATM)
+Import all features:
+
+`@import "ezy";`
+
+Import sprites only:
 
 `@import "ezy/sprites";`
 

data/VERSION

@@ -1 +1 @@
-0.1.0
+0.2.0.alpha

data/ezy.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |s|
   # Release Specific Information
-  s.version = "0.1.1"
+  s.version = "0.2.0.alpha"
   s.date = "2013-11-13"
 
   # Gem Details
@@ -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/**/*.*")
@@ -33,4 +31,4 @@ Gem::Specification.new do |s|
   s.rubygems_version = %q{1.3.6}
   s.add_dependency(%q<compass>, [">= 0.12.2"])
   s.add_dependency(%q<sass>, [">= 3.2.0"])
-end
+end

data/sass/_ezy.scss

@@ -1,6 +1,6 @@
 // ---------------------------------------------------------------------------
 // Partials
 
-// @import "ezy/media";
-// @import "ezy/grid";
+@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;
+}
+
+/* -------------------------------------------------------------------- */

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,279 @@
+// ---------------------------------------------------------------------------
+// Importing dependencies
+
+@import "functions";
+@import "clearfix";
+
+// ---------------------------------------------------------------------------
+// Mandatory grid settings
+// Defaults: can be overridden
+
+$column-width:            4em       !default;
+$gutter-width:            1em       !default;
+$default-gutter-property: "margin"  !default;
+$total-columns:           12        !default;
+$is-fluid:                true      !default;
+
+// ---------------------------------------------------------------------------
+// Variables used in grid context
+
+$grid-init: false;
+$context-warn: "You must set $context if $is-fluid is set to true.";
+$init-gutter-property: $default-gutter-property;
+
+// ---------------------------------------------------------------------------
+// @function layout-width
+// 
+// Returns width based on given number of culumns
+// $columns :   Number of columns to calculate width from
+// @return  :   Width in the same unit as $column-width and $gutter-width
+
+@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
+// 
+// Returns width based on given number of culumns, plus an extra gutter
+// Used for % calculations in the grid
+// $columns :   Number of columns to calculate width from
+// @return  :   Width in the same unit as $column-width and $gutter-width
+
+@function context-width( $columns ) {
+  @return layout-width( $columns ) + $gutter-width;
+}
+
+// ---------------------------------------------------------------------------
+// @function span-column-width
+// 
+// Same as layout-width( $columns ), but renamed for better context awareness
+
+@function span-column-width( $columns ) {
+  @return layout-width( $columns );
+}
+
+// ---------------------------------------------------------------------------
+// @function gutter
+// 
+// Returns gutter in the same unit as $gutter-width if grid is static
+// Returns gutter as a percentage of the context if grid is fluid
+// $context :   Number of columns in the current context. 
+//          :   If set to false, the returned value is as in static grid 
+// @return  :   Width as $gutter-width or as a percentage of the context
+
+@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
+// 
+// Sets gutters using the gutter( $context ) function
+// $context           :   Number of columns in the current context. 
+//                    :   Only mandatory if grid is fluid 
+// $gutter-property   :   Set to "margin" or "padding"
+
+@mixin gutters( 
+  $context: false,
+  $property: false
+  ) {
+  @if (not $property) {
+    $property: $default-gutter-property;
+  }
+  @if $property == "margin" or $property == "padding" {
+    float: left;
+    #{ $property }: {
+      left: gutter( $context );
+      right: gutter( $context );
+    }
+  } @else {
+    @warn "$gutter-property must be set to either 'margin' or 'padding'";
+  }
+}
+
+// ---------------------------------------------------------------------------
+// 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
+  ) {
+  @if $is-fluid {
+    max-width: layout-width( $context );
+  } @else {
+    width: layout-width( $context );
+  }
+  @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: 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
+// 
+// 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() {
+  $grid-init: true;
+  $init-gutter-property: $default-gutter-property;
+  @if $is-fluid {
+    @for $i from 1 through $total-columns {
+      %ezy-column-#{ $i } {
+        @include gutters( $i );
+      }
+    }
+  } @else {
+    %ezy-column {
+      @include gutters;
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// @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: false,
+  $at-breakpoint: false,
+  $gutter-property: false
+  ) {
+  $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;
+  }
+
+  @if $gutter-property and $gutter-property != $default-gutter-property {
+
+    @if $is-fluid and $context {
+      @include gutters( $context, $gutter-property );
+
+    } @else if ( not $is-fluid ) {
+      @include gutters( $property: $gutter-property );
+
+    } @else if $is-fluid and ( not $context ) {
+      @warn $context-warn;
+    }
+
+  } @else if $is-fluid and $context {
+
+    @if $at-breakpoint or $init-gutter-property != $default-gutter-property {
+      @include gutters( $context );
+
+    } @else 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 if ( not $grid-init ) {
+      @include gutters( $context );
+      @warn "Include grid-init() after setting $total-columns for cleaner CSS output.";
+      
+    } @else {
+      @extend %ezy-column-#{ $context };
+    }
+
+
+  } @else if $is-fluid { // $context not set
+
+    @warn $context-warn;
+
+  } @else if $grid-init and $init-gutter-property == $default-gutter-property { // Grid is static
+      @extend %ezy-column;
+
+  } @else {
+    @include gutters( $context );
+
+    @if (not $grid-init) { 
+      @warn "Include grid-init() after setting $gutter-width for cleaner CSS output."; 
+    }
+  }
+}
+

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;
+    }
+  }
+}
+
+

metadata

@@ -1,55 +1,73 @@
---- !ruby/object:Gem::Specification
+--- !ruby/object:Gem::Specification 
 name: ezy
-version: !ruby/object:Gem::Version
-  version: 0.1.1
+version: !ruby/object:Gem::Version 
+  hash: -933531639
+  prerelease: 6
+  segments: 
+  - 0
+  - 2
+  - 0
+  - alpha
+  version: 0.2.0.alpha
 platform: ruby
-authors:
+authors: 
 - Frej Raahede Nielsen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-11-13 00:00:00.000000000 Z
-dependencies:
-- !ruby/object:Gem::Dependency
+
+date: 2013-11-13 00:00:00 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
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 43
+        segments: 
+        - 0
+        - 12
+        - 2
         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
+  version_requirements: *id001
+- !ruby/object:Gem::Dependency 
+  name: sass
   prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - '>='
-      - !ruby/object:Gem::Version
+  requirement: &id002 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 15
+        segments: 
+        - 3
+        - 2
+        - 0
         version: 3.2.0
-description: A collection of SCSS tools for creating responsive websites. Includes
-  a simple but powerful grid framework, media query helpers and sprite helpers.
+  type: :runtime
+  version_requirements: *id002
+description: A collection of SCSS tools for creating responsive websites. Includes a simple but powerful grid framework, media query helpers and sprite helpers.
 email: frejraahede@gmail.com
 executables: []
+
 extensions: []
+
 extra_rdoc_files: []
-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
 - sass/ezy/_sprites.scss
 - templates/project/_settings.scss
 - templates/project/index.html
@@ -126,27 +144,39 @@ files:
 - test/img/test-spacing@2x/classic.png
 - test/img/test-spacing@2x/indy.png
 homepage: http://github.com/raahede/
-licenses:
+licenses: 
 - MIT
-metadata: {}
 post_install_message: 
 rdoc_options: []
-require_paths:
+
+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'
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">"
+    - !ruby/object:Gem::Version 
+      hash: 25
+      segments: 
+      - 1
+      - 3
+      - 1
+      version: 1.3.1
 requirements: []
+
 rubyforge_project: 
-rubygems_version: 2.1.10
+rubygems_version: 1.8.25
 signing_key: 
-specification_version: 4
+specification_version: 3
 summary: The developer's toolbox for responsive websites
 test_files: []
+

checksums.yaml

@@ -1,7 +0,0 @@
----
-SHA1:
-  metadata.gz: c356c1caf87fa968c18eba1c4debaa02fb79fbf6
-  data.tar.gz: 959c46bdca6bb477dbd11d1a1b5e305ef4bfb1a8
-SHA512:
-  metadata.gz: 707af3feea4008b898da3f1eb310f0d0bccaa55f0274d11c24ace8111bd3afca55fa8abe5e782a4e1ccd69f3b09d98b38f14e2551ebae86237082156502ca24c
-  data.tar.gz: ca508a57002f5b0aa204ebb5f5d4a4074086cfcd724fea664b77741ab89207114ecce8f8f8f5a7eee939bc5941fc941e5cd1ebac3f0037bf3a09a1d41841f57e