respondsass 0.0.1

data/README.md

@@ -0,0 +1,146 @@
+RespondSass
+=============
+
+What is it?
+-----------
+
+Respondsass is a collection of .scss files to help speed up web development. It has been designed to be configurable but lightweight. It's built 320 mobile first and up, using ems in the media queries. Respondsass has 3 objectives.
+
+Concise, optimised CSS output
+
+The issue I saw with most frameworks was the amount of CSS in the files to created huge grid options where you may only use one or two classes. In Respondsass because you create the classes you determine how much CSS is in the outputed file and only class being used in the grid will be there.
+
+Ems for media queries
+
+I think this is now the defacto way to create media queries but I still see lots of frameworks using pixel values for media queries. if you want to learn more about the reason why I chose to go with em based media queries read this post by Lyza Gardner
+
+Rems for fonts and spacing
+
+Using rems with pixel fallbacks is a future friendly way to implement sizing for fonts and spacing. I've also created a configurable baseline grid to create a nice verticle rhythm.
+
+Getting started
+---------------
+
+To download the exstension go the github repository.
+
+Creating the grid
+-----------------
+
+Creating columns is easy and is by default based of a 16 column grid. First set your html. If I wanted to set up a one row grid with 4 columns, each the same with we could do this.
+
+<div class="container">
+ <div class="row">
+  <nav class="span-4"></nav>
+  <section class="span-4"></section>
+  <section class="span-4"></section>
+  <aside class="span-4"></aside>
+ </div>
+</div>
+
+Simply import the create grid partial
+
+@import "respondsass/create-grid";
+
+Then include create grid - this will create the default 16 column grid with a 1.25% gutter.
+
+@include create-grid();
+
+To create something bespoke you just pass in some parameters. If you would like a 3 column layout simple. Simply pass in how many coulmns and what the class name will be.
+
+@include create-grid(thirds, 3);
+
+This creates 3 column layout with class names third-1 (spans one third of containing element), thirds-2 (spans 2 thirds of containing element) and thirds-3 that is full width
+
+We could use this by doing thing like this
+
+<div class="container">
+ <div class="row">
+  <nav class="thirds-1"></nav>
+  <section class="thirds-2"></section>
+ </div>
+</div>
+
+Easy Nav - Navigation
+---------------------
+
+Just some simple styling to help you get navigation up and running. I found I was doing the same things over and over again with navigation. So I have put them in a mixin.
+
+To create a horizontal navigation with 4 links, again first create the html
+
+<ul id="nav">
+ <li><a href="#">Home</a></li>
+ <li><a href="#">Blog</a></li>
+ <li><a href="#">About Us</a></li>
+ <li><a href="#">Contact</a></li>
+</ul>
+Then in your ul declaration in your sass just include:
+
+@include horizontal-nav(4);
+This will create a nice equally sized horizontal navigation that you can add extra styles such a font-sizes and colours.
+
+For a vertical nav do the same html but include:
+
+@include vertical-nav();
+
+There's no parameter for this one just the declaration.
+
+Rem sizing
+----------
+
+This can be included in any elements css declaration and creates a future friendly rem value with pixel fallback for and declaration passed to it. As with all things you need to import the sass file.
+
+@import "respondsass/rem-sizing";
+
+Then to set the bottom margin of an element to 1 rem just include the following.
+
+@include rem-sizing(margin-bottom, 1);
+
+Simple. This can be used for any declaration. Font-size, padding, margin etc.
+
+Buttons
+-------
+
+Buttons take 4 parameters. Border-radius, background-colour, font-colour and gradient. To use again import the sass file
+
+@import "respondsass/buttons";
+
+Then simply include the code. The first parameter is for border-radius and takes a pixel value, the second and third are background and font colour respectively. Both take a colour value. The final is gradient and this take either true (if you want a gradient) or false if you don't. If you choose gradient it will use the background colour passed in to create the gradient and the border. This is the order
+
+@include button ($radius, $bg-color, $font-color, $gradient);
+And this is the usage
+
+@include button ($radius:0, $bg-color: $primaryCol, $font-color: #fff, $gradient:false);
+
+Typography Baseline
+-------------------
+
+Simple baseline based on the baseline rhythm calculator
+
+I tend to create a typography partial in sass in there I would set my standard stuff such as as assigning a font family to a variable and setting basic colours and sizes.
+
+$font-face: Open Sans, HelveticaNeue, Calibri, sans-serif;
+
+html {
+-webkit-font-smoothing: antialiased;
+font-size: 100%;
+color: #000000;
+}
+
+Again then just make sure you have imported the baseline file
+
+@import "respondsass/baseline";
+
+Then just include the baseline mixin and pass in some parameters in the order below:
+
+@include baseline($font-face, $base-line-font, $base-line-height);
+
+So actual code would look something like this.
+
+@include baseline($font: $font-face, $base-line-font: 14, $base-line-height: 1.5);
+
+Get involved
+------------
+
+This is very much an early version of the framework but if you like it please say so.
+
+Also, if you have spot any errors or would like to contribute please get in touch matt@my-html-codes.com

data/lib/respondsass.rb

@@ -0,0 +1,4 @@
+require 'compass'
+Compass::Frameworks.register('respondsass',
+                             :stylesheets_directory => File.join(File.dirname(__FILE__), '..', 'stylesheets'),
+                             :templates_directory => File.join(File.dirname(__FILE__), '..', 'templates'))

data/stylesheets/_respondsass.scss

@@ -0,0 +1,8 @@
+// Your Compass Extension's Sass goes here! Run wild!
+@import "respondsass/baseline";
+@import "respondsass/buttons";
+@import "respondsass/col-generator";
+@import "respondsass/create-grid";
+@import "respondsass/easy-nav";
+@import "respondsass/rem-sizing";
+@import "respondsass/respond-to";

data/stylesheets/respondsass/_baseline.scss

@@ -0,0 +1,56 @@
+
+$f: HelveticaNeue, Helvetica, Calibri, sans-serif !default;
+$l-h: 1.5 !default;
+$f-s: 16 !default;
+
+
+@mixin baseline($font:$f, $base-line-font: $f-s, $base-line-height: $l-h){
+
+	$b-f-s: $base-line-font/16;
+
+	body {
+		@include rem-sizing(font-size, $b-f-s);
+	}
+
+	h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, a {
+	    font-family: $font; 
+	}
+
+	h1 {
+		@include rem-sizing(font-size, $b-f-s*1.75);
+		line-height: $base-line-height;
+		@include rem-sizing(margin-bottom, $base-line-height/($b-f-s*1.75));
+	}
+
+	h2 {
+		@include rem-sizing(font-size, $b-f-s*1.45);
+		line-height: $base-line-height;
+		@include rem-sizing(margin-bottom, $base-line-height/($b-f-s*1.45));
+	}
+
+	h3 {
+		@include rem-sizing(font-size, $b-f-s*1.285);
+		line-height: $base-line-height;
+		@include rem-sizing(margin-bottom, $base-line-height/($b-f-s*1.285));
+	}
+
+	h4 {
+		@include rem-sizing(font-size, $b-f-s*1.142);
+		line-height: $base-line-height;
+		@include rem-sizing(margin-bottom, $base-line-height/($b-f-s*1.142));
+	}
+
+	p, ul, blockquote, pre, td, th, label {
+		@include rem-sizing(font-size, $b-f-s);
+	    line-height: $base-line-height;
+	    @include rem-sizing(margin-bottom, $base-line-height);
+	}
+
+	table {
+		border-collapse: collapse;
+		@include rem-sizing(margin-bottom, $base-line-height);
+	}
+
+}
+
+

data/stylesheets/respondsass/_buttons.scss

@@ -0,0 +1,31 @@
+@import "compass/css3";
+
+$default-radius: 2px !default;
+$default-bg-color: #ccc !default;
+$default-gradient: false !default;
+$default-font-size: 1 !default;
+$default-font-color: #333 !default;
+
+
+@mixin button ($radius: $default-radius, $bg-color: $default-bg-color, $font-color: $default-font-color, $font-size: $default-font-size, $gradient: $default-gradient){
+  @if $gradient == true {
+    @include background-image(linear-gradient(lighten($bg-color, 5%),darken($bg-color, 5%)));
+  } @else {
+     background: $bg-color;
+  }    
+    display: inline-block;
+    *display:block;
+    @include rem-sizing(padding-top, .55);
+    @include rem-sizing(padding-bottom, .55);
+    @include rem-sizing(padding-right, 1);
+    @include rem-sizing(padding-left, 1);
+    outline: none;
+    cursor: pointer;
+    text-align: center;
+    text-decoration: none;
+    @include rem-sizing(font-size, 0.9);
+    color: $font-color;
+     @include border-radius($radius);
+     // this determines Mozilla to show the padding
+    border: solid 1px darken($bg-color, 10%);
+}

data/stylesheets/respondsass/_col-generator.scss

@@ -0,0 +1,11 @@
+// Set all variables
+
+$totalColumns: 16 !default;
+
+// Grid generation mixin
+
+@mixin col-generator($num-columns: $col-number, $total-cols: $total-columns) {
+  $column-width: 100% / $total-cols; // Finding column width by dividing space left by number of columns
+  $width: ($num-columns * $column-width);
+  width: $width;
+}

data/stylesheets/respondsass/_create-grid.scss

@@ -0,0 +1,41 @@
+@import "col-generator";
+@import "respond-to";
+@import "rem-sizing";
+
+.container{
+  margin: 0 auto;
+  max-width:1200px;
+  clear: both;
+}
+
+.row {
+  overflow: hidden;
+  clear:both;
+  @include rem-sizing(margin-bottom,.8);
+  padding: 0 2% 0 2%;
+}
+
+$class: span !default;
+$cols: 16 !default;
+$gutter: 1.25% !default;
+
+@mixin create-grid ($class-name:$class, $columns:$cols, $gutter:$gutter) {
+  
+ %grid-rules-#{$class-name} {
+  float:left;
+  @include box-sizing(border-box);
+  @include col-generator($num-columns:$columns, $total-cols:$columns);
+}
+
+
+@for $i from 1 through $columns{
+  .#{$class-name}-#{$i}{
+   @extend %grid-rules-#{$class-name};
+   @include respond-to(tablets-and-above) {
+    @include col-generator($num-columns:$i, $total-cols:$columns);
+    padding-right:0;
+    padding-left:$gutter;
+  }
+}
+}
+}

data/stylesheets/respondsass/_easy-nav.scss

@@ -0,0 +1,44 @@
+@import "rem-sizing";
+
+@mixin horizontal-nav($num-list-items){
+  $list-item-pc: percentage($num-list-items/($num-list-items*$num-list-items)); 
+  text-align: right;
+  overflow: auto;
+  width: 100%;
+  padding:0;
+  list-style:none;
+  li {
+    margin: 0;
+    text-align: center;
+    overflow: auto;
+    float: left;
+    width: $list-item-pc;
+    padding-left:1%;
+    @include box-sizing(border-box);
+    a {
+      text-decoration: none;
+      display: block;
+    }
+    &:first-child {
+      padding-left:0;
+    }
+  }
+}
+
+@mixin vertical-nav(){
+  overflow: auto;
+  padding:0;
+  list-style:none;
+  li {
+    margin: 0;
+    overflow: auto;
+    @include box-sizing(border-box);
+    a {
+      text-decoration: none;
+      display: block;
+      @include rem-sizing(padding-bottom,.4);
+      @include rem-sizing(padding-left,.4);
+      @include rem-sizing(padding-top,.4);
+    }
+  }
+}

data/stylesheets/respondsass/_rem-sizing.scss

@@ -0,0 +1,9 @@
+$default-p: margin-bottom;
+$default-v: 1;
+$px: px;
+
+@mixin rem-sizing ($propery: $default-p, $value: $default-v){
+  $v: $value*16;
+  #{$propery}: #{$v}px;
+  #{$propery}: #{$value}rem;
+}

data/stylesheets/respondsass/_respond-to.scss

@@ -0,0 +1,14 @@
+@mixin respond-to($media) {
+  @if $media == wide-handhelds {
+    @media only screen and (min-width: 30em) and (max-width: 45.938em) { @content; }
+  }
+  @else if $media == tablets-and-above {
+    @media only screen and (min-width: 46em) { @content; }
+  }
+  @else if $media == tablets-landscape-and-above {
+    @media only screen and (min-width: 60em) { @content; }
+  }
+  @else if $media == desktop-and-above {
+    @media only screen and (min-width: 70em) { @content; }
+  }
+}

data/templates/project/manifest.rb

@@ -0,0 +1,18 @@
+# Make sure you list all the project template files here in the manifest.
+stylesheet 'screen.scss', :media => 'screen, projection'
+
+description "Respondsass: a fully configurable grid system native to compass."
+
+help %Q{
+Please see the Respondsass website for all documentation and tutorials:
+
+    http://ww.my-html-codes.com/respondsass
+}
+
+welcome_message %Q{
+Please see the Respondsass website for all documentation and tutorials:
+
+    http://ww.my-html-codes.com/respondsass
+
+To get started, set up your grid in the base partial by following the inline instructions.
+}

data/templates/project/screen.scss

@@ -0,0 +1,4 @@
+// This is where you put the contents of the main stylesheet for the user's project.
+// It should import your sass stylesheets and demonstrate how to use them.
+@import "compass/reset";
+@import "respondsass";

metadata

@@ -0,0 +1,109 @@
+--- !ruby/object:Gem::Specification 
+name: respondsass
+version: !ruby/object:Gem::Version 
+  hash: 29
+  prerelease: 
+  segments: 
+  - 0
+  - 0
+  - 1
+  version: 0.0.1
+platform: ruby
+authors: 
+- Matt Walker
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2012-01-08 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: 43
+        segments: 
+        - 0
+        - 12
+        - 2
+        version: 0.12.2
+  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: Respondsass - Configurable responsive framework for Sass and Compass
+email: matt@my-html-codes.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- README.md
+- lib/respondsass.rb
+- templates/project/manifest.rb
+- templates/project/screen.scss
+- stylesheets/_respondsass.scss
+- stylesheets/respondsass/_baseline.scss
+- stylesheets/respondsass/_buttons.scss
+- stylesheets/respondsass/_col-generator.scss
+- stylesheets/respondsass/_create-grid.scss
+- stylesheets/respondsass/_easy-nav.scss
+- stylesheets/respondsass/_rem-sizing.scss
+- stylesheets/respondsass/_respond-to.scss
+homepage: http://www.my-html-codes.com/respondsass
+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: 23
+      segments: 
+      - 1
+      - 3
+      - 6
+      version: 1.3.6
+requirements: []
+
+rubyforge_project: 
+rubygems_version: 1.8.25
+signing_key: 
+specification_version: 3
+summary: Easy way to create a responsive grid framework with Sass
+test_files: []
+