framous 0.1 → 0.2.1

data/CHANGELOG.mkdn

@@ -1,5 +1,14 @@
 Framous Changelog
-======================
+=================
+
+v0.2.1 [Nov 16, 2012]
+---------------------
+* rebuild clean version
+
+v0.2 [Nov 16, 2012]
+-------------------
+* new folder /grid
+* add _base.scss partial so you can override variables to fit your personal project
 
 v0.1 [Nov 15, 2012]
 -------------------

data/README.md

@@ -1,7 +1,7 @@
 framous
 ============
 
-HTML5 and SCSS Starter Kit
+A light HTML & SCSS rapid prototyping toolkit for web development
 
 Installation
 ============

data/stylesheets/_framous-base.scss

@@ -0,0 +1,3 @@
+//
+// Framous-base.scss
+//

data/stylesheets/_framous-grid.scss

@@ -2,6 +2,6 @@
 // Framous-grid.scss
 //
 
-@import "framous/settings";
-@import "framous/functions";
-@import "framous/grid";
+@import "framous/grid/settings";
+@import "framous/grid/functions";
+@import "framous/grid/grid";

data/stylesheets/_framous.scss

@@ -1,6 +1,11 @@
 //
 // Framous.scss
+// @import /framous
 //
 
+// A semantic, fluid grid framework
+// Based on http://neat.bourbon.io/ & http://susy.oddbird.net/
 @import "framous-grid";
-@import "framous-commons";
+
+// Fundamental HTML elements styled and enhanced with extensible classes.
+ @import "framous-base";

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,200 @@
+//
+// Grid.scss 
+// The default grid uses 12 columns.
+//
+
+//
+// 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/_base.scss

@@ -0,0 +1,44 @@
+//
+// Settings.scss
+//
+
+@import "framous";
+
+//
+// 1. Responsive Grid
+//
+
+// Column width
+$column: 145px;
+// Gutter between each two columns
+$gutter: 9px;
+// Total number of columns in the grid (Total Columns For Main Container)
+$grid-columns: 12;
+// Max-width of the outer container
+$max-width: 1024px;
+// Makes all elements have a border-box layout
+$border-box-sizing: true;
+// 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

@@ -1,6 +1,7 @@
 stylesheet 'screen.scss', :media => 'screen, projection'
+stylesheet '_base.scss'
 
-description "Framous: HTML5 and SCSS Starter Kit"
+description "Framous: A light HTML & SCSS rapid prototyping toolkit for web development."
 
 help %Q{
   Please see Framous github for all documentation and tutorials:

data/templates/project/screen.scss

@@ -1,8 +1,6 @@
-//** Framous-Grid **//
+//
+// Framous
+//
 
-// Import ------------------------------------------------------------------
-
-@import "framous-grid";
-
-// For future include framous-commons
-// @import "framous-commons"
+// Basic settings that can be easily overridden from _base.scss
+@import "base";

metadata

@@ -1,12 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: framous
 version: !ruby/object:Gem::Version 
-  hash: 9
+  hash: 21
   prerelease: 
   segments: 
   - 0
+  - 2
   - 1
-  version: "0.1"
+  version: 0.2.1
 platform: ruby
 authors: 
 - Alec Hance
@@ -48,7 +49,7 @@ dependencies:
         version: 3.2.0
   type: :runtime
   version_requirements: *id002
-description: HTML5 and SCSS StarterKit
+description: A light HTML & SCSS rapid prototyping toolkit for web development
 email: hello@alechance.com
 executables: []
 
@@ -61,12 +62,17 @@ files:
 - LICENSE.txt
 - README.md
 - lib/framous.rb
+- stylesheets/_framous-base.scss
 - stylesheets/_framous-commons.scss
 - stylesheets/_framous-grid.scss
 - stylesheets/_framous.scss
 - stylesheets/framous/_functions.scss
 - stylesheets/framous/_grid.scss
 - stylesheets/framous/_settings.scss
+- stylesheets/framous/grid/_functions.scss
+- stylesheets/framous/grid/_grid.scss
+- stylesheets/framous/grid/_settings.scss
+- templates/project/_base.scss
 - templates/project/manifest.rb
 - templates/project/screen.scss
 homepage: http://github.com/alechance/framous
@@ -101,6 +107,6 @@ rubyforge_project:
 rubygems_version: 1.8.24
 signing_key: 
 specification_version: 3
-summary: HTML5 and SCSS StarterKit
+summary: A light HTML & SCSS rapid prototyping toolkit for web development
 test_files: []