ezy 0.2.9 → 0.3.0.beta

data/templates/project/assets/sass/core/_layouts.scss

@@ -0,0 +1,88 @@
+// ------------------------------------
+// Layouts
+
+// ------------------------------------
+// Number of columns on different screen sizes
+
+$columns-mobile   : 4;
+$columns-tablet   : 8;
+$columns-desktop  : 12;
+
+// ------------------------------------
+// Grid settings
+
+$column-width   : 60px;
+$gutter-width   : 20px;
+$grid-padding   : 10px;
+$total-columns  : $columns-mobile; // mobile first
+$is-fluid       : true;
+
+// ------------------------------------
+// Breakpoint settings
+
+// Selector for browsers not supporting media queries
+// (IE8 and down)
+$legacy-selector: ".no-media-queries";
+
+// ------------------------------------
+// Defining media query breakpoints
+
+$breakpoint-tablet  : set-breakpoint( $min: grid-width( $columns-mobile ) + 1 );
+$breakpoint-desktop : set-breakpoint( $min: grid-width( $columns-tablet ) + 1, $legacy-support: true ); // Default for old IE
+
+// ------------------------------------
+// Defining grid layouts
+
+$mobile  : set-layout( $total-columns, $grid-padding ); // mobile first
+$tablet  : set-layout( $columns-tablet, $at-breakpoint: $breakpoint-tablet );
+$desktop : set-layout( $columns-desktop, $at-breakpoint: $breakpoint-desktop );
+
+// ------------------------------------
+// Initializing grid for cleaner output
+
+@include grid-init();
+
+// ------------------------------------
+// Grid layouts
+
+.page {
+  @include each-layout {
+    @include master;
+  }
+}
+
+.grid {
+  @include each-layout {
+    @include container;
+  }
+}
+
+.small {
+  @include span-columns( 2 );       // 2 of 4 columns on mobile
+  @include at-layout( $tablet ) {
+    @include span-columns( 2 );     // 2 of 8 columns on tablet
+  }
+  @include at-layout( $desktop ) {
+    @include span-columns( 3 );     // 3 of 12 columns on desktop
+  }
+}
+
+.medium {
+  @include span-columns( 4 );       // 4 of 4 columns on mobile
+  @include at-layout( $tablet ) {
+    @include span-columns( 4 );     // 4 of 8 columns on tablet
+  }
+  @include at-layout( $desktop ) {
+    @include span-columns( 6 );     // 6 of 12 columns on desktop
+  }
+}
+
+.large {
+  @include span-columns( 4 );       // 4 of 4 columns on mobile
+  @include at-layout( $tablet ) {
+    @include span-columns( 8 );     // 8 of 8 columns on tablet
+  }
+  @include at-layout( $desktop ) {
+    @include span-columns( 12 );    // 12 of 12 columns on desktio
+  }
+}

data/templates/project/assets/sass/core/_settings.scss

@@ -0,0 +1,2 @@
+// ------------------------------------
+// Project settings

data/templates/project/assets/sass/lib/_normalize.scss

@@ -0,0 +1,396 @@
+/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined in IE 8/9.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * Correct `inline-block` display not defined in IE 8/9.
+ */
+
+audio,
+canvas,
+video {
+  display: inline-block;
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+[hidden] {
+  display: none;
+}
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+  outline: thin dotted;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari 5, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Correct font family set oddly in Safari 5 and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, serif;
+  font-size: 1em;
+}
+
+/**
+ * Improve readability of pre-formatted text in all browsers.
+ */
+
+pre {
+  white-space: pre-wrap;
+}
+
+/**
+ * Set consistent quote types.
+ */
+
+q {
+  quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari 5.
+ */
+
+figure {
+  margin: 0;
+}
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * 1. Correct font family not being inherited in all browsers.
+ * 2. Correct font size not being inherited in all browsers.
+ * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+ */
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+  line-height: normal;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * 1. Address box sizing set to `content-box` in IE 8/9.
+ * 2. Remove excess padding in IE 8/9.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+
+textarea {
+  overflow: auto; /* 1 */
+  vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

data/templates/project/assets/sass/partials/_sprite-examples.scss

@@ -0,0 +1,43 @@
+// ------------------------------------
+// Sprite examples
+
+// ------------------------------------
+// Create sprite
+
+@include make-sprite(
+  $name: "test",
+  $folder: "test-sprite",
+  $folder-retina: "test-sprite@2x"
+);
+
+// ------------------------------------
+// Use sprite
+
+.classic {
+  @include background-sprite( "test", "classic" );
+  width: 152px;
+  height: 135px;
+}
+
+.indy {
+  @include background-sprite(
+    $name: "test",
+    $image: "indy"
+  );
+  width: 128px;
+  height: 140px;
+}
+
+// ------------------------------------
+// Not using retina: this particular 
+// image doesn't exist as a retina asset
+
+.alien {
+  @include background-sprite(
+    $name: "test",
+    $image: "alien",
+    $use-retina: false
+  );
+  width: 159px;
+  height: 141px;
+}

data/templates/project/assets/sass/screen.scss

@@ -0,0 +1,17 @@
+// ------------------------------------
+// Imports
+
+// Import external frameworks
+@import "compass";
+@import "ezy";
+
+// CSS Reset
+@import "lib/normalize";
+
+// Core styles
+@import "core/settings";
+@import "core/base";
+@import "core/layouts";
+
+// Style partials
+@import "partials/sprite-examples";

data/templates/project/index.html

@@ -1,38 +1,98 @@
 <!DOCTYPE html>
-<!--[if lt IE 7]>      <html class="no-js no-media-queries ie6"> <![endif]-->
-<!--[if IE 7]>         <html class="no-js no-media-queries ie7"> <![endif]-->
-<!--[if lt IE 9]>      <html class="no-media-queries"> <![endif]-->
+<!--[if lt IE 7]>      <html class="no-js no-media-queries ie6 lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js no-media-queries ie7 lt-ie9 lt-ie8"> <![endif]-->
+<!--[if lt IE 9]>      <html class="no-media-queries ie8 lt-ie9"> <![endif]-->
 <!--[if gt IE 8]><!--> <html> <!--<![endif]-->
   <head>
     <meta charset="utf-8">
 
-    <title>Ezy Grid</title>
+    <title>Go Ezy</title>
 
-    <meta name="description" content="Getting started with Ezy Grid">
+    <meta name="description" content="Getting started with Ezy">
     <meta name="viewport" content="width=device-width">
 
-    <link href="css/demo.css" rel="stylesheet">
+    <link href="assets/css/screen.css" rel="stylesheet">
+
+    <!--[if lt IE 9]>
+      <script src="javascripts/lib/html5shiv-3.6.2.js"></script>
+    <![endif]-->
 
   </head>
   <body>
   
-  <div class="page">
-    <div class="grid">
-      <div class="column">
-        brew ale, bottle conditioning alcohol saccharification wort chiller. bottom fermenting yeast hand pump bunghole original gravity. bung conditioning ibu all-malt hoppy ipa?
-      </div>
-      <div class="column">
-        brew ale, bottle conditioning alcohol saccharification wort chiller. bottom fermenting yeast hand pump bunghole original gravity. bung conditioning ibu all-malt hoppy ipa?
-      </div>
-      <div class="column">
-        brew ale, bottle conditioning alcohol saccharification wort chiller. bottom fermenting yeast hand pump bunghole original gravity. bung conditioning ibu all-malt hoppy ipa?
-      </div>
-      <div class="column">
-        brew ale, bottle conditioning alcohol saccharification wort chiller. bottom fermenting yeast hand pump bunghole original gravity. bung conditioning ibu all-malt hoppy ipa?
-      </div>
-      <div class="column">
-        brew ale, bottle conditioning alcohol saccharification wort chiller. bottom fermenting yeast hand pump bunghole original gravity. bung conditioning ibu all-malt hoppy ipa?
+    <article>
+      <h1>Grids</h1>
+
+      <div class="page">
+        <div class="grid">
+          <div class="small">
+            <h3>Small</h3>
+            <p>Literally bitters beard deep v, mumblecore hella trust fund irony esse. Terry Richardson tousled duis, id trust fund irony roof party Tumblr Carles Thundercats fanny pack typewriter swag.</p>
+          </div>
+          <div class="small">
+            <h3>Small</h3>
+            <p>Literally bitters beard deep v, mumblecore hella trust fund irony esse. Terry Richardson tousled duis, id trust fund irony roof party Tumblr Carles Thundercats fanny pack typewriter swag.</p>
+          </div>
+          <div class="small">
+            <h3>Small</h3>
+            <p>Literally bitters beard deep v, mumblecore hella trust fund irony esse. Terry Richardson tousled duis, id trust fund irony roof party Tumblr Carles Thundercats fanny pack typewriter swag.</p>
+          </div>
+          <div class="small">
+            <h3>Small</h3>
+            <p>Literally bitters beard deep v, mumblecore hella trust fund irony esse. Terry Richardson tousled duis, id trust fund irony roof party Tumblr Carles Thundercats fanny pack typewriter swag.</p>
+          </div>
+          <div class="small">
+            <h3>Small</h3>
+            <p>Literally bitters beard deep v, mumblecore hella trust fund irony esse. Terry Richardson tousled duis, id trust fund irony roof party Tumblr Carles Thundercats fanny pack typewriter swag.</p>
+          </div>
+          <div class="small">
+            <h3>Small</h3>
+            <p>Literally bitters beard deep v, mumblecore hella trust fund irony esse. Terry Richardson tousled duis, id trust fund irony roof party Tumblr Carles Thundercats fanny pack typewriter swag.</p>
+          </div>
+          <div class="medium">
+            <h3>Medium</h3>
+            <p>Literally bitters beard deep v, mumblecore hella trust fund irony esse. Terry Richardson tousled duis, id trust fund irony roof party Tumblr Carles Thundercats fanny pack typewriter swag.</p>
+          </div>
+          <div class="large">
+            <h3>Large</h3>
+            <p>Literally bitters beard deep v, mumblecore hella trust fund irony esse. Terry Richardson tousled duis, id trust fund irony roof party Tumblr Carles Thundercats fanny pack typewriter swag.</p>
+          </div>
+          <div class="medium">
+            <h3>Medium</h3>
+            <p>Literally bitters beard deep v, mumblecore hella trust fund irony esse. Terry Richardson tousled duis, id trust fund irony roof party Tumblr Carles Thundercats fanny pack typewriter swag.</p>
+          </div>
+          <div class="small">
+            <h3>Small</h3>
+            <p>Literally bitters beard deep v, mumblecore hella trust fund irony esse. Terry Richardson tousled duis, id trust fund irony roof party Tumblr Carles Thundercats fanny pack typewriter swag.</p>
+          </div>
+          <div class="small">
+            <h3>Small</h3>
+            <p>Literally bitters beard deep v, mumblecore hella trust fund irony esse. Terry Richardson tousled duis, id trust fund irony roof party Tumblr Carles Thundercats fanny pack typewriter swag.</p>
+          </div>
+          <div class="medium">
+            <h3>Medium</h3>
+            <p>Literally bitters beard deep v, mumblecore hella trust fund irony esse. Terry Richardson tousled duis, id trust fund irony roof party Tumblr Carles Thundercats fanny pack typewriter swag.</p>
+          </div>
+          <div class="medium">
+            <h3>Medium</h3>
+            <p>Literally bitters beard deep v, mumblecore hella trust fund irony esse. Terry Richardson tousled duis, id trust fund irony roof party Tumblr Carles Thundercats fanny pack typewriter swag.</p>
+          </div>
+          <div class="large">
+            <h3>Large</h3>
+            <p>Literally bitters beard deep v, mumblecore hella trust fund irony esse. Terry Richardson tousled duis, id trust fund irony roof party Tumblr Carles Thundercats fanny pack typewriter swag.</p>
+          </div>
+        </div>
       </div>
-    </div>
+    </article>
+    
+    <article>
+      <h1>Sprites</h1>
+
+      <div class="classic">&nbsp;</div>
+      <div class="indy">&nbsp;</div>
+      <div class="alien">&nbsp;</div>
+    </article>
+    
+
   </body>
 </html>