framous-grid 0.2.1

data/CHANGELOG.mkdn

@@ -0,0 +1,15 @@
+Framous-Grid Changelog
+======================
+
+v0.2.1 [Nov 15, 2012]
+---------------------
+* fix minor bugs
+
+v0.2 [Nov 14, 2012]
+-------------------
+* Create compass extension skeleton
+* Setup stuffs to use this as a gem
+
+v0.1 [Nov 13, 2012]
+-------------------
+* Init project

data/LICENSE.txt

@@ -0,0 +1,28 @@
+Copyright (c) 2012, Alec Hance
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are
+met:
+
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above
+      copyright notice, this list of conditions and the following
+      disclaimer in the documentation and/or other materials provided
+      with the distribution.
+    * Neither the name of the author nor the names of other
+      contributors may be used to endorse or promote products derived
+      from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

data/README.md

@@ -0,0 +1,23 @@
+framous-grid
+============
+
+A fluid grid framework written with SCSS & Compass Style, based on Susy (http://susy.oddbird.net) & Neat (http://neat.bourbon.io/).
+
+Installation
+============
+
+From the command line:
+
+    (sudo) gem install framous-grid
+
+Add to a project:
+
+    // rails: compass.config, other: config.rb
+    require 'framous-grid'
+
+    // command line
+    compass install framous-grid
+    
+Or create a new project:
+
+    compass create <project_directory_name> -r framous-grid --using framous-grid

data/lib/framous-grid.rb

@@ -0,0 +1,3 @@
+require 'compass'
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('framous-grid', :path => extension_path)

data/stylesheets/_framous-grid.scss

@@ -0,0 +1,7 @@
+//
+// Framous-grid.scss
+//
+
+@import "framous-grid/settings";
+@import "framous-grid/functions";
+@import "framous-grid/grid";

data/stylesheets/framous-grid/_functions.scss

@@ -0,0 +1,39 @@
+//
+// Functions & Mixins
+//
+
+//
+// Flexible grid
+//
+
+@function flex-grid($columns, $container-columns: $fg-max-columns) {
+  $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($width / $container-width);
+}
+
+// Flexible gutter
+@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($gutter / $container-width);
+}
+
+//
+// Container Span
+//
+
+@function container-span($span: $span) {
+  @if length($span) == 3 {
+    $container-columns: nth($span, 3);
+    @return $container-columns;
+  }
+
+  @else if length($span) == 2 {
+    $container-columns: nth($span, 2);
+    @return $container-columns;
+  }
+
+  @else {
+    @return $grid-columns;
+  }
+}

data/stylesheets/framous-grid/_grid.scss

@@ -0,0 +1,201 @@
+//
+// Grid.scss 
+// The default grid uses 12 columns.
+// A setting that can be easily overridden in /base/settings.scss
+//
+
+//
+// Imports
+//
+
+@import "compass/css3/box-sizing";
+
+// $border-box-sizing: true !default;
+// Makes all elements have a border-box layout
+
+@if $border-box-sizing == true {
+  * {
+    @include box-sizing(border-box);
+  }
+}
+
+$fg-column: $column;
+$fg-gutter: $gutter;
+$fg-max-columns: $grid-columns;
+$fg-max-width: $max-width;
+$parent-columns: $grid-columns !default;
+
+// outer wrapper center container
+@mixin outer-container() {
+  @include clearfix;
+  max-width: $fg-max-width;
+  text-align: left;
+  margin: {
+    left: auto;
+    right: auto;
+  }
+}
+
+// Grid span columns
+// Use the span-columns mixin to specify the number of columns an element:
+// @include span-columns($span: $columns of $container-columns, $display: block)
+// eg. Element that spans across 6 columns (out of the default 12)
+// div.element { @include span-columns(6 of 8); }
+@mixin span-columns($span: $columns of $container-columns, $display: block) {
+
+  $columns: nth($span, 1);
+  $container-columns: container-span($span);
+
+  @if $container-columns != $grid-columns {
+    $parent-columns: $container-columns;
+  }
+
+  @if $display == table {
+    display: table-cell;
+    padding-right: flex-gutter($container-columns);
+    width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);
+
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+
+  @else if $display == inline-block {
+    @include inline-block;
+    margin-right: flex-gutter($container-columns);
+    width: flex-grid($columns, $container-columns);
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  @else {
+    display: block;
+    float: left;
+    margin-right: flex-gutter($container-columns);
+    width: flex-grid($columns, $container-columns);
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+// Clearfix / row container
+// In order to clear floated or table-cell columns:
+@mixin row($display: block) {
+  @include clearfix;
+  @if $display == table {
+    display: table;
+  }
+
+  @else {
+    display: block;
+  }
+}
+
+// Shift
+// To move an element to the left or right by a number of columns:
+@mixin shift($n-columns: 1) {
+  margin-left: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns);
+}
+
+// Pad
+// To add padding around the entire column use pad().
+// By default it adds the same value as the grid's gutter.
+@mixin pad($padding: flex-gutter()) {
+  padding: $padding;
+}
+
+// Remove element gutter
+@mixin omega($display: block, $direction: right) {
+  @if $display == table {
+    padding-#{$direction}: 0;
+  }
+
+  @else {
+    margin-#{$direction}: 0;
+  }
+}
+
+// You can also use nth-omega to remove the gutter of a specific column or set of columns
+@mixin nth-omega($nth, $display: block, $direction: right) {
+  @if $display == table {
+    &:nth-child(#{$nth}) {
+      padding-#{$direction}: 0;
+    }
+  }
+
+  @else {
+    &:nth-child(#{$nth}) {
+      margin-#{$direction}: 0;
+    }
+  }
+}
+
+// Fill 100% of parent
+// This makes sure that the child fills 100% of its parent
+@mixin fill-parent() {
+  width: 100%;
+
+  @if $border-box-sizing == false {
+    @include box-sizing(border-box);
+  }
+}
+
+// Breakpoints
+// The breakpoint() mixin allows you to use media-queries to modify both the grid and the layout.
+// It takes two arguments:
+@mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
+
+  @if length($query) == 1 {
+    @media screen and ($default-feature: nth($query, 1)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 2 {
+    @media screen and (nth($query, 1): nth($query, 2)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 3 {
+    @media screen and (nth($query, 1): nth($query, 2)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: nth($query, 3);
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 4 {
+    @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 5 {
+    @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: nth($query, 5);
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else {
+    @warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
+  }
+}
+ 

data/stylesheets/framous-grid/_settings.scss

@@ -0,0 +1,42 @@
+//
+// Settings.scss
+//
+
+//
+// 1. Responsive Grid
+//
+
+// Column width
+$column: 145px !default;
+// Gutter between each two columns
+$gutter: 9px !default;
+// Total number of columns in the grid (Total Columns For Main Container)
+$grid-columns: 12 !default;
+// Max-width of the outer container
+$max-width: 1024px !default;
+// Makes all elements have a border-box layout
+$border-box-sizing: true !default;
+// Default @media feature for the breakpoint() mixin
+$default-feature: min-width;
+
+//
+// 2. Responsive Breakpoints
+// @see http://css-tricks.com/snippets/css/media-queries-for-standard-devices
+//
+
+// Smartphones (portrait and landscape)
+$phone:							min-device-width 320px max-device-width 479px;
+// Smartphones (portrait)
+$phone-portrait:		max-width 319px;
+// Smartphones (landscape)
+$phone-landscape:		min-width 320px max-width 479px;
+// iPads (portrait and landscape)
+$ipad:							min-device-width 768px;
+// iPads (portrait)
+$ipad-portrait:			min-device-width 768px max-device-width 1024px orientation portrait;
+// iPads (landscape)
+$ipad-landscape:		min-device-width 768px max-device-width 1024px orientation landscape;
+// Desktops and laptops
+$desktop:						min-width 1024px;
+// iPhone 4
+$retina:						-webkit-min-device-pixel-ratio 1.5 min-device-pixel-ratio 1.5;

data/templates/project/manifest.rb

@@ -0,0 +1,15 @@
+stylesheet 'screen.scss', :media => 'screen, projection'
+
+description "Framous-Grid: A fluid grid framework written with SCSS & Compass Style."
+
+help %Q{
+  Please see Framous-Grid github for all documentation and tutorials:
+
+    http://github.com/alechance/framous-grid
+}
+
+welcome_message %Q{
+  Please see Framous-Grid github for all documentation and tutorials:
+
+    http://github.com/alechance/framous-grid
+}

data/templates/project/screen.scss

@@ -0,0 +1,8 @@
+//** Framous-Grid **//
+
+// Import ------------------------------------------------------------------
+
+@import "framous-grid";
+
+// For future include framous-commons
+// @import "framous-commons"

metadata

@@ -0,0 +1,105 @@
+--- !ruby/object:Gem::Specification 
+name: framous-grid
+version: !ruby/object:Gem::Version 
+  hash: 21
+  prerelease: 
+  segments: 
+  - 0
+  - 2
+  - 1
+  version: 0.2.1
+platform: ruby
+authors: 
+- Alec Hance
+- Khalid Yagoubi
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2012-11-14 00:00:00 Z
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 29
+        segments: 
+        - 0
+        - 11
+        version: "0.11"
+  type: :runtime
+  version_requirements: *id001
+- !ruby/object:Gem::Dependency 
+  name: sass
+  prerelease: false
+  requirement: &id002 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 15
+        segments: 
+        - 3
+        - 2
+        - 0
+        version: 3.2.0
+  type: :runtime
+  version_requirements: *id002
+description: A fluid grid framework written with SCSS & Compass Style, based on Susy (http://susy.oddbird.net) & Neat (http://neat.bourbon.io/).
+email: hello@alechance.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- CHANGELOG.mkdn
+- LICENSE.txt
+- README.md
+- lib/framous-grid.rb
+- stylesheets/_framous-grid.scss
+- stylesheets/framous-grid/_functions.scss
+- stylesheets/framous-grid/_grid.scss
+- stylesheets/framous-grid/_settings.scss
+- templates/project/manifest.rb
+- templates/project/screen.scss
+homepage: http://github.com/alechance/framous-grid
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+requirements: []
+
+rubyforge_project: 
+rubygems_version: 1.8.24
+signing_key: 
+specification_version: 3
+summary: A fluid grid framework written with SCSS & Compass Style
+test_files: []
+