ronin-grid 1.0.0

data/.gitignore

@@ -0,0 +1,4 @@
+*.gem
+.bundle
+Gemfile.lock
+pkg/*

data/Gemfile

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

data/LICENSE.md

@@ -0,0 +1,11 @@
+Copyright (c) 2012 Jonathan Clem
+
+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.
+
+Except as contained in this notice, the name(s) of the above copyright holders shall not be used in advertising or otherwise to promote the sale, use or other dealings in this Software without prior written authorization.
+
+Contributors to this project agree to grant all rights to the copyright holder of the primary product. Attribution is maintained in the source control history of the product.

data/README.md

@@ -0,0 +1,119 @@
+# Ronin
+
+Ronin is a framework for creating responsive web designs with SASS.
+
+---
+
+## Installation
+
+### Rails >= 3.1
+
+In your `Gemfile`:
+
+```ruby
+gem 'ronin-grid' 
+```
+
+Import Ronin into your SASS stylesheets:
+
+```scss
+@import 'ronin-grid';
+```
+
+### Rails < 3.0.x
+
+Install with Rake:
+
+```
+$ rake ronin-grid:install
+```
+
+Import Ronin into your SASS stylesheets:
+
+```scss
+@import 'ronin-grid'
+```
+
+---
+
+## Usage
+
+Given the following HTML:
+
+```html
+<div class='page-container'>
+  <div id='some-content'>
+    <p>Lorem ipsum...</p>
+  </div>
+
+  <div id='more-content'>
+    <p>Lorem ipsum...</p>
+  </div>
+</div>
+```
+
+Apply Ronin's `container` mixin to your content container, and the `cols` mixin to your content:
+
+```scss
+.page-container {
+  @include container;
+}
+
+#some-content {
+  @include cols(6);
+}
+
+#more-content {
+  @include cols(6);
+}
+```
+
+Respond with media queries with ease, writing the queries explicitly or using Ronin's built-in mixins:
+
+```scss
+#some-content {
+  @include cols(6);
+  @media screen and (max-width: 480px) {
+    @include cols(12);
+  }
+}
+
+#more-content {
+  @include cols(6);
+  @include respond-480(12);
+}
+```
+---
+
+## Advanced Usage
+
+Ronin can be used as a starting point for a project-specific framework. The code is well-marked up and easily tailored to a project, and I'm around to provide support on [Twitter][twitter].
+
+---
+
+## About Breakpoints
+
+I'm using the term loosely. "Breakpoint" is usually used to mean the point at which a site's layout breaks and media queries should be used to prevent breakage. I'm using it to mean a point at which adjusting content width would improve readability or usability on a page. 
+
+The [example page][grid_example_page] has a table of Ronin's default breakpoints and how they effect elements using the `cols` mixin.
+
+---
+
+## Limitations
+
+Elements using the `cols` mixin cannot be nested inside of one another.
+
+---
+
+## Author & License
+
+Ronin is by [Jonathan Clem][jonathan_clem].
+
+Copyright (c) 2012, Jonathan Clem
+
+All rights reserved.
+
+Released under a [modified MIT license][license]
+
+[twitter]: http://twitter.com/_clem
+[license]: http://github.com/jclem/ronin-grid/tree/master/LICENSE.md

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/app/assets/stylesheets/_ronin-grid.css.scss

@@ -0,0 +1,4 @@
+@import 'ronin-grid/setup';
+@import 'ronin-grid/grid';
+@import 'ronin-grid/pixel_mixins';
+@import 'ronin-grid/classes';

data/app/assets/stylesheets/ronin-grid/_classes.scss

@@ -0,0 +1,26 @@
+/* Ronin Classes
+ * Use these CSS classes if you do not want to use
+ * Ronin's SASS mixins.
+ *
+ * Advantage: Smaller CSS files.
+ * Disadvantage: Non-semantic markup.
+ */
+
+/* .r-container
+ * Ronin's main container for holding the entire grid.
+ *
+ * Usage:
+ * <div class='r-container'>
+ */
+.r-container { @include container; }
+
+/* .r-cols-n
+ * Specify the number of columns an element should take
+ * occupy.
+ *
+ * Usage:
+ * <div class='r-cols-6'>
+ */
+@for $cols from 1 through $num-columns {
+  .r-cols-#{$cols} { @include cols($cols); }
+}

data/app/assets/stylesheets/ronin-grid/_grid.scss

@@ -0,0 +1,128 @@
+/* Ronin Grid
+ * The main code behind Ronin's grid is here.
+ */
+
+$gutter-width:    ($container-width - $num-columns * $column-width) / $num_columns;   /* Unit-less width of the horizontal gutter between Ronin column elements. */
+$container-px-width:  $container-width * 1px;                                         /* Width of the Ronin container in pixels. */
+$column-px-width:     $column-width * 1px;                                            /* Width of a Ronin column in pixels. */
+$column-pct-width:    ($column-width / $container-width) * 100%;                      /* Width of a Ronin column in percentage. */
+$gutter-px-width:     $gutter-width * 1px;                                            /* Width of a Ronin gutter in pixels. */
+$gutter-pct-width:    ($gutter-width / $container-width) * 100%;                      /* Width of a Ronin gutter in percentage. */
+
+/* container mixin
+ * A container element holds the entire grid layout.
+ *
+ * Usage:
+ * .page-container { @include container; }
+ */
+@mixin container {
+  width: 90%;
+  max-width: $container-px-width + $gutter-px-width;
+  margin: 0 auto;
+
+  /* The next two rules keep the container centered
+   * by shifting it to the left by half the width of a
+   * gutter. Doing this allows us to avoid having a "last"
+   * mixin that would have to be applied to the last element
+   * in every row in the layout.
+   */
+  position: relative;
+  left: $gutter-pct-width / 2;
+
+  /* Ronin uses inline-block for its column elements. Since
+   * inline-blocks are inline elements, they must have word and
+   * letter-spacing adjusted so that newlines in HTML between
+   * column elements are ignored. These values are reset in the cols
+   * mixin.
+   */
+  letter-spacing: -0.31em;
+  *letter-spacing: normal; /* IE < 8 */
+  word-spacing: -0.43em; /* IE < 8 */
+}
+
+@mixin cols($cols:$num-columns) {
+  display: inline-block;
+  zoom: 1; *display: inline; /* IE < 8 */
+  width: $column-pct-width * $cols + $gutter-pct-width * ($cols - 1);
+  margin-right: $gutter-pct-width;
+  margin-bottom: $column-bottom-margin;
+  vertical-align: top;
+
+  /* Reset what is done in the container mixin for inline-block elements. */
+  letter-spacing: normal;
+  word-spacing: normal;
+
+  /* Ronin's default breakpoints and column responses. */
+  @if $auto-respond == true {
+    @if $cols >= 8 {
+      @media screen and (max-width: 1024px) {
+        $cols: 12;
+        width: $column-pct-width * $cols + $gutter-pct-width * ($cols - 1);
+      }
+    }
+
+    @if $cols >= 4 and $cols < 8 {
+      @media screen and (max-width: 1024px) {
+        $cols: 6;
+        width: $column-pct-width * $cols + $gutter-pct-width * ($cols - 1);
+      }
+
+      @media screen and (max-width: 768px) {
+        $cols: 12;
+        width: $column-pct-width * $cols + $gutter-pct-width * ($cols - 1);
+      }
+    }
+
+    @if $cols >= 3 and $cols < 4 {
+      @media screen and (max-width: 1024px) {
+        $cols: 4;
+        width: $column-pct-width * $cols + $gutter-pct-width * ($cols - 1);
+      }
+
+      @media screen and (max-width: 768px) {
+        $cols: 6;
+        width: $column-pct-width * $cols + $gutter-pct-width * ($cols - 1);
+      }
+
+      @media screen and (max-width: 480px) {
+        $cols: 12;
+        width: $column-pct-width * $cols + $gutter-pct-width * ($cols - 1);
+      }
+    }
+
+    @if $cols <= 2 {
+      @media screen and (max-width: 1024px) {
+        $cols: 3;
+        width: $column-pct-width * $cols + $gutter-pct-width * ($cols - 1);
+      }
+
+      @media screen and (max-width: 768px) {
+        $cols: 4;
+        width: $column-pct-width * $cols + $gutter-pct-width * ($cols - 1);
+      }
+
+      @media screen and (max-width: 480px) {
+        $cols: 6;
+        width: $column-pct-width * $cols + $gutter-pct-width * ($cols - 1);
+      }
+    }
+
+    @media screen and (max-width: 479px) {
+      width: 100% - $gutter-pct-width;
+    }
+  }
+}
+
+/* Custom column responses for Ronin's default breakpoints. */
+@if $auto-respond == true {
+  @mixin respond-1024($cols) { @media screen and (max-width: 1024px) { width: $column-pct-width * $cols + $gutter-pct-width * ($cols - 1); } }
+  @mixin respond-768($cols) { @media screen and (max-width: 768px) { width: $column-pct-width * $cols + $gutter-pct-width * ($cols - 1); } }
+  @mixin respond-480($cols) { @media screen and (max-width: 480px) { width: $column-pct-width * $cols + $gutter-pct-width * ($cols - 1); } }
+}
+
+/* Function for simply getting the width (in percentage) of a number
+ * of columns + gutter right-margin.
+ */
+@function cols-width($cols) {
+  @return $column-pct-width * $cols + $gutter-pct-width * ($cols - 1) + $gutter-pct-width;
+}