modular-grid 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 22c72528a86637044492bde9d9f029e61ff04220
+  data.tar.gz: a561bbde2c54e6a16e503c694770369595616d07
+SHA512:
+  metadata.gz: ad5ff7ee652b9100afa8cb28770558bcdbff212d994b58c417fe8795e6120ef34ed5008ce5baeeb11847cdc87512470706da2e04e01ed093d41b2916aa917e0a
+  data.tar.gz: 4933779410122a60b8c165881e7e27a48a1fbc24be800bc2e70f817bd0ce3425a84a9e042502802a970318d8925f0a6fb1cff0dee0468275a262c74b941180ed

data/.gitignore

@@ -0,0 +1,20 @@
+*.gem
+*.rbc
+.sass-cache
+node_modules
+.bundle
+.config
+coverage
+InstalledFiles
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp
+
+# YARD artifacts
+.yardoc
+_yardoc
+doc/

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in modular.gemspec
+gemspec

data/Gruntfile.coffee

@@ -0,0 +1,81 @@
+
+module.exports = (grunt)->
+  version = ->
+    grunt.file.readJSON("package.json").version
+  version_text = ->
+    "v#{version()}"
+
+  repo = "https://github.com/dylan/modular"
+
+  grunt.initConfig
+    pkg: grunt.file.readJSON("package.json")
+    repo: repo
+
+    comments: """
+/*
+// <%= pkg.name %>
+// v<%= pkg.version %>
+// Built on <%= grunt.template.today("yyyy-mm-dd") %>
+// Full source at <%= repo %>
+//
+// MIT License, <%= repo %>/blob/master/LICENSE
+// This file is generated by `grunt build` do not edit it by hand.
+*/\n
+"""
+    minified_comments: "/* <%= pkg.name %> v<%= pkg.version %>, MIT License <%= repo %>/blob/master/LICENSE */"
+
+    sass:
+      dist:
+        files:
+          'css/modular.css':'app/assets/stylesheets/dist.scss'
+          'example/example.css':'example/example.scss'
+
+    express:
+      all:
+        options:
+          hostname: '*'
+          port: 3000
+          bases: 'example'
+
+    open:
+      all:
+        path: 'http://localhost:<%= express.all.options.port %>'
+
+    cssmin:
+      minify:
+        expand: true
+        options:
+          banner: '<%= minified_comments %>'
+        cwd: 'css/'
+        src: ['*.css','!*.min.css']
+        dest: 'css/'
+        ext: '.min.css'
+
+    watch:
+      scripts:
+        files: ['app/assets/stylesheets/*.scss','app/assets/stylesheets/*/*.scss','example/*.scss','example/*.html']
+        tasks: ['build']
+        options:
+          livereload: true
+
+    clean:
+      dist: ['.sass-cache','css/*']
+
+    concat:
+      options:
+        banner: '<%= comments %>'
+      css:
+        src: ['css/modular.css']
+        dest: 'css/modular.css'
+
+
+  grunt.loadNpmTasks 'grunt-express'
+  grunt.loadNpmTasks 'grunt-open'
+  grunt.loadNpmTasks 'grunt-notify'
+  grunt.loadNpmTasks 'grunt-contrib-sass'
+  grunt.loadNpmTasks 'grunt-contrib-cssmin'
+  grunt.loadNpmTasks 'grunt-contrib-concat'
+
+  grunt.registerTask 'default', ['build']
+  grunt.registerTask 'build',   ['sass','cssmin','concat']
+  grunt.registerTask 'server',  ['build','express','open','watch']

data/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2013 Dylan Wreggelsworth
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,34 @@
+Modular Grid System
+======
+
+
+### Usage
+* Drop ```_modular.scss``` and the ```grid``` folder into your assets folder. Then overwrite any options and ```@import 'modular';```.
+* Initially the grid system has six columns, you can change this in ```grid/_defaults.scss```
+* An element's width can be defined with the classes ```.m1``` through ```.m6``` (m6 being 100% width).
+* To define an element's width at several resolutions you extend or use like so: ```.m6-3-1```. The first number is the mobile width, the second is the tablet size, the last is the desktop size. So our module with ```.m6-3-1``` will be full screen width for mobile, half screen width for tablets, and take up 1/6th width for desktop users.
+* You can also use a value of 0 to hide an element at that particular resolution.
+* In order to create a complete row you need to extend or use classes so that the total size at each resolution equals the column count. (in this case 6)
+* You can push things from the left by using the ```.l#``` or ```.l#-#-#``` classes. You can also keep rows clear by using ```.r#``` or ```.r#-#-#```to add right margin.
+* If you want to corral the little modules and put them in a nice bucket ```@extend %container``` will give the element a nice width with good margins for the three sizes.
+
+**Example:**
+These two divs will constitute a row at all three resolutions.
+
+```
+<div class="m2-4-4">
+I'm 2 columns wide at mobile size, and 4 columns wide at other resolutions.
+</div>
+<div class="m4-2-2">
+I'm 4 columns wide at mobile size, and 2 columns wide at other resolutions.
+</div>
+```
+
+### TODO
+* Create a gem for easy install.
+* Add the ability to leave off numbers and have it just assume the remaining widths are the last value
+* Work on the unrolling the loops or something to make the code more legible/faster.
+* Create Stylus and Less versions.
+
+### Attribution
+This was kindly open-sourced by [Groopt Inc.](http://groopt.com) in October of 2013.

data/Rakefile

@@ -0,0 +1,4 @@
+require 'rubygems'
+require 'bundler'
+
+Bundler::GemHelper.install_tasks

data/app/assets/stylesheets/_modular.scss

@@ -0,0 +1,2 @@
+@import 'grid/render',
+        'grid/utils/reset';

data/app/assets/stylesheets/dist.scss

@@ -0,0 +1,4 @@
+$modular-render: true;
+$modular-debug: true;
+
+@import 'modular';

data/app/assets/stylesheets/grid/_container.scss

@@ -0,0 +1,23 @@
+@import 'utils/media';
+
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  *zoom: 1;
+  @include media(iphone) {
+    width: 100%;
+  }
+  @include media(ipad) {
+    width: 768px;
+  }
+  @include media {
+    width: 1020px;
+  }
+  &:before, &:after {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
+}

data/app/assets/stylesheets/grid/_debug.scss

@@ -0,0 +1,40 @@
+@if $modular-debug == true {
+  .debug {
+    text-align: center;
+    line-height: 2.5em;
+    font-weight: 300;
+    color: #fff;
+    * {
+      $border-color:rgba(255,255,255,0.25);
+      box-shadow: inset 0 -2px 0 $border-color, inset 2px 0 0 $border-color;
+      @include media(iphone)  {
+        background-color: #2A3A48;
+        color: #FAFAFF;
+      }
+      @include media(ipad)    {
+        background-color: #3E6372;
+        color: #FAFAFF;
+      }
+      @include media(desktop) {
+        background-color: #B2D4DC;
+        color: #2A3A48;
+      }
+      -webkit-transition: background-color 1s ease-in-out;
+      -moz-transition:    background-color 1s ease-in-out;
+      transition:         background-color 1s ease-in-out;
+      height: 60px;
+      position: relative;
+      display:block;
+      &:before {
+        content: "class=\""attr(class)"\"";
+        position: absolute;
+        font-size: 13px;
+        line-height:1em;
+        bottom: 2px;
+        right: 0;
+        padding: 4px 8px;
+        background-color: rgba(255,255,255,0.25);
+      }
+    }
+  }
+}

data/app/assets/stylesheets/grid/_defaults.scss

@@ -0,0 +1,25 @@
+//What we prefix all our modules classes with.
+$modular-prefix: m !default;
+
+//What we call our classes that push things to the left.
+$modular-left-prefix: l !default;
+
+//What we call our classes that push things to the right.
+$modular-right-prefix: r !default;
+
+//Don't jack this up too high, you'll have exponentially longer render times.
+$modular-max-cols: 6 !default;
+
+//Render classes instead of extend-only selectors?
+$modular-render: false !default;
+
+//Render debug classes?
+$modular-debug: false !default;
+
+// Leave gutters between modules.
+$show-gutters: false !default;
+
+//Divide up our row into columns.
+$colWidth: 100/$modular-max-cols * 1%;
+
+

data/app/assets/stylesheets/grid/_margin.scss

@@ -0,0 +1,7 @@
+// Make the module shift from the left a certain amount.
+@mixin left-properties($amt:1) {
+  margin-left: $colWidth * $amt;
+}
+@mixin right-properties($amt:1) {
+  margin-right: $colWidth * $amt;
+}

data/app/assets/stylesheets/grid/_module.scss

@@ -0,0 +1,16 @@
+//
+// Thehe properties that makes an element a module.
+//
+@mixin module-properties {
+  float: left;
+  padding: 0 8px;
+  min-height: 1px;
+}
+
+@mixin module-width($amt:1) {
+  width: $colWidth * $amt;
+}
+
+@mixin visible-gutters {
+  background-clip: padding-box;
+}

data/app/assets/stylesheets/grid/_render.scss

@@ -0,0 +1,122 @@
+@import 'defaults',
+        'container',
+        'module',
+        'margin',
+        'utils/media',
+        'debug';
+
+$modules: ();
+
+$dec-type: unquote("%");
+@if $modular-render == true {
+  $dec-type: unquote(".");
+}
+
+@for $i from 1 through $modular-max-cols {
+//Generate a pool of classes for later use.
+  $modules: append($modules,unquote("#{$dec-type}#{$modular-prefix}#{$i}"),comma) !global;
+  #{$dec-type}#{$modular-prefix}#{$i} { @include module-width($i); }
+}
+
+@for $i from 1 through $modular-max-cols {
+  #{$dec-type}#{$modular-left-prefix}#{$i} { @include left-properties($i); }
+}
+
+@for $i from 1 through $modular-max-cols {
+  #{$dec-type}#{$modular-right-prefix}#{$i} { @include right-properties($i); }
+}
+
+
+
+//
+//TODO Figgr' out how to optimize these loops.
+//
+
+@include media(iphone) {
+  $iphone-subClasses: ();
+  $left-iphone-subClasses: ();
+  $right-iphone-subClasses: ();
+  @for $i from 0 through $modular-max-cols {
+    $iphone-subClasses: null;
+    $left-iphone-subClasses: null;
+    $right-iphone-subClasses: null;
+    @for $j from 0 through $modular-max-cols {
+      @for $k from 0 through $modular-max-cols {
+        @if $i == $j and $j == $k {
+        } @else {
+          $iphone-subClasses:       append($iphone-subClasses,       unquote("#{$dec-type}#{$modular-prefix}#{$i}-#{$j}-#{$k}"), comma);
+          $left-iphone-subClasses:  append($left-iphone-subClasses,  unquote("#{$dec-type}#{$modular-left-prefix}#{$i}-#{$j}-#{$k}"), comma);
+          $right-iphone-subClasses: append($right-iphone-subClasses, unquote("#{$dec-type}#{$modular-right-prefix}#{$i}-#{$j}-#{$k}"), comma);
+          //Add the variable sized modules to the pool.
+          $modules: append($modules, unquote("#{$dec-type}#{$modular-prefix}#{$i}-#{$j}-#{$k}"),comma) !global;
+        }
+      }
+    }
+    @if $i == 0 {
+      #{$iphone-subClasses} { display: none }
+    } @else {
+      #{$iphone-subClasses} { @include module-width($i); }
+    }
+    #{$left-iphone-subClasses}  { @include left-properties($i); }
+    #{$right-iphone-subClasses} { @include right-properties($i); }
+  }
+}
+
+@include media(ipad) {
+  $ipad-subClasses: ();
+  $left-ipad-subClasses: ();
+  $right-ipad-subClasses: ();
+  @for $i from 0 through $modular-max-cols {
+    $ipad-subClasses: null;
+    $left-ipad-subClasses: null;
+    $right-ipad-subClasses: null;
+    @for $j from 0 through $modular-max-cols {
+      @for $k from 0 through $modular-max-cols {
+        @if $i == $j and $j == $k {
+        } @else {
+          $ipad-subClasses:       append($ipad-subClasses,       unquote("#{$dec-type}#{$modular-prefix}#{$k}-#{$i}-#{$j}"), comma);
+          $left-ipad-subClasses:  append($left-ipad-subClasses,  unquote("#{$dec-type}#{$modular-left-prefix}#{$k}-#{$i}-#{$j}"), comma);
+          $right-ipad-subClasses: append($right-ipad-subClasses, unquote("#{$dec-type}#{$modular-right-prefix}#{$k}-#{$i}-#{$j}"), comma);
+        }
+      }
+    }
+    @if $i == 0 {
+      #{$ipad-subClasses} { display: none }
+    } @else {
+      #{$ipad-subClasses} { @include module-width($i); }
+    }
+    #{$left-ipad-subClasses}  { @include left-properties($i); }
+    #{$right-ipad-subClasses} { @include right-properties($i); }
+  }
+}
+
+@include media {
+  $desktop-subClasses: ();
+  $left-desktop-subClasses: ();
+  $right-desktop-subClasses: ();
+  @for $i from 0 through $modular-max-cols {
+    $desktop-subClasses: null;
+    $left-desktop-subClasses: null;
+    $right-desktop-subClasses: null;
+    @for $j from 0 through $modular-max-cols {
+      @for $k from 0 through $modular-max-cols {
+        @if $i == $j and $j == $k {
+        } @else {
+          $desktop-subClasses:        append($desktop-subClasses,       unquote("#{$dec-type}#{$modular-prefix}#{$j}-#{$k}-#{$i}"), comma);
+          $left-desktop-subClasses:   append($left-desktop-subClasses,  unquote("#{$dec-type}#{$modular-left-prefix}#{$j}-#{$k}-#{$i}"), comma);
+          $right-desktop-subClasses:  append($right-desktop-subClasses, unquote("#{$dec-type}#{$modular-right-prefix}#{$j}-#{$k}-#{$i}"), comma);
+        }
+      }
+    }
+    @if $i == 0 {
+      #{$desktop-subClasses} { display: none }
+    } @else {
+      #{$desktop-subClasses} { @include module-width($i); }
+    }
+    #{$left-desktop-subClasses}   { @include left-properties($i); }
+    #{$right-desktop-subClasses}  { @include right-properties($i); }
+  }
+}
+
+// Make all the modules act like modules...
+#{$modules} { @include module-properties; }

data/app/assets/stylesheets/grid/utils/_media.scss

@@ -0,0 +1,12 @@
+//
+// This will surround it's contents with an
+// appropriate media query.
+//
+// @type {iphone,ipad,desktop}
+//
+@mixin media($type:desktop){
+  @if       $type == iphone            { @media (max-width: 767px)                                            { @content } }
+  @else if  $type == ipad              { @media (min-width: 768px) and (max-width: 1019px)                    { @content } }
+  @else if  $type == desktop           { @media (min-width: 1020px)                                           { @content } }
+  @else if  $type == retina            { @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @content } }
+}

data/app/assets/stylesheets/grid/utils/_reset.scss

@@ -0,0 +1,12 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+* {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  @if $show-gutters == true {
+    background-clip: content-box;
+  }
+}