gridtacular 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 6b421dfea294b15cc6b5bf78b4f1511d3bea25e9
+  data.tar.gz: 0457670c28abd10f6b8acbbc59c5a9cd92b6d493
+SHA512:
+  metadata.gz: 1fcff141448594bf632d0e8fbb938a8c3bbce92c7e1bf424f3783d6eb6e7ee18c69f73ae6b04f7ca9f50e77febdda0df829e7ebbcf2d68b9f8d1b4c7c501e02d
+  data.tar.gz: 8553dba6c33143ba93a576ffaed26e24d7b4ff8441b59f8df5cb89cba6eff33054169a1384435bf7623e6bdef05ef9038b700af202cc04ff03b2a748979cd449

data/_gridtacular.scss

@@ -0,0 +1,280 @@
+//
+// Flexbones Grid System
+// 
+// Version 1.2
+// Author: Rory Ashford
+//
+
+
+// Clearfix mixin
+//
+// Used to clear the floats within each grid
+@mixin clearfix() {
+    *zoom:1;
+    &:before, &:after {
+        content:"";
+        display:table;
+        flex-basis: 0; // flexbox clear fix 
+        order: 1; // flexbox clear fix
+    }
+    &:after { clear:both; }
+}
+
+
+// Column Width
+// 
+// Works out the percent width of columns (gutters can be 
+// any unit but columns are always percent bases)
+@function column-width($number-of-columns,$total-columns) {
+    $single-col-width: 100 / $total-columns * 1%;
+    @return $single-col-width * $number-of-columns;
+}
+
+
+// At Breakpoint
+// 
+// A mixin for outputting inline media queries
+// Just supply a Sass list as an argument with a min/max
+// If there are no min and max values supplied then it 
+// doesnt ouput a media query
+@mixin at-breakpoint($min,$max:null){
+    @if($max == null and $min != null){
+        @media (min-width: $min){
+            @content;
+        }
+    } @elseif($min == null and $max == null) {
+        @content;
+    } @else{
+         @media (min-width: $min) and (max-width: $max){
+            @content;
+        }
+    }
+}
+
+
+// Span Columns
+// 
+// Used to set grids semantically from within 
+// the stylesheet with no additional HTML markup
+@mixin span-columns($columns, $total-columns){
+    width: column-width($columns,$total-columns);
+    padding-left: $gutter-width; 
+}
+
+
+// Grid
+//
+// Called once per breakpoint as the gutters may be different
+// Float all direct children of the grid.
+// Adds negative padding to each row
+// Display flex and flex-wrap are used here to prevent content from 
+// floating into above elements
+@mixin grid($gutter){
+    .grid{
+        margin-left: -$gutter;
+        @include clearfix();
+    }
+
+        // Float children
+        .grid > * {
+            float: left;
+            position: relative;
+            padding-left: $gutter;
+        }
+
+}
+
+
+// Equal height Grid items
+// 
+// Uses flexbox so no IE support but there is a polyfill:
+// http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback
+//
+// EXPERIMENTAL (Disabled in current build)
+// feels extremely hacky, doesnt scale particularly well
+// should it be called per media query?
+@mixin grid-equal-height($gutter,$column-name){
+    .grid--equal-height{
+        display: flex;
+        flex-wrap: wrap;
+        > * {
+            display: flex;
+            // ugly ass fix for block level elements 100% children of adisplay: flex container.
+            > * {
+                width: 100%;
+            }
+        }
+    }
+}
+
+
+// Grid with no gutters
+@mixin grid-no-gutter($column-class,$suffix: null){
+    .grid--no-gutter#{$suffix}{
+        margin-left: 0;
+
+        > * {
+            padding-left: 0;
+        }
+    }
+}
+
+
+// Equivalent Fractions
+//
+// This function will add additional classes
+// to make the grid system more expressive.
+// Instead of writing 3/12 you can also write 1/4
+// with this function
+@function equivalent-fractions($numerator,$denominator){
+    $fractions: ();
+    @for $i from -$numerator through -1{
+        @if($numerator % abs($i) == 0 and $denominator % abs($i) == 0){
+            $fractions: map-merge($fractions, abs($i) #{$numerator/abs($i)}-#{$denominator/abs($i)});
+        }     
+    }
+    // return map of all fractions
+    @return $fractions;
+}
+
+
+// Grid Columns
+// 
+// Set the grid column widths based on the number of 
+// columns divided by the total number of columns.
+@mixin grid-columns($prefix: null, $suffix: null, $columns: null, $fifths: false, $sevenths: false){
+    @for $i from 1 through $columns{
+        $css-classes: equivalent-fractions($i,$columns);
+        $column-class: null;
+        
+        @each $css-class in $css-classes{
+            $column-class: $column-class, 
+            #{ $prefix }#{ value( $css-class ) }#{ $suffix };
+        }
+        
+        #{$column-class}{
+            width: column-width($i,$columns);
+        }
+    }
+
+    // Add fifths where total columns
+    // doesnt divide into fifths.
+    @if($fifths == true){
+        @for $i from 1 through 5{
+            $fifth_class: #{$prefix}#{$i}+'-5'+ #{$suffix};
+
+            #{$fifth_class}{
+                width: column-width($i,5);
+            }
+        }
+    }
+
+    // Add sevenths where total columns
+    // doesnt divide into fifths.
+    @if($sevenths == true){
+        @for $i from 1 through 7{
+            $seventh_class: #{$prefix}#{$i}+'-7'+ #{$suffix};
+
+            #{$seventh_class}{
+                width: column-width($i,7);
+            }
+        }
+    }
+}
+
+
+// Push Class
+//
+// Set the push classes that will incrementally indent
+// the column by a maximum number of total-columns -1
+@mixin grid-push($prefix: null, $suffix: null, $columns: null){
+    @for $i from 1 through $columns - 1{
+        $css-classes: equivalent-fractions($i,$columns);
+        $push-class: null;
+        
+        @each $css-class in $css-classes{
+            $push-class: $push-class, 
+            #{ $prefix }#{ value($css-class) }#{ $suffix };
+        }
+        
+        #{$push-class}{
+            margin-left: column-width($i,$columns);
+        }
+    }
+}
+
+
+// Omega class
+//
+// An omega declaration that is breakpoint specific
+// Basically it floats an element to the right taking
+// it out of order potentially.
+@mixin grid-omega($prefix: null, $suffix: null){
+    #{$prefix}omega#{$suffix} {
+        float: right;
+    }
+}
+
+
+// Debug 
+//
+// Outputs the current breakpoint name to quickly debug 
+// each breakpoint.
+@mixin grid-debug($breakpoint-name,$debug-bg: #000){
+    body:after{
+        position: fixed;
+        display: block;
+        bottom: 10px;
+        right: 10px;
+        padding: 5px 20px;
+        font-size: 14px;
+        font-weight: bold;
+        color: white;
+        background: $debug-bg;
+        content: "#{$breakpoint-name}";
+    }
+}
+
+
+// Grid Generate
+//
+// Pulls the whole thing together ready for output
+// kept seperate from grid-generate as it is DRYer 
+// this way.
+@mixin grid-generate($grid-args){
+
+    // This solution will ONLY work with libsass and 
+    // sass-list-maps polyfill, will add code for 
+    // sass3.3+ support later
+
+    $grids: map-get-z($grid-args, grids);
+    $column-name: map-get-z($grid-args, config, columnclass);
+    $column-prefix: #{'.' + $column-name};
+    $push-prefix: #{'.' + map-get-z($grid-args, config, pushclass)};
+    $debug-display: map-get-z($grid-args, config, debug);
+
+    @each $grid in $grids{
+        $columns:       map-get(value($grid),columns);
+        $suffix:        map-get(value($grid),suffix);
+        $breakpoint:    map-get(value($grid),breakpoint);
+        $gutter:        map-get(value($grid),gutter);
+
+        // Debug info
+        $debug-bg:      map-get-z(value($grid),debug,background);
+        $debug-name:    map-get-z(value($grid),debug,name);
+
+        // Include the necessary mixins to generate the grids
+
+        @include at-breakpoint($breakpoint){
+            @include grid($gutter);
+            @include grid-no-gutter($column-name,$suffix);
+            //@include grid-equal-height($gutter,$column-name); //Currently disabled
+            @include grid-columns($column-prefix,$suffix,$columns,true, true);
+            @include grid-push($push-prefix, $suffix, $columns);
+            @include grid-omega($column-prefix, $suffix);
+            @if( $debug-display == true ){ 
+                @include grid-debug($debug-name,$debug-bg) 
+            }    
+        }    
+    }
+}

metadata

@@ -0,0 +1,73 @@
+--- !ruby/object:Gem::Specification
+name: gridtacular
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- Rory Ashford
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-10-24 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.7'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.7'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '10.0'
+description: Powerful grid system that fits into your existing workflow.
+email:
+- rory@roikles.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- _gridtacular.scss
+homepage: ''
+licenses:
+- MIT
+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.2.2
+signing_key: 
+specification_version: 4
+summary: Gridtacular — Sass Grid system
+test_files: []