respondsass 1.0 → 1.1

data/README.md

@@ -0,0 +1,179 @@
+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
+---------------
+
+The easiest way to get started is to install as a Ruby gem. First make sure you have Sass and Compass installed, go to the command line (don't freak out at the command line like I used to do) and type:
+
+sass -version
+
+and
+
+compass -v
+
+If you get something like:
+
+Sass 3.2.5 (Media Mark)
+
+and
+
+Compass 0.12.2 (Alnilam) 
+Copyright (c) 2008-2013 Chris Eppstein 
+Released under the MIT License. 
+Compass is charityware., Please make a tax deductable donation for a worthy cause: http://umdf.org/compass"
+
+then you are all set. If not you'll need to install one or both of them. When you do have them installed getting Respondsass is as simple as this:
+
+sudo gem install respondsass
+
+This will install the ruby gem, now all we need is to create a project and require the respondsass framework, again this is easy. Navigate to the folder you want your project folder to be created in for example:
+
+cd Desktop
+
+Then simply put this (where my_project is the name of your project folder)
+
+compass create my_project -r respondsass --using respondsass
+
+Now your all set either just set compass of watching the folder:
+
+compass watch my_project
+
+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

@@ -1,30 +1,4 @@
-# All gems that are required for this extension to work should go here.
-# These are the requires you would normally put in your config.rb file
-# By default, you should always included Compass. Do not include your
-#  extension.
 require 'compass'
-
-# This tells Compass what your Compass extension is called, and where to find
-#  its files
-# Replace 'extension' with the name of your extension. Spaces allowed.
-extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
-Compass::Frameworks.register('respondsass', :path => extension_path)
-
-# Version and date of version for your Compass extension.
-# Replace Extension with the name of your extension
-#  Letters, numbers, and underscores only
-#  Version is a number. If a version contains alphas, it will be created as
-#    a prerelease version
-#  Date is in the form of YYYY-MM-DD
-module Respondsass
-  VERSION = "1.0"
-  DATE = "2013-06-01"
-end
-
-# This is where any custom SassScript should be placed. The functions will be  
-#  available on require of your extension without the need for users to import
-#  any partials. Uncomment below.
-
-# module Sass::Script::Functions
-# 
-# end
+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,32 @@
+@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:inline;
+    *zoom:1;
+    @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,40 @@
+@import "col-generator";
+@import "respond-to";
+@import "rem-sizing";
+
+.container{
+  margin: 0 auto;
+  max-width:1200px;
+  clear: both;
+}
+
+.row {
+  overflow: hidden;
+  clear:both;
+  padding: 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/_base.scss

@@ -0,0 +1,12 @@
+$primaryColor: #007fac;
+$secondaryColor: #f28411;
+$primaryFontColor: #222222;
+$secondaryFontColor: #ffffff;
+$fontFamily:  HelveticaNeue, Calibri, sans-serif;
+
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "respondsass";
+
+// ---------------------------------------------------------------------------