Set outer-container max-width with argument

Closes #201

app/assets/stylesheets/grid/_outer-container.scss

@@ -1,6 +1,36 @@
-@mixin outer-container {
+/**
+ * Makes an element a outer container by centring it in the viewport, clearing its floats, and setting its `max-width`.
+ *
+ * Although optional, using `outer-container` is recommended. The mixin can be called on more than one element per page, as long as they are not nested.
+ *
+ * @param {Number} $local-max-width ($max-width) - Max width to be applied to the element. Can be a percentage or a measure.
+ *
+ * @example scss
+ *  .element {
+ *    @include outer-container(100%);
+ *  }
+ *
+ * @example css
+ *  .element {
+ *    *zoom: 1;
+ *    max-width: 100%;
+ *    margin-left: auto;
+ *    margin-right: auto;
+ *  }
+ *
+ *  .element:before, .element:after {
+ *    content: " ";
+ *    display: table;
+ *  }
+ *
+ *  .element:after {
+ *    clear: both;
+ *  }
+ */
+
+@mixin outer-container($local-max-width: $max-width) {
   @include clearfix;
-  max-width: $max-width;
+  max-width: $local-max-width;
   margin: {
     left: auto;
     right: auto;

spec/neat/container_spec.rb

@@ -12,4 +12,10 @@
   it "sets max-width" do
     expect('.container-default').to have_rule('max-width: 960px')
   end
+
+  context "with max-width argument: 100%" do
+    it "sets max-width to 100%" do
+      expect('.container-custom-width').to have_rule('max-width: 100%')
+    end
+  end
 end

test/outer-container.scss

@@ -3,5 +3,9 @@
 $max-width: 960px;
 
 .container-default {
-  @include outer-container;
+  @include outer-container();
+}
+
+.container-custom-width {
+  @include outer-container(100%);
 }