From fc3aa3ac7ecdefc9a11316038975249f114d6232 Mon Sep 17 00:00:00 2001
From: Jack Lukic <jack@quirky.com>
Date: Thu, 9 May 2013 17:41:31 -0400
Subject: [PATCH] removes legacy column.css, adds page grid

Former-commit-id: f19fcc08b9d0a2259fbf3f567c42ec2a3d371ecf
Former-commit-id: 506935f77f3b22c7397aea2299cbd26c6f596757
---
 node/src/documents/collections/grid.html |  33 ++++++-
 src/collections/grid.css                 |  17 ++++
 src/elements/column.css                  | 105 -----------------------
 3 files changed, 48 insertions(+), 107 deletions(-)
 delete mode 100755 src/elements/column.css

diff --git a/node/src/documents/collections/grid.html b/node/src/documents/collections/grid.html
index 8e298d337..9aca3d57e 100755
--- a/node/src/documents/collections/grid.html
+++ b/node/src/documents/collections/grid.html
@@ -170,11 +170,40 @@ type   : 'UI Collection'
   <h2>Variations</h2>
   
   <h3>Grid</h3>
+
+  <div class="example">
+    <h4>Page Grid</h4>
+    <p>A grid can be formatted for page content adding gutters before and after the content of the grid to help make page contents easier to read.</p>
+    
+    <div class="ui two column page grid">
+      <div class="column">
+        <div class="ui labeled vertical fluid inverted icon menu">
+          <a class="item">
+            <i class="icon mail"></i>
+            Mail
+          </a>
+          <a class="item">
+            <i class="icon th-list"></i>
+            Directory
+          </a>
+          <a class="item">
+            <i class="icon star"></i>
+            Favorites
+          </a>
+        </div>
+      </div>
+      <div class="column">
+        <div class="ui segment">
+          <b>Inbox</b>
+          <p>Welcome to your inbox. Would you like to see more information?</p>
+        </div>
+      </div>
+    </div>
+  </div>
   
   <div class="example">
     <h4>Responsive Grid</h4>
-    <p>A responsive grid is a special type of grid useful for designing page layouts.</p>
-    <p>A standard grid does not make any assumptions about how it should change gutters depending on content. Page grids will automatically resize the gutters as a browsers resolution changes size.</p>
+    <p>A grid can be responsive and resize the proportions of its gutters as a browser resolution changes.</p>
     
     <div class="ui two column responsive grid">
       <div class="column">
diff --git a/src/collections/grid.css b/src/collections/grid.css
index 84ce8519f..bf39acdc7 100755
--- a/src/collections/grid.css
+++ b/src/collections/grid.css
@@ -73,12 +73,29 @@
   padding-top: 0px;
 }
 
+/*-------------------
+      Content
+--------------------*/
+
+.ui.grid > .row > img,
+.ui.grid > .row > .column > img {
+  max-width: 100%;  
+}
+
 
 /*******************************
            Variations
 *******************************/
 
 
+/*-------------------
+        Page
+--------------------*/
+
+.ui.page.grid {
+  padding: 0% 5%;
+}
+
 
 /*-------------------
       Responsive
diff --git a/src/elements/column.css b/src/elements/column.css
deleted file mode 100755
index ca41c38cc..000000000
--- a/src/elements/column.css
+++ /dev/null
@@ -1,105 +0,0 @@
-/*******************************
-             Columns
-*******************************/
-
-/* Text Columns */
-.ui.columns > .column,
-.ui.column {
-  width: 50%;
-  margin: 0px;
-  padding: 0px 4% 0px;
-  float: left;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
-
-  border-left: 1px solid rgba(255, 255, 255, 0.7);
-  -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.15);
-  -moz-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.15);
-  box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.15);
-}
-.ui.columns > .column:first-child,
-.ui.column:first-child {
-  border-left: none;
-  box-shadow: none;
-}
-
-/* Sizing Combinations */
-.ui.one.columns .column {
-  width: 100%;
-  padding-left: 3.5%;
-  padding-right: 3.5%;
-}
-.ui.two.columns .column {
-  width: 50%;
-  padding-left: 3%;
-  padding-right: 3%;
-}
-.ui.three.columns .column {
-  width: 33.333%;
-  padding-left: 3%;
-  padding-right: 3%;
-}
-.ui.four.columns .column {
-  width: 25%;
-  padding-left: 2%;
-  padding-right: 2%;
-}
-.ui.five.columns .column {
-  width: 20%;
-  padding-left: 1%;
-  padding-right: 1%;
-}
-.ui.six.columns .column {
-  width: 16.66%;
-  padding-left: 0.5%;
-  padding-right: 0.5%;
-}
-.ui.seven.columns .column {
-  width: 14.28%;
-  padding-left: 0.5%;
-  padding-right: 0.5%;
-}
-.ui.eight.columns .column {
-  width: 12.5%;
-  padding-left: 0.25%;
-  padding-right: 0.25%;
-}
-.ui.nine.columns .column {
-  width: 11.11%;
-  padding-left: 0.25%;
-  padding-right: 0.25%;
-}
-.ui.ten.columns .column {
-  width: 10%;
-  padding-left: 0.2%;
-  padding-right: 0.2%;
-}
-.ui.eleven.columns .column {
-  width: 9.09%;
-  padding-left: 0.2%;
-  padding-right: 0.2%;
-}
-.ui.twelve.columns .column {
-  width: 8.3333%;
-  padding-left: 0.1%;
-  padding-right: 0.1%;
-}
-
-/* Fitted Colums */
-.ui.fitted.columns .column:first-child {
-  padding-left: 0px;
-}
-.ui.fitted.columns .column:last-child {
-  padding-right: 0px;
-}
-
-/* Simple Columns */
-.ui.columns.simple .column,
-.ui.column.simple {
-  border-left: none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
\ No newline at end of file