flair 0.0.1

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2012 YOURNAME
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,143 @@
+Flair
+==========================
+
+Flair is designed to make adding an interactive styleguide to your Rails 3
+application a snap.
+
+A little bit about Flair
+--------------------------
+
+The idea for Flair came after I discovered [KSS by Kyle Neath](https://github.com/kneath/kss).
+Using a very specific commenting style in your stylesheets, Flair will provide
+you the ability to quickly create styleguide blocks for the different components
+of your website.
+
+Flair depends on the [KSS gem](https://github.com/kneath/kss).
+
+How does this work?
+--------------------------
+
+Traditionally, if you were to create a styleguide for you website, you would
+need to create a new element for each variation of your component. Take a
+stylized button for example. You would need to have a different HTML block for
+it's normal state, hover state, active state, disabled state, etc. That's a lot
+of coding (or copy and pasting).
+
+With Flair, all you need to do is comment the code for your button, then add
+one block of HTML wrapped in a helper and voila! Flair will automatically create
+each of the states you specify.
+
+So how does this happen? Here, let me show you.
+
+Say you have the following in your `app/assets/stylesheets/buttons.css.scss`
+file:
+
+```css
+.btn {
+  background-color: #f9f9f9;
+  
+  cursor: pointer;
+  display: inline-block;
+  padding: 4px 10px;
+  margin-bottom: 0;
+  
+  color: #353535;
+  font-size: 13px;
+  line-height: 1.2;
+  text-align: center;
+  vertical-align: middle;
+  
+  border: 1px solid #555;
+  border-radius: 3px;
+}
+
+.btn:hover {
+  background-color: #c9c9c9;
+  color: #353535;
+  text-decoration: none; // just in case this is a link
+}
+
+.btn:active {
+  background-color: #666;
+  color: #f8f8f8;
+}
+```
+
+Now, that's just the base styling for this button, but we already have 3
+different states that the button can be in: normal, hovered, and active. To
+utilize Flair all you need to do is add a comment to the element you want to
+show in your styleguide. So in this case, we would add it to the core style, the
+`.btn`.
+
+```css
+/*
+  Turns the element with this class into a stylized button. Typically used on
+  <a> or <button> elements.
+  
+  :hover - sets the style for when the user hover their mouse over the element
+  :active - sets the style for when the user click the button
+  
+  Styleguide 1.0
+*/
+.btn {
+  background-color: #f9f9f9;
+  
+  cursor: pointer;
+  display: inline-block;
+  padding: 4px 10px;
+  margin-bottom: 0;
+  
+  color: #353535;
+  font-size: 13px;
+  line-height: 1.2;
+  text-align: center;
+  vertical-align: middle;
+  
+  border: 1px solid #555;
+  border-radius: 3px;
+}
+
+.btn:hover,
+.btn.pseudo-class-hover {
+  background-color: #c9c9c9;
+  color: #353535;
+  text-decoration: none; // just in case this is a link
+}
+
+.btn:active,
+.btn.pseudo-class-active {
+  background-color: #666;
+  color: #f8f8f8;
+}
+```
+
+I won't go into detail as to how you lay out the comments as Kyle does a good
+job of that on the [KSS page](http://github.com/kneath/kss). However, there
+is a very important change that I made to the CSS itself. YOu may have noticed
+that I added 2 new classes: `.pseudo-class-hover` and `.pseudo-class-active`.
+These are specific to the KSS Ruby parser and are dynamically created when 
+your stylesheets are parsed. These will come in handy, trust me.
+
+So, in our comment block we have specified a description for our button widget,
+alternate states that it can have and the styleguide section that we should
+look at to see how the button appears. pretty simple right? I mean, you are
+probably already commenting your CSS anyway right?
+
+Now onto the magic. You will need to create a new file in
+`app/view/flair/styleguide/` called `buttons.html.erb`. This filename can be
+anything you want really, but `buttons.html.erb` makes sense since that is
+what you are showing. In that file you will want to add the following code.
+
+```erb
+<%= styleguide_block '1.0' do %>
+  <button class='btn $modifier_class'>I am a button</button>
+<%- end -%>
+```
+
+That's it! When you create your example HTML you will need to make sure you
+add the `$modifier_class` class. This is a special classname that will be
+dynamically changed to any of the alternate states that you reference in your
+stylesheet. This is also why we had to add those 2 new pseudo class names for
+`:hover` and `:active`. The result will look something like this:
+
+Insert Image Here

data/Rakefile

@@ -0,0 +1,40 @@
+#!/usr/bin/env rake
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+begin
+  require 'rdoc/task'
+rescue LoadError
+  require 'rdoc/rdoc'
+  require 'rake/rdoctask'
+  RDoc::Task = Rake::RDocTask
+end
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Flair'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task :default => :test

data/app/assets/javascripts/flair/application.js

@@ -0,0 +1,15 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// the compiled file.
+//
+// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
+// GO AFTER THE REQUIRES BELOW.
+//
+//= require jquery
+//= require jquery_ujs
+//= require_tree .

data/app/assets/javascripts/flair/styleguide.js

@@ -0,0 +1,2 @@
+// Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.

data/app/assets/stylesheets/flair/application.css

@@ -0,0 +1,4 @@
+/*
+ *= require flair/imports.css.scss
+ *= require application
+*/

data/app/assets/stylesheets/flair/core/chrome.css.scss

@@ -0,0 +1,92 @@
+/*
+    Wrapper for a styleguide example
+    
+    No styleguide reference
+*/
+.flair-styleguide-example {
+  border: 1px solid;
+  border-radius: 3px;
+  @include box-shadow(0 0 8px 2px $flairGrayLight);
+}
+
+.flair-styleguide-title {
+  @include font-sans-serif();
+  
+  background-color: #353535;
+  color: $flairWhite;
+  font-size: 1.4em;
+  margin: 0;
+  padding: 18px 15px;
+  
+  .pull-right {
+    float: right;
+  }
+  
+  small {
+    font-size: $flairBaseFontSize;
+  }
+}
+
+.flair-styleguide-description {
+  @include font-sans-serif();
+  background-color: #f8f8f8;
+  border-bottom: 1px solid $flairGrayLight;
+  padding: 15px;
+}
+
+.flair-styleguide-element {
+  @include clearfix();
+  
+  border-bottom: 1px solid $flairGrayLight;
+  
+  padding: 15px;
+  position: relative;
+  
+  &:last-of-type {
+    border-bottom: 0;
+  }
+  
+  &:hover .flair-styleguide-modifier-name {
+    border-color: $flairGrayLight;
+    color: $flairGrayLight;
+  }
+}
+
+.flair-styleguide-modifier-name {
+  border: 1px solid $flairGrayLighter;
+  border-top: 0;
+  
+  color: $flairGrayLighter;
+  text-align: center;
+  
+  padding: 4px 8px;
+  position: absolute;
+  right: 15px;
+  top: 0;
+}
+
+.flair-page-header {
+  @include font-sans-serif();
+  border-bottom: 1px solid $flairGrayLight;
+  margin-bottom: 15px;
+  
+  a {
+    color: #5f5f5f;
+    text-decoration: none;
+  }
+}
+
+.flair-styleguide-navigation {
+  @include font-sans-serif();
+  
+  a {
+    color: $flairBlue;
+    font-size: 1.1em;
+    text-decoration: none;
+    
+    &.active {
+      color: $flairGray;
+      font-weight: bold;
+    }
+  }
+}

data/app/assets/stylesheets/flair/core/grid.css.scss

@@ -0,0 +1,2 @@
+// Fixed (940px)
+@include gridCore($flairGridColumnWidth, $flairGridGutterWidth);

data/app/assets/stylesheets/flair/core/layouts.css.scss

@@ -0,0 +1,5 @@
+.flair-container {
+  padding-top: 80px;
+  width: 960px;
+  @include container-fixed();
+}

data/app/assets/stylesheets/flair/core/mixins.css.scss

@@ -0,0 +1,317 @@
+// Mixins
+// Snippets of reusable CSS to develop faster and keep code readable
+// -----------------------------------------------------------------
+
+
+// UTILITY MIXINS
+// --------------------------------------------------
+
+// Clearfix
+// --------
+// For clearing floats like a boss h5bp.com/q
+@mixin clearfix() {
+  *zoom: 1;
+  &:before,
+  &:after {
+    display: table;
+    content: "";
+  }
+  &:after {
+    clear: both;
+  }
+}
+.clearfix { @include clearfix(); }
+
+// Webkit-style focus
+// ------------------
+@mixin tab-focus() {
+  // Default
+  outline: thin dotted #333;
+  // Webkit
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
+// Center-align a block level element
+// ----------------------------------
+@mixin center-block() {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// IE7 inline-block
+// ----------------
+@mixin ie7-inline-block() {
+  *display: inline; /* IE7 inline-block hack */
+  *zoom: 1;
+}
+
+// IE7 likes to collapse whitespace on either side of the inline-block elements.
+// Ems because we're attempting to match the width of a space character. Left
+// version is for form buttons, which typically come after other elements, and
+// right version is for icons, which come before. Applying both is ok, but it will
+// mean that space between those elements will be .6em (~2 space characters) in IE7,
+// instead of the 1 space in other browsers.
+@mixin ie7-restore-left-whitespace() {
+  *margin-left: .3em;
+
+  &:first-child {
+    *margin-left: 0;
+  }
+}
+
+@mixin ie7-restore-right-whitespace() {
+  *margin-right: .3em;
+
+  &:last-child {
+    *margin-left: 0;
+  }
+}
+
+// FONTS
+// --------------------------------------------------
+@mixin font-family-serif() {
+  font-family: $flairSerifFontFamily;
+}
+@mixin font-family-sans-serif() {
+  font-family: $flairSansFontFamily;
+}
+@mixin font-family-monospace() {
+  font-family: $flairMonoFontFamily;
+}
+@mixin font-shorthand($size: $flairBaseFontSize, $weight: normal, $lineHeight: $flairBaseLineHeight) {
+  font-size: $size;
+  font-weight: $weight;
+  line-height: $lineHeight;
+}
+@mixin font-serif($size: $flairBaseFontSize, $weight: normal, $lineHeight: $flairBaseLineHeight) {
+  @include font-family-serif();
+  @include font-shorthand($size, $weight, $lineHeight);
+}
+@mixin font-sans-serif($size: $flairBaseFontSize, $weight: normal, $lineHeight: $flairBaseLineHeight) {
+  @include font-family-sans-serif();
+  @include font-shorthand($size, $weight, $lineHeight);
+}
+@mixin font-monospace($size: $flairBaseFontSize, $weight: normal, $lineHeight: $flairBaseLineHeight) {
+  @include font-family-monospace();
+  @include font-shorthand($size, $weight, $lineHeight);
+}
+
+
+// CSS3 PROPERTIES
+// --------------------------------------------------
+
+// Border Radius
+@mixin border-radius($radius) {
+  -webkit-border-radius: $radius;
+     -moz-border-radius: $radius;
+          border-radius: $radius;
+}
+
+// Drop shadows
+@mixin box-shadow($shadow) {
+  -webkit-box-shadow: $shadow;
+     -moz-box-shadow: $shadow;
+          box-shadow: $shadow;
+}
+
+
+// Box sizing
+@mixin box-sizing($boxmodel) {
+  -webkit-box-sizing: $boxmodel;
+     -moz-box-sizing: $boxmodel;
+      -ms-box-sizing: $boxmodel;
+          box-sizing: $boxmodel;
+}
+
+// User select
+// For selecting text on the page
+@mixin user-select($select) {
+  -webkit-user-select: $select;
+     -moz-user-select: $select;
+      -ms-user-select: $select;
+       -o-user-select: $select;
+          user-select: $select;
+}
+
+// CSS3 Content Columns
+@mixin content-columns($columnCount, $columnGap: $gridGutterWidth) {
+  -webkit-column-count: $columnCount;
+     -moz-column-count: $columnCount;
+          column-count: $columnCount;
+  -webkit-column-gap: $columnGap;
+     -moz-column-gap: $columnGap;
+          column-gap: $columnGap;
+}
+
+	
+// Optional hyphenation
+@mixin hyphens($mode: auto) {
+  word-wrap: break-word;
+  -webkit-hyphens: $mode;
+     -moz-hyphens: $mode;
+      -ms-hyphens: $mode;
+       -o-hyphens: $mode;
+          hyphens: $mode;
+}
+
+// Opacity
+@mixin opacity($opacity: 1) {
+  opacity: $opacity;
+  filter: alpha(opacity=#{$opacity * 100});
+}
+
+
+
+// BACKGROUNDS
+// --------------------------------------------------
+
+// Add an alphatransparency value to any background or border color (via Elyse Holladay)
+@mixin translucent-background($color: $white, $alpha: 1) {
+  background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
+}
+@mixin translucent-border($color: $white, $alpha: 1) {
+  border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
+  @include background-clip(padding-box);
+}
+
+// Gradient Bar Colors for buttons and alerts
+@mixin gradientBar($primaryColor, $secondaryColor) {
+  @include gradient-vertical($primaryColor, $secondaryColor);
+  border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
+  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
+}
+
+// Gradients
+@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
+  background-color: $endColor;
+  background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
+  background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
+  background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
+  background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
+  background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
+  background-image: linear-gradient(left, $startColor, $endColor); // Le standard
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); // IE9 and down
+}
+@mixin gradient-vertical($startColor: #555, $endColor: #333) {
+  background-color: mix($startColor, $endColor, 60%);
+  background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
+  background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
+  background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
+  background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
+  background-image: linear-gradient(top, $startColor, $endColor); // The standard
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down
+}
+@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
+  background-color: $endColor;
+  background-repeat: repeat-x;
+  background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
+  background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
+  background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
+  background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
+  background-image: linear-gradient($deg, $startColor, $endColor); // The standard
+}
+@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
+  background-color: mix($midColor, $endColor, 80%);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
+  background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
+  background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
+  background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
+  background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
+  background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
+  background-repeat: no-repeat;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
+}
+@mixin gradient-radial($innerColor: #555, $outerColor: #333)  {
+  background-color: $outerColor;
+  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
+  background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
+  background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
+  background-image: -ms-radial-gradient(circle, $innerColor, $outerColor);
+  background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
+  background-repeat: no-repeat;
+}
+@mixin gradient-striped($color, $angle: -45deg) {
+  background-color: $color;
+  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
+  background-image: -webkit-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+  background-image: -moz-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+  background-image: -ms-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0));
+}
+// Reset filters for IE
+@mixin reset-filter() {
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}
+
+
+
+
+// Grid System
+// -----------
+
+// Centered container element
+@mixin container-fixed() {
+  margin-right: auto;
+  margin-left: auto;
+  @include clearfix();
+}
+
+// Table columns
+@mixin tableColumns($columnSpan: 1) {
+  float: none; // undo default grid column styles
+  width: (($flairGridColumnWidth) * $columnSpan) + ($flairGridGutterWidth * ($columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
+  margin-left: 0; // undo default grid column styles
+}
+
+// Make a Grid
+// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
+@mixin makeRow() {
+  margin-left: $flairGridGutterWidth * -1;
+  @include clearfix();
+}
+@mixin makeColumn($columns: 1, $offset: 0) {
+  float: left;
+  margin-left: ($flairGridColumnWidth * $offset) + ($flairGridGutterWidth * ($offset - 1)) + ($flairGridGutterWidth * 2);
+  width: ($flairGridColumnWidth * $columns) + ($flairGridGutterWidth * ($columns - 1));
+}
+
+// The Grid
+@mixin gridCore($columnWidth, $gutterWidth) {
+  .flair-row {
+    margin-left: $gutterWidth * -1;
+    @include clearfix();
+  }
+
+  [class*="flair-span"] {
+    float: left;
+    margin-left: $gutterWidth;
+  }
+
+  // Set the container width, and override it for fixed navbars in media queries
+  .flair-container { @include gridCoreSpan($flairGridColumns, $columnWidth, $gutterWidth); }
+
+  @include gridCoreSpanX($flairGridColumns, $columnWidth, $gutterWidth);
+  @include gridCoreOffsetX($flairGridColumns, $columnWidth, $gutterWidth);
+}
+@mixin gridCoreSpanX($cols, $columnWidth, $gutterWidth) {
+  @for $i from 1 through $cols {
+    .flair-span#{$i} { @include gridCoreSpan($i, $columnWidth, $gutterWidth) };
+  }
+}
+@mixin gridCoreSpan($columns, $columnWidth, $gutterWidth) {
+  width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1));
+}
+@mixin gridCoreOffsetX($cols, $columnWidth, $gutterWidth) {
+  @for $i from 1 through $cols {
+    .flair-offset#{$i} { @include gridCoreOffset($i, $columnWidth, $gutterWidth); };
+  }
+}
+@mixin gridCoreOffset($columns, $columnWidth, $gutterWidth) {
+  margin-left: ($columnWidth * $columns) + ($gutterWidth * ($columns + 1));
+}