Init Jekyll Theme

_posts/design/2014-08-17-grid.md

@@ -0,0 +1,72 @@
+---
+layout: page-fullwidth
+title:  "The Grid"
+subtitle:  "Multi-Device Layouts"
+description: "Create powerful multi-device layouts quickly and easily with the 12-column, nest-able Foundation grid. These are the dimensions."
+date:  2014-07-05 07:00:00
+image:
+   thumb: unsplash_7_thumb.jpg
+categories:
+    - layout 
+permalink: "/design/grid/"
+---
+*Feeling Responsive* is built on Foundation. And of course, we make use of the wonderful grid system and so can you. Find out more about [constructing  beautiful layouts][1] in the foundation documentation.
+
+## Large Displays
+
+### Two Columns
+
+<div class="row">
+  <div class="large-6 columns">
+      <img src="http://placehold.it/500x281/6b6351/e1dcd7&amp;text=Width+500+Pixel">
+  </div>
+  <div class="large-6 columns">
+      <img src="http://placehold.it/500x281/e05a10/e1e75e&amp;text=Width+500+Pixel">
+  </div>
+</div>
+
+### Three Columns
+
+<div class="row">
+  <div class="large-4 columns">
+      <img src="http://placehold.it/333x170/6b6351/e1dcd7&amp;text=Width+333+Pixel">
+  </div>
+  <div class="large-4 columns">
+      <img src="http://placehold.it/333x170/e05a10/e1e75e&amp;text=Width+333+Pixel">
+  </div>
+  <div class="large-4 columns">
+      <img src="http://placehold.it/333x170/fabb00/771e1e&amp;text=Width+333+Pixel">
+  </div>
+</div>
+
+
+
+### Four Columns
+
+<div class="row">
+  <div class="large-3 columns">
+      <img src="http://placehold.it/250x141/6b6351/e1dcd7&amp;text=Width+250+Pixel">
+  </div>
+  <div class="large-3 columns">
+      <img src="http://placehold.it/250x141/e05a10/e1e75e&amp;text=Width+250+Pixel">
+  </div>
+  <div class="large-3 columns">
+      <img src="http://placehold.it/250x141/fabb00/771e1e&amp;text=Width+250+Pixel">
+  </div>
+  <div class="large-3 columns">
+      <img src="http://placehold.it/250x141/00792c/acca57&amp;text=Width+250+Pixel">
+  </div>
+</div>
+
+
+
+ [1]: http://foundation.zurb.com/docs/components/grid.html
+ [2]: #
+ [3]: #
+ [4]: #
+ [5]: #
+ [6]: #
+ [7]: #
+ [8]: #
+ [9]: #
+ [10]: #