zen-grids 2.0.0.beta.1 → 2.0.0.beta.2

checksums.yaml

@@ -1,7 +1,7 @@
---- 
-SHA512: 
-  data.tar.gz: 4bcd3b36579863861624becf06b9e2ec0c292477777a948532f91a631ccb6571c8b0934ab5447f2c94b2c1db60f3c7b611a62dfd02406ecfc5e19b891b2e4ab4
-  metadata.gz: 909a24fdc24b64ba0f0687994631ec8ad2c5d35cc927f29cc5d8678be9e1c4c2c8f3398c60a31bfb8a334b5b77fc53af78804062990a2b8e0b86444dfeb04ecc
-SHA1: 
-  data.tar.gz: a547ac3da8ebf402ba5f46533a9fceed2dc528d3
-  metadata.gz: bda18f918d4cfac0b8b0b92eff76acf901a0bff6
+---
+SHA1:
+  metadata.gz: 81cf49e11ba72b0297fa7c6a7d343461a04cd7fb
+  data.tar.gz: 9cbeb9c3da2580d011d7a3b6e999b0eb0deea43a
+SHA512:
+  metadata.gz: 6838aa469c56c868073050b99c6f964d0fdc58558ef65090045d74e23a87b8ab17777ffc24333a31b60c6e1746e6acaab666566992c9717f7d82c867ae8b6e3b
+  data.tar.gz: bcaa65d2fedf337c2d05de9d9281dd394a558d77a613acf21b09531aabfbc146f395e6845f2ff416f88f75abb1c474c2b0176edab6d6db4725f6bd17c88f894d

data/.travis.yml

@@ -0,0 +1,13 @@
+# Configuration options are documented at:
+# http://about.travis-ci.org/docs/user/languages/ruby/
+language: ruby
+bundler_args: --without development
+rvm:
+  - 1.9.3
+  - 2.0.0
+gemfile:
+  - tests/Gemfile
+branches:
+  only:
+    - master
+script: cd tests; bundle exec rake

data/README.md

@@ -0,0 +1,81 @@
+# About Zen Grids
+
+Zen Grids is an intuitive, flexible grid system that leverages the natural source order of your content to make it easier to create fluid responsive designs. With an easy-to-use Sass mixin set, the Zen Grids system can be applied to an infinite number of layouts, including responsive, adaptive, fluid and fixed-width layouts.
+
+More information can be found at http://next.zengrids.com
+
+
+## USAGE
+
+Here's a simple example: a content column with a sidebar on each side, aligned to a 12 column grid.
+
+```scss
+  @import "zen-grids";
+
+  $zen-gutters: 40px;  // Set the gutter size. A half-gutter is used on
+                       // each side of each column.
+
+  .container {
+    @include zen-grid-container();  // Define the container for your grid items.
+  }
+
+  $zen-columns: 12;  // Set the number of grid columns to use in this media
+                     // query. You'll likely want a different grid for
+                     // different screen sizes.
+
+  @media all and (min-width: 50em) {
+    .sidebar1 {
+      @include zen-grid-item(3, 1);   // Span 3 columns starting in 1st column.
+    }
+    .content {
+      @include zen-grid-item(6, 4);   // Span 6 columns starting in 4th column.
+    }
+    .sidebar2 {
+      @include zen-grid-item(3, 10);  // Span 3 columns starting in 10th column.
+    }
+  }
+```
+
+Within the `.container` element, the `.sidebar1`, `.sidebar2` and `.content` elements can be in any order.
+
+Zen Grids has built-in support for the Box-sizing Polyfill which adds `box-sizing: border-box` support to IE7 and earlier.
+
+* Download the polyfill at https://github.com/Schepp/box-sizing-polyfill
+* Place the `boxsizing.htc` file in your website.
+* Set Zen Grids' `$box-sizing-polyfill-path` variable to the absolute path to the boxsizing.htc file on your website. For example: `$box-sizing-polyfill-path: "/scripts/polyfills/boxsizing.htc";`
+
+
+## INSTALLATION
+
+Zen grids is distributed as a Ruby Gem. On your computer, simply run:
+
+```sh
+sudo gem install zen-grids
+```
+
+If you are using Compass (and you should!) then you can add it to an existing project by editing the project's configuration file, config.rb, and adding this line:
+
+```ruby
+require 'zen-grids'
+```
+
+You can then start using Zen Grids in your Sass files. Just add this line to one of your .sass or .scss files and start creating!
+
+```scss
+@import "zen-grids";
+```
+
+
+## REQUIREMENTS
+
+* Sass 3.3.0 or later
+
+For the zen-grids/background module only:
+* Compass 1.0.0.alpha.13 or later
+
+
+## LICENSE
+
+Available under the GPL v2 license. See [LICENSE.txt](https://github.com/JohnAlbin/zen-grids/blob/master/LICENSE.txt).
+
+[![Build Status](https://travis-ci.org/JohnAlbin/zen-grids.png?branch=master)](https://travis-ci.org/JohnAlbin/zen-grids)

data/bower.json

@@ -1,25 +1,27 @@
 {
   "name"        : "zen-grids",
-  "location"    : "JohnAlbin/zen-grids",
+  "version"     : "2.0.0-beta.2",
+  "homepage"    : "http://zengrids.com",
+  "author"      : ["John Albin Wilkins"],
   "description" : "Zen Grids is an intuitive, flexible grid system to create responsive, adaptive, fluid and fixed-width layouts.",
-  "keywords"    : "Sass, Compass, grids, rwd",
-
   "main"        : [
     "_zen-grids.scss",
     "zen-grids/_background.scss",
     "zen-grids/_flow.scss",
     "zen-grids/_grids.scss"
   ],
+  "keywords"    : [
+    "Sass",
+    "Compass",
+    "grids",
+    "rwd"
+  ],
+  "license"     : "GPLv2",
   "ignore"      : [
+    "zen-grids.gemspec",
+    "sache.json",
     "lib",
     "templates",
-    "zen-grids.gemspec"
-  ],
-
-  "licenses"    : {
-    "type": "GPLv2",
-    "url": "http://www.gnu.org/licenses/gpl-2.0.html"
-  }
-  "authors"     : ["John Albin Wilkins"],
-  "homepage"    : "http://zengrids.com/"
+    "tests"
+  ]
 }

data/sache.json

@@ -0,0 +1,5 @@
+{
+  "name": "zen-grids",
+  "description": "Zen Grids is an intuitive, flexible grid system that leverages the natural source order of your content to make it easier to create fluid responsive designs. With an easy-to-use Sass mixin set, the Zen Grids system can be applied to an infinite number of layouts, including responsive, adaptive, fluid and fixed-width layouts.",
+  "tags": ["layout", "grid", "rwd", "responsive-web-design"]
+}

data/templates/project/_base-elements.scss

@@ -0,0 +1,22 @@
+/**
+ * @file
+ * Base HTML element styles.
+ */
+
+html {
+  font-size:   $base-font-size;
+  line-height: $base-line-height;
+}
+
+body {
+  margin: 0;
+}
+
+h1,
+h2,
+p {
+  margin: {
+    top:    $vertical-rhythm;
+    bottom: $vertical-rhythm;
+  }
+}

data/templates/project/_components.scss

@@ -0,0 +1,73 @@
+/**
+ * @file
+ * Component styles.
+ */
+
+/* Skip link styling */
+.skip-link {
+  margin: 0;
+}
+.skip-link__link {
+  display: block;
+  width: 100%;
+  padding: 2px 0 3px 0;
+  text-align: center;
+
+  &,
+  &:visited {
+    color: #fff;
+    background-color: #666;
+  }
+
+  /* The skip-link link will be completely hidden until a user tabs to the link. */
+  @media all and (min-width: 444px) {
+    @include visually-focusable();
+  }
+}
+
+/* Source-order meta info */
+.meta {
+  margin: 0 0 .5rem 0;
+  display: block;
+  + * {
+    margin-top: 0;
+  }
+  font-family: sans-serif;
+  font-size: 1rem;
+  line-height: 1rem;
+}
+%meta__child {
+  display: inline;
+  font-style: normal;
+  line-height: 1rem;
+}
+.meta__heading {
+  @extend %meta__child;
+  font-size: 1rem;
+  font-weight: bold;
+}
+.meta__data {
+  @extend %meta__child;
+  font-size: 0.8rem;
+  font-weight: normal;
+//  text-transform: uppercase;
+  color: #c00;
+}
+
+/* Pull-quotes */
+.pull-quote {
+  @include zen-float();
+  @include zen-flow-item-width(1, 2);
+
+  margin: {
+    bottom: $vertical-rhythm/2;
+  }
+
+  font-size: 1.2em;
+  font-weight: bold;
+  font-style: italic;
+
+  @media all and (min-width: 999px) {
+    @include zen-flow-item-width(1, 3);
+  }
+}

data/templates/project/_init.scss

@@ -1,18 +1,28 @@
 //
 // @file
-// This file sets up all our variables and load all the modules we need for all
+// This file sets up all our variables and loads all the modules we need for all
 // generated CSS in this project. To use it, simply: @import "init";
 //
 
-// Legacy browser variables for Compass.
-$legacy-support-for-ie6           : false;
-$legacy-support-for-ie7           : false;
+// Supported browsers variable for Compass.
+$browser-minimum-versions: (
+  'chrome':  null,
+  'firefox': null,
+  'ie':      "8",
+  'safari':  null,
+  'opera':   null
+);
 
 // Set up Zen Grids.
 $zen-columns                      : 1;
 $zen-gutters                      : 20px;
 $zen-auto-include-grid-item-base  : false;
 
+// Set up a unit of vertical rhythm.
+$base-font-size                   : 16px;
+$base-line-height                 : 1.5em;
+$vertical-rhythm                  : 1rem*($base-line-height/1em);
+
 //
 // Import our modules.
 //

data/templates/project/_layouts.scss

@@ -0,0 +1,143 @@
+/**
+ * @file
+ * Layout styles.
+ *
+ * We use example breakpoints of 27em, 41em, 49em, 63em and 69px. The right
+ * breakpoints to use for your site depend on your content.
+ * We use example breakpoints of 444px, 666px, 777px, 999px and 1111px. The
+ * right breakpoints to use for your site depend on your content.
+ */
+
+/* The container for our grid items. */
+.l-basic {
+  @include zen-grid-container();
+  @include zen-grid-background();
+  // Center the layout and ensure it doesn't grow too wide.
+  margin: {
+    left:  auto;
+    right: auto;
+  }
+  // Add some padding so we can see the grid background numbers more easily.
+  padding: {
+    top:   $vertical-rhythm;
+    bottom: $vertical-rhythm;
+  }
+  max-width: 1111px;
+}
+
+$zen-columns: 1;
+
+/* Mobile layout; all grid items are one column wide. */
+.l-basic__header,
+.l-basic__main,
+.l-basic__menu,
+.l-basic__content,
+.l-basic__aside1,
+.l-basic__aside2,
+.l-basic__footer {
+  /* Set the shared properties for all grid items. */
+  /* Note: we set $zen-auto-include-grid-item-base to false in _init.scss. */
+  @include zen-grid-item-base();
+}
+
+/* "main" is a grid-item (of .l-basic) that is also a nested grid container. */
+.l-basic__main {
+  @include zen-grid-container(grid-item);
+}
+
+/* Horizontal navigation bar */
+@media all and (min-width: 444px) {
+  $navbar-height: 5em;
+
+  .l-basic__main {
+    padding-top: $navbar-height;
+  }
+  .l-basic__menu {
+    @include zen-grid-item(1, 1);
+    margin-top: -$navbar-height;
+    height: $navbar-height;
+  }
+}
+
+$zen-columns: 2;
+@media all and (min-width: 444px) and (max-width: 665px) {
+  .l-basic {
+    @include zen-grid-background(); // Show the new 2-column background grid image.
+  }
+  .l-basic__content {
+    @include zen-grid-item(2, 1);
+  }
+  .l-basic__aside1 {
+    @include zen-new-row(); // Clear left-floated elements (.l-basic__content)
+    @include zen-grid-item(1, 1);
+  }
+  .l-basic__aside2 {
+    @include zen-grid-item(1, 2);
+  }
+}
+
+@media all and (min-width: 444px) {
+  .l-basic__columns {
+    @include zen-grid-container(flow);
+  }
+  .l-basic__col1,
+  .l-basic__col2 {
+    @include zen-grid-item-base();
+    margin: {
+      top: 0;
+      bottom: 0;
+    }
+  }
+  .l-basic__col1 {
+    @include zen-grid-item(1, 1);
+  }
+  .l-basic__col2 {
+    @include zen-grid-item(1, 2);
+  }
+}
+
+$zen-columns: 3;
+@media all and (min-width: 666px) and (max-width: 998px) {
+  .l-basic {
+    @include zen-grid-background(); // Show the new 3-column background grid image.
+  }
+  .l-basic__content {
+    @include zen-grid-item(2, 1);
+  }
+  .l-basic__aside1 {
+    @include zen-grid-item(1, 1, right); // Position from the right
+  }
+  .l-basic__aside2 {
+    @include zen-new-row(); // Clear left-floated elements (.l-basic__content)
+    @include zen-grid-item(2, 1);
+  }
+}
+
+@media all and (min-width: 777px) and (max-width: 998px) {
+  .l-basic__aside2 {
+    @include zen-new-row(right); // Clear right-floated elements (.l-basic__aside1)
+    @include zen-grid-item(1, 1, right);
+  }
+}
+
+$zen-columns: 5;
+@media all and (min-width: 999px) {
+  .l-basic {
+    @include zen-grid-background(); // Show the new 5-column background grid image.
+  }
+  .l-basic__content {
+    @include zen-grid-item(3, 2);
+  }
+  .l-basic__aside1 {
+    @include zen-grid-item(1, 1);
+  }
+  .l-basic__aside2 {
+    @include zen-grid-item(1, 5);
+  }
+  .l-basic__col1 {
+    @include zen-grid-item(2, 1, $columns: 3);
+  }
+  .l-basic__col2 {
+    @include zen-grid-item(1, 3, $columns: 3);
+  }
+}

data/templates/project/_visually-hidden.scss

@@ -1,6 +1,6 @@
 //
 // @file
-// Accessibility features.
+// This is an accessibility module.
 //
 
 // As defined by http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
@@ -9,7 +9,7 @@
   height: 1px;
   width: 1px;
   overflow: hidden;
-  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+  @if support-legacy-browser(ie, "7") {
     clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax.
   }
   clip: rect(1px, 1px, 1px, 1px);
@@ -33,19 +33,3 @@
     @include visually-hidden-off();
   }
 }
-
-// Placeholder styles for use with @extend.
-%visually-hidden {
-  @include visually-hidden();
-}
-%visually-hidden-off {
-  @include visually-hidden-off();
-}
-%visually-focusable {
-  @extend %visually-hidden;
-
-  &:active,
-  &:focus {
-    @extend %visually-hidden-off;
-  }
-}