prelude-framework 0.7 → 0.8

data/lib/prelude/version.rb

@@ -1,3 +1,3 @@
 module Prelude
-  VERSION = "0.7"
+  VERSION = "0.8"
 end

data/scss/prelude.scss

@@ -13,6 +13,7 @@
 //          prelude/mixins/rem
 //          prelude/mixins/set-font-size
 //          prelude/mixins/button-style
+//          prelude/mixins/grid
 //
 //      prelude/abstractions
 //          prelude/abstractions/media

data/scss/prelude/_defaults.scss

@@ -5,10 +5,11 @@
 // 1. Base
 // 2. Colors
 // 3. Typography
-// 4. Forms
-// 5. Tables
-// 6. Buttons
-// 7. Debug mode
+// 4. Grid system
+// 5. Forms
+// 6. Tables
+// 7. Buttons
+// 8. Debug mode
 //
 // =============================================================================
 
@@ -19,6 +20,7 @@
 //Border radius
 $default-border-radius:     4px !default; // default: 4px
 
+
 // =============================================================================
 // 2. Colors
 // =============================================================================
@@ -55,6 +57,7 @@ $blockquote-color:          $gray-lighter !default; // default: $gray-lighter
 // Line & Border colors
 $line-color: #e6e6e6 !default; // default: #e6e6e6
 
+
 // =============================================================================
 // 3. Typography
 // =============================================================================
@@ -93,8 +96,21 @@ $brand-color: $black !default; // default: $black
 // Colors
 $subheader-color: $gray-light !default; // default: $gray-light
 
+
+// =============================================================================
+// 4. Grid system
+// =============================================================================
+
+$grid-gutter:               $base-spacing-unit !default; // default: $base-spacing-unit
+$grid-use-placeholder:      false !default; // default: false
+$grid-breakpoints:          's' '(min-width: 320px)', 'm' '(min-width: 700px)', 'l' '(min-width: 980px)'; // default: 's' '(min-width: 320px)', 'm' '(min-width: 700px)', 'l' '(min-width: 980px)'
+$generate-default-grid:     false !default; // default: false
+$use-grid-breakpoints:      false !default; // default: false
+$use-markup-fix:            true !default; // default true
+
+
 // =============================================================================
-// 4. Forms
+// 5. Forms
 // =============================================================================
 
 $input-background:          $white !default; // default: $white
@@ -123,7 +139,7 @@ $info-background:           #d9edf7 !default; // default: #d9edf7
 $info-border:               darken(adjust-hue($info-background, -10), 7%) !default; // default: darken(adjust-hue($info-background, -10), 7%)
 
 // =============================================================================
-// 5. Tables
+// 6. Tables
 // =============================================================================
 
 $table-background:          transparent !default; // default: transparent
@@ -131,8 +147,9 @@ $table-background-stripe:   #f1f1f1 !default; // default: #f1f1f1
 $table-background-hover:    #f1f1f1 !default; // default: #f1f1f1
 $table-border:              $line-color !default; // default: $line-color
 
+
 // =============================================================================
-// 6. Buttons
+// 7. Buttons
 // =============================================================================
 
 $btn-font-weight:           normal !default; // default: normal
@@ -152,8 +169,9 @@ $btn-warning-background:    lighten($orange, 15%) !default; // default: lighten(
 $btn-danger-background:     #ee5f5b !default; // default: #ee5f5b
 $btn-inverse-background:    $gray !default; // default: $gray
 
+
 // =============================================================================
-// 7. Debug mode
+// 8. Debug mode
 // =============================================================================
 
 $debug-mode:                false !default; // default: false

data/scss/prelude/_mixins.scss

@@ -6,4 +6,5 @@
 @import "mixins/gradients",
         "mixins/rem",
         "mixins/set-font-size",
-        "mixins/button-style";
+        "mixins/button-style",
+        "mixins/grid";

data/scss/prelude/mixins/_grid.scss

@@ -0,0 +1,183 @@
+// =============================================================================
+// Grid system
+//
+// Table of contents:
+// 1. Grid setup
+// 2. Widths
+// 3. Pushes
+// 4. Pulls
+// 5. Generator
+// 6. Helper functions
+// 7. Generate default grid
+//
+// Based on (and borrowed from) the amazing work of Harry Roberts
+// (https://github.com/csswizardry/inuit.css)
+//
+// =============================================================================
+
+$number-names: one two three four five six seven eight nine ten eleven twelve;
+$division-names: whole half third quarter fifth sixth seventh eighth nineth tenth eleventh twelfth;
+
+$class-type: unquote(".");
+
+@if $grid-use-placeholder == true {
+    $class-type:  unquote("%");
+}
+
+// =============================================================================
+// 1. Grid setup
+// =============================================================================
+
+// 1. Allow the grid system to be used on lists.
+// 2. Remove any margins and paddings that might affect the grid system.
+// 3. Apply a negative `margin-left` to negate the columns’ gutters.
+// 4. If not using a markup fix, use the letter-spacing hack.
+
+#{$class-type}grid {
+    list-style: none;               // [1]
+    margin: 0;                      // [2]
+    padding: 0;                     // [2]
+    margin-left: -$grid-gutter;     // [3]
+    @if $use-markup-fix != true {
+        letter-spacing:-0.31em;
+    }
+}
+
+// 1. Cause columns to stack side-by-side.
+// 2. Full width by default.
+// 3. Space columns apart.
+// 4. Align columns to the tops of each other.
+// 5. Reinstate removed whitespace.
+// 6. Required to combine fluid widths and fixed gutters.
+
+#{$class-type}grid__item {
+    display: inline-block;            // [1]
+    width: 100%;                      // [2]
+    padding-left: $grid-gutter;       // [3]
+    vertical-align: top;              // [4]
+    letter-spacing: normal;           // [5]
+    word-spacing: normal;             // [5]
+    -webkit-box-sizing: border-box;   // [6]
+       -moz-box-sizing: border-box;   // [6]
+            box-sizing: border-box;   // [6]
+}
+
+// =============================================================================
+// 2. Widths
+// =============================================================================
+
+@mixin grid-widths($divisions: 'all', $responsive-classes: false) {
+    @include generate-grid($divisions, $responsive-classes, $move-class: '', $property: 'width');
+}
+
+// =============================================================================
+// 3. Pushes
+// =============================================================================
+
+@mixin grid-pushes($divisions: 'all', $responsive-classes: false) {
+    [class*="push--"]{ position:relative; }
+    @include generate-grid($divisions, $responsive-classes, $move-class: 'push--', $property: 'left');
+}
+
+// =============================================================================
+// 4. Pulls
+// =============================================================================
+
+@mixin grid-pulls($divisions: 'all', $responsive-classes: false) {
+    [class*="pull--"]{ position:relative; }
+    @include generate-grid($divisions, $responsive-classes, $move-class: 'pull--', $property: 'right');
+}
+
+
+// =============================================================================
+// 5. Generator
+// =============================================================================
+
+@mixin generate-grid($divisions, $responsive-classes, $move-class, $property) {
+    $namespace: "";
+
+    @if $divisions == 'all' {
+        $divisions: 1 2 3 4 5 6 7 8 9 10 11 12;
+    }
+
+    // Generate base classes (one-half, two-thirds, …)
+    @include generate-classes($divisions, $move-class, $property, $namespace);
+
+    @if $responsive-classes {
+        @each $breakpoint in $grid-breakpoints {
+            @media only screen and #{nth($breakpoint, 2)} {
+                // Generate responsive classes (s-one-half, m-two-thirds, …)
+                @include generate-classes($divisions, $move-class, $property, $namespace: #{nth($breakpoint, 1)}unquote("-"));
+            }
+        }
+    }
+}
+
+@mixin generate-classes($divisions, $move-class, $property , $namespace) {
+
+    // A list to store generated classes and size values
+    $generated: ();
+
+    @each $division in $divisions {
+        @for $number from 1 to if($division == 1, $division + 1, $division) {
+
+            // Calculate size based on divisions and number
+            $size: (100% / $division) * $number;
+
+            // Class name
+            $class: #{$class-type}#{$move-class}#{$namespace}#{number-name($number)}-#{division-name($division)}#{pluralize($number)};
+
+            #{$class} {
+                // Check if we can use @extend from a previously generated class
+                $extended-class: extends($generated, $size);
+                @if $extended-class != false {
+                    @extend #{$extended-class};
+                } @else {
+                    #{$property}: $size;
+                    $generated: append($generated, $class $size);
+                }
+            }
+        }
+    }
+}
+
+// =============================================================================
+// 6. Helper functions
+// =============================================================================
+
+// Returns the name of a given number: number-name(2) // returns 'two'
+@function number-name($number) {
+    @return nth($number-names, $number);
+}
+
+// Returns the name of a given division: division-name(2) // returns 'half'
+@function division-name($number) {
+    @return nth($division-names, $number);
+}
+
+// Returns `s` to pluralize a number if needed: pluralize(2) // returns 's'
+@function pluralize($number) {
+    @if $number > 1 { @return 's'; }
+    @return null;
+}
+
+// Returns a previously generated class if it can be used as an extend: one-half extends two-quarters
+@function extends($generated, $size) {
+    @each $item in $generated {
+        @if index(nth($item, 2), $size) {
+            @return nth($item, 1);
+        }
+    }
+    @return false;
+}
+
+
+// =============================================================================
+// 7. Generate default grid
+// =============================================================================
+
+@if $generate-default-grid {
+    @include grid-widths(all, $use-grid-breakpoints);
+    @include grid-pushes(all, $use-grid-breakpoints);
+    @include grid-pulls(all, $use-grid-breakpoints);
+}

data/test/scss/style.scss

@@ -1,55 +1,55 @@
-// =============================================================================
-// Prelude Test Bed
-// =============================================================================
-
-// Prelude framework import
-@import "compass",
-        "prelude-settings",
-		"prelude",
-		"prelude/all";
-
-
-// =============================================================================
-// Main wrapper
-// =============================================================================
-
-.wrapper {
-    margin: 0 auto;
-    padding: 0 2em;
-    max-width: 990px;
-}
-
-
-// =============================================================================
-// Responsive font styles
-// =============================================================================
-
-@media screen and (max-width: pixels-to-ems(400px)) {
-    @include set-font-size(14px, 14px * 1.35);
-}
-
-
-// =============================================================================
-// Test blocks
-// =============================================================================
-
-.test {
-    padding: $base-spacing-unit;
-    background-color: $gray-lighter;
-    border-radius: $default-border-radius;
-}
-
-
-// =============================================================================
-// Buttons
-// =============================================================================
-
-.buttons-with-gradient {
-    .btn            { @include btn-style($btn-background, true); }
-    .btn--primary   { @include btn-style($btn-primary-background, true); }
-    .btn--info      { @include btn-style($btn-info-background, true); }
-    .btn--success   { @include btn-style($btn-success-background, true); }
-    .btn--warning   { @include btn-style($btn-warning-background, true); }
-    .btn--danger    { @include btn-style($btn-danger-background, true); }
-    .btn--inverse   { @include btn-style($btn-inverse-background, true); }
-}
+// =============================================================================
+// Prelude Test Bed
+// =============================================================================
+
+// Prelude framework import
+@import "compass",
+        "prelude-settings",
+		"prelude",
+		"prelude/all";
+
+
+// =============================================================================
+// Main wrapper
+// =============================================================================
+
+.wrapper {
+    margin: 0 auto;
+    padding: 0 2em;
+    max-width: 990px;
+}
+
+
+// =============================================================================
+// Responsive font styles
+// =============================================================================
+
+@media screen and (max-width: pixels-to-ems(400px)) {
+    @include set-font-size(14px, 14px * 1.35);
+}
+
+
+// =============================================================================
+// Test blocks
+// =============================================================================
+
+.test {
+    padding: $base-spacing-unit;
+    background-color: $gray-lighter;
+    border-radius: $default-border-radius;
+}
+
+
+// =============================================================================
+// Buttons
+// =============================================================================
+
+.buttons-with-gradient {
+    .btn            { @include btn-style($btn-background, true); }
+    .btn--primary   { @include btn-style($btn-primary-background, true); }
+    .btn--info      { @include btn-style($btn-info-background, true); }
+    .btn--success   { @include btn-style($btn-success-background, true); }
+    .btn--warning   { @include btn-style($btn-warning-background, true); }
+    .btn--danger    { @include btn-style($btn-danger-background, true); }
+    .btn--inverse   { @include btn-style($btn-inverse-background, true); }
+}

metadata

@@ -1,77 +1,72 @@
---- !ruby/object:Gem::Specification 
+--- !ruby/object:Gem::Specification
 name: prelude-framework
-version: !ruby/object:Gem::Version 
-  hash: 5
+version: !ruby/object:Gem::Version
+  version: '0.8'
   prerelease: 
-  segments: 
-  - 0
-  - 7
-  version: "0.7"
 platform: ruby
-authors: 
+authors:
 - Daniel Guillan
 autorequire: 
 bindir: bin
 cert_chain: []
-
-date: 2013-08-21 00:00:00 Z
-dependencies: 
-- !ruby/object:Gem::Dependency 
+date: 2013-08-23 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
   name: sass
-  prerelease: false
-  requirement: &id001 !ruby/object:Gem::Requirement 
+  requirement: !ruby/object:Gem::Requirement
     none: false
-    requirements: 
-    - - ">="
-      - !ruby/object:Gem::Version 
-        hash: 9
-        segments: 
-        - 3
-        - 2
-        - 3
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
         version: 3.2.3
   type: :runtime
-  version_requirements: *id001
-- !ruby/object:Gem::Dependency 
-  name: compass
   prerelease: false
-  requirement: &id002 !ruby/object:Gem::Requirement 
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.2.3
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
     none: false
-    requirements: 
-    - - ">="
-      - !ruby/object:Gem::Version 
-        hash: 43
-        segments: 
-        - 0
-        - 12
-        - 2
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
         version: 0.12.2
   type: :runtime
-  version_requirements: *id002
-- !ruby/object:Gem::Dependency 
-  name: rake
   prerelease: false
-  requirement: &id003 !ruby/object:Gem::Requirement 
+  version_requirements: !ruby/object:Gem::Requirement
     none: false
-    requirements: 
-    - - ">="
-      - !ruby/object:Gem::Version 
-        hash: 3
-        segments: 
-        - 0
-        version: "0"
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 0.12.2
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
   type: :runtime
-  version_requirements: *id003
-description: A robust, extensible and opinionated OOCSS front-end framework built with SASS and Compass framework
-email: 
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+description: A robust, extensible and opinionated OOCSS front-end framework built
+  with SASS and Compass framework
+email:
 - hello@danielguillan.com
 executables: []
-
 extensions: []
-
 extra_rdoc_files: []
-
-files: 
+files:
 - .gitignore
 - Gemfile
 - LICENCE
@@ -109,6 +104,7 @@ files:
 - scss/prelude/mixins/_button-style.scss
 - scss/prelude/mixins/_each-grid-breakpoint.scss
 - scss/prelude/mixins/_gradients.scss
+- scss/prelude/mixins/_grid.scss
 - scss/prelude/mixins/_rem.scss
 - scss/prelude/mixins/_set-font-size.scss
 - scss/prelude/modules/_buttons.scss
@@ -126,38 +122,36 @@ files:
 - test/scss/style.scss
 homepage: https://github.com/danielguillan/prelude
 licenses: []
-
 post_install_message: 
 rdoc_options: []
-
-require_paths: 
+require_paths:
 - lib
-required_ruby_version: !ruby/object:Gem::Requirement 
+required_ruby_version: !ruby/object:Gem::Requirement
   none: false
-  requirements: 
-  - - ">="
-    - !ruby/object:Gem::Version 
-      hash: 3
-      segments: 
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+      segments:
       - 0
-      version: "0"
-required_rubygems_version: !ruby/object:Gem::Requirement 
+      hash: -4549275720819963838
+required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
-  requirements: 
-  - - ">="
-    - !ruby/object:Gem::Version 
-      hash: 3
-      segments: 
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+      segments:
       - 0
-      version: "0"
+      hash: -4549275720819963838
 requirements: []
-
 rubyforge_project: 
 rubygems_version: 1.8.24
 signing_key: 
 specification_version: 3
-summary: A robust, extensible and opinionated OOCSS front-end framework built with SASS and Compass framework
-test_files: 
+summary: A robust, extensible and opinionated OOCSS front-end framework built with
+  SASS and Compass framework
+test_files:
 - test/config.rb
 - test/index.html
 - test/scss/_prelude-settings.scss