Flexbox Grid (#47)

* Fixed the clone URL issue

* worked on the flexbox grid and documented it well

* Trigger a Codeship build

* Fix grid issues and document the responsive columns.

* Fixed some responsive issues.

* Added a tablet size for the snapshots.

assets/stylesheets/shipyard/_components.sass

@@ -1,4 +1,3 @@
-@import shipyard/components/header
 @import shipyard/components/code
 @import shipyard/components/buttons
 @import shipyard/components/icons

assets/stylesheets/shipyard/_utilities.sass

@@ -2,3 +2,4 @@
 @import shipyard/utilities/display
 @import shipyard/utilities/positioning
 @import shipyard/utilities/typography
+@import shipyard/utilities/margin

assets/stylesheets/shipyard/components/_boxes.sass

@@ -14,7 +14,7 @@
     background: $gray-lighter
 
   &-rounded
-    border-radius: 50%
+    border-radius: 1000px
 
   &-link
     color: $blue

assets/stylesheets/shipyard/core/_grid.sass

@@ -13,7 +13,8 @@ $widths: (auto, 5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 7
 @mixin column-sizes
   @each $width in $widths
     &-#{$width}
-      +column-style(width, $width)
+      +column-style(max-width, $width)
+      +column-style(flex-basis, $width)
     &-offset-#{$width}
       +column-style(margin-left, $width)
 
@@ -30,11 +31,15 @@ $widths: (auto, 5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 7
 
 .col
   display: block
-  float: left
   position: relative
+  flex-basis: 0
+  flex-grow: 1
+  flex-shrink: 1
   +responsive-padding(left right)
 
   &-container
+    display: flex
+    flex-wrap: wrap
     +clearfix
     +responsive-margin(left right, $divisor: -2)
 

assets/stylesheets/shipyard/utilities/_margin.sass

@@ -0,0 +1,7 @@
+.margin
+  @each $direction in (top, right, bottom, left)
+    &-#{$direction}
+      +all-media-sizes
+        @each $size, $value in (none: 0, xxs: 5px, xs: 10px, sm: 15px, md: 20px, lg: 30px, xl: 40px, xxl: 50px)
+          &-#{$size}
+            margin-#{$direction}: $value

assets/stylesheets/shipyard/utilities/_typography.sass

@@ -34,14 +34,6 @@
       &-#{$value}
         text-align: $value
 
-.margin
-  @each $direction in (top, right, bottom, left)
-    &-#{$direction}
-      +all-media-sizes
-        @each $size, $value in (none: 0, xxs: 5px, xs: 10px, sm: 15px, md: 20px, lg: 30px, xl: 40px, xxl: 50px)
-          &-#{$size}
-            margin-#{$direction}: $value
-
 .text
   &-shadow
     text-shadow: 0 1px 0 rgba(#000,.08)

ci/percy

@@ -13,4 +13,4 @@ cd ../
 pwd
 
 echo -e "\n\n************** Percy Snapshot **************"
-bundle exec percy snapshot --widths "375,1280" styleguide/_site/
+bundle exec percy snapshot --widths "375,768,1280" styleguide/_site/

styleguide/_assets/css/application.sass

@@ -1,6 +1,7 @@
 $font-family: "museo-sans-rounded", "Museo Sans Rounded", Arial, sans-serif
 $font-monospace: 'Roboto Mono', monospace
 @import shipyard
+@import shipyard/components/header
 @import url('https://use.typekit.net/wel6tpj.css')
 @import url('https://fonts.googleapis.com/css?family=Roboto+Mono')
 

styleguide/_assets/css/views.sass

@@ -5,7 +5,7 @@ code
     @extend .code-inline
   div.highlighter-rouge &
     @extend .code-block
-    margin: 0 0 30px
+    margin: 30px 0
 
 hr
   +respond-to(margin, (x0: 30px 0, x1: 40px 0, x2: 50px 0))

styleguide/components/grid.md

@@ -1,66 +1,126 @@
 ---
 title: Shipyard Grid
-description: The grid is percentage-based and also entirely responsive. Each class needs the foundational `.col` class in order to function properly, and also should be contained inside the `.col-container` as well.
-example_one: [10,20,25,33]
-example_two: [50,55,60,65,70,75,80,85,90,95,100]
-example_three: [25,35,45,50,55,60,65,70,75]
+description: The Shipyard grid is a percentage-based, flexbox grid and is entirely responsive. Each class needs the foundational `.col` class in order to function properly, and also should be contained inside the `.col-container` as well.
+container_classes: col-container margin-top-xs margin-top-x1-sm margin-top-x2-md
+box_classes: box-secondary text-light text-sm strong align-center
+example_flex_columns: [10,20,25,33,50]
+example_sizes: [5,10,15,20,25,30,33,35,40,45,50,55,60,65,66,70,75,80,85,90,95,100]
+example_offsets: [5,10,15,20,25,30,35,40,45,50,55,60,65,70,75]
 ---
 
 {% include page-heading.html page=page %}
 
 ---
 
-{% for example in page.example_one %}
-  <div class="col-container margin-top-xs margin-top-x1-sm margin-top-x2-md">
+### Flexible Columns `.col`
+<p class="text-light margin-bottom-md">By default, the flexbox-based grid will automatically size each column inside the container.</p>
+
+{% for example in page.example_flex_columns %}
+  <div class="{{ page.container_classes }}">
     {% assign num = 100 | divided_by: example %}
     {% for i in (1..num) %}
-      <div class="col col-{{ example }} align-center">
-        <div class="box-secondary text-light text-sm strong">{{ example }}</div>
+      <div class="col">
+        <div class="{{ page.box_classes }}">{{ example }}</div>
       </div>
     {% endfor %}
   </div>
 {% endfor %}
-
-<div class="col-container margin-top-xs margin-top-x1-sm margin-top-x2-md">
+<div class="{{ page.container_classes }}">
   <div class="col col-66 align-center">
-    <div class="box-secondary text-light text-sm strong">66</div>
+    <div class="{{ page.box_classes }}">66</div>
   </div>
-  <div class="col col-33 align-center">
-    <div class="box-secondary text-light text-sm strong">33</div>
+  <div class="col align-center">
+    <div class="{{ page.box_classes }}">auto</div>
   </div>
 </div>
 
+```html
+<div class="col-container">
+  <div class="col"><!-- column contents --></div>
+  <div class="col"><!-- column contents --></div>
+  <div class="col"><!-- column contents --></div>
+</div>
+```
+
 ---
 
 ### Column Sizes `.col-{ n }`
+<p class="text-light margin-bottom-md" markdown="1">The column sizes are percentage-based and available in any size from `5-100` in increments of 5.</p>
 
-{% for i in page.example_two %}
-  <div class="col-container margin-top-xs margin-top-x1-sm margin-top-x2-md">
-    <div class="col col-{{ i }} align-center">
-      <div class="box-secondary text-light text-sm strong">{{ i }}</div>
-    </div>
-    {% if i < 100 %}
-      <div class="col col-{{ 100 | minus: i }} align-center">
-        <div class="box-secondary text-light text-sm strong">{{ 100 | minus: i }}</div>
+{% for example in page.example_sizes %}
+  <div class="{{ page.container_classes }}">
+    {% assign num = 100 | divided_by: example %}
+    {% for i in (1..num) %}
+      <div class="col col-{{ example }}">
+        <div class="{{ page.box_classes }}">{{ example }}</div>
+      </div>
+    {% endfor %}
+
+    {% assign remainder = 100 | modulo: example %}
+    {% if remainder > 1 %}
+      <div class="col col-{{ remainder }}">
+        <div class="{{ page.box_classes }}">{{ remainder }}</div>
       </div>
     {% endif %}
   </div>
 {% endfor %}
 
+```html
+<div class="col-container">
+  <div class="col col-33"><!-- column contents --></div>
+  <div class="col col-33"><!-- column contents --></div>
+  <div class="col col-33"><!-- column contents --></div>
+</div>
+```
+
 ---
 
 ### Offset Columns `.col-offset-{ n }`
-<p class="text-light margin-bottom-sm">Useful when you need to push columns to the right to fill some empty space.</p>
+<p class="text-light margin-bottom-md">Useful when you need to push columns to the right to fill some empty space.</p>
 
-{% for i in page.example_three %}
-  <div class="col-container margin-top-xs margin-top-x1-sm margin-top-x2-md">
-    <div class="col col-{{ i }} align-center">
-      <div class="box-secondary text-light text-sm strong">{{ i }}</div>
+{% assign example_offsets = page.example_offsets | reverse %}
+{% for i in example_offsets %}
+  <div class="{{ page.container_classes }}">
+    <div class="col col-{{ i }}">
+      <div class="{{ page.box_classes }}">{{ i }}</div>
     </div>
     {% if i < 100 %}
-      <div class="col col-20 col-offset-{{ 80 | minus: i }} align-center">
-        <div class="box-secondary text-light text-sm strong">offset {{ 80 | minus: i }}</div>
+      <div class="col col-20 col-offset-{{ 80 | minus: i }}">
+        <div class="{{ page.box_classes }}">offset {{ 80 | minus: i }}</div>
       </div>
     {% endif %}
   </div>
 {% endfor %}
+```html
+<div class="col-container">
+  <div class="col col-70"><!-- column contents --></div>
+  <div class="col col-20 col-offset-10"><!-- column contents --></div>
+</div>
+```
+
+---
+
+### Responsive Columns `.col-{ n }-(x1..x4)`
+<p class="text-light margin-bottom-md">Useful when you want to build a grid that works for any size of screen.</p>
+
+<div class="{{ page.container_classes }}">
+  {% for i in (1..5) %}
+    <div class="col col-100 col-x1-33 col-x2-25 col-x3-20">
+      <div class="{{ page.box_classes }}">
+        <span class="display-block display-x1-none">100</span>
+        <span class="display-none display-x1-block display-x2-none">33</span>
+        <span class="display-none display-x2-block display-x3-none">25</span>
+        <span class="display-none display-x3-block">20</span>
+      </div>
+    </div>
+  {% endfor %}
+</div>
+```html
+<div class="col-container">
+  <div class="col col-100 col-x1-33 col-x2-25 col-x3-20"><!-- column 1 --></div>
+  <div class="col col-100 col-x1-33 col-x2-25 col-x3-20"><!-- column 2 --></div>
+  <div class="col col-100 col-x1-33 col-x2-25 col-x3-20"><!-- column 3 --></div>
+  <div class="col col-100 col-x1-33 col-x2-25 col-x3-20"><!-- column 4 --></div>
+  <div class="col col-100 col-x1-33 col-x2-25 col-x3-20"><!-- column 5 --></div>
+</div>
+```