adds elastic grid padding

Former-commit-id: 5b3ac2ab9c
Former-commit-id: e8db3c212f

node/src/documents/collections/grid.html

@@ -15,7 +15,7 @@ type   : 'UI Collection'
   </div>
 </div>
 <div class="main ui grid">
-<div class="eight wide column">
+<div class="twelve wide column">
   
   <h2>Collection</h2>
   
@@ -142,24 +142,25 @@ type   : 'UI Collection'
         </div>
       </div>
     </div>
-    <div class="example">
-      <h4>Grid</h4>
-      <p>A  grid will automatically center any columns that do not match a full row width. This is useful for centering content</p>
-      <div class="ui grid">
-        <div class="column">
-          1
-        </div>
-        <div class="column">
-          2
-        </div>
-        <div class="column">
-          3
-        </div>
-        <div class="column">
-          4
-        </div>
+  </div>
+  <div class="example">
+    <h4>Grid</h4>
+    <p>A  grid will automatically center any columns that do not match a full row width. This is useful for centering content</p>
+    <div class="ui grid">
+      <div class="column">
+        1
+      </div>
+      <div class="column">
+        2
+      </div>
+      <div class="column">
+        3
+      </div>
+      <div class="column">
+        4
       </div>
     </div>
+  </div>
 
   <h2>Variations</h2>
   
@@ -198,17 +199,17 @@ type   : 'UI Collection'
   <h3>Columns</h3>
   
   <div class="example">
-    <h4>Spanning Column</h4>
+    <h4>Wide Column</h4>
     <p>A grid column can span across multiple column rows.</p>
     <div class="ui grid">
       <div class="three wide column">
-        <p><b>Colume One</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien sed dui porta id sagittis sapien imperdiet. Quisque suscipit dui vel sapien dapibus a faucibus sapien mattis. Nulla facilisi. Aliquam vitae ante a quam tincidunt blandit. Duis adipiscing, metus at dictum auctor, odio enim ornare urna, quis aliquam arcu nibh vitae felis. Donec gravida aliquam enim in mattis. Phasellus risus purus, luctus quis lobortis eget, dignissim quis ante.</p>
+        <div class="ui segment"><b>Colume One</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien sed dui porta id sagittis sapien imperdiet. Quisque suscipit dui vel sapien dapibus a faucibus sapien mattis. Nulla facilisi. Aliquam vitae ante a quam tincidunt blandit. Duis adipiscing, metus at dictum auctor, odio enim ornare urna, quis aliquam arcu nibh vitae felis. Donec gravida aliquam enim in mattis. Phasellus risus purus, luctus quis lobortis eget, dignissim quis ante.</div>
       </div>
       <div class="six wide column">
-        <p><b>Colume Two</b> Aliquam lobortis commodo sem ac accumsan. Vestibulum non faucibus lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sed lorem lorem. Nam augue erat, dignissim nec aliquam vel, congue et sapien. Integer viverra justo vel nibh suscipit commodo. Nullam ut turpis nibh, in luctus risus. Sed ut risus nec dui mattis porta. Nam nisi magna, ornare mollis congue a, suscipit at nisl.</p>
+        <div class="ui segment"><b>Colume Two</b> Aliquam lobortis commodo sem ac accumsan. Vestibulum non faucibus lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sed lorem lorem. Nam augue erat, dignissim nec aliquam vel, congue et sapien. Integer viverra justo vel nibh suscipit commodo. Nullam ut turpis nibh, in luctus risus. Sed ut risus nec dui mattis porta. Nam nisi magna, ornare mollis congue a, suscipit at nisl.</div>
       </div>
       <div class="three wide column">
-        <p><b>Colume Three</b> Donec semper mollis condimentum. Aenean eget rutrum magna. Mauris ornare nibh scelerisque turpis lobortis dignissim. Etiam eleifend justo eget quam semper vulputate. Nulla et risus convallis velit molestie iaculis. Aliquam erat volutpat. Pellentesque aliquet pellentesque nibh ut tincidunt. Nunc faucibus euismod tincidunt. Etiam convallis adipiscing est, id rutrum erat facilisis eu. Mauris in porttitor diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam consectetur orci nec quam semper sit amet bibendum nulla feugiat. Nam vehicula, arcu blandit semper sodales, nisi nisl imperdiet dolor, nec hendrerit dui lorem id felis. Integer diam ante, tempus dictum varius in, bibendum vitae nibh. Sed placerat, libero quis ultricies tempor, nisl ipsum semper orci, vitae viverra mauris lectus nec enim. Quisque eget massa eu ligula blandit molestie.</p>
+        <div class="ui segment"><b>Colume Three</b> Donec semper mollis condimentum. Aenean eget rutrum magna. Mauris ornare nibh scelerisque turpis lobortis dignissim. Etiam eleifend justo eget quam semper vulputate. Nulla et risus convallis velit molestie iaculis. Aliquam erat volutpat. Pellentesque aliquet pellentesque nibh ut tincidunt. Nunc faucibus euismod tincidunt. Etiam convallis adipiscing est, id rutrum erat facilisis eu. Mauris in porttitor diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam consectetur orci nec quam semper sit amet bibendum nulla feugiat. Nam vehicula, arcu blandit semper sodales, nisi nisl imperdiet dolor, nec hendrerit dui lorem id felis. Integer diam ante, tempus dictum varius in, bibendum vitae nibh. Sed placerat, libero quis ultricies tempor, nisl ipsum semper orci, vitae viverra mauris lectus nec enim. Quisque eget massa eu ligula blandit molestie.</div>
       </div>
     </div>
   </div>

node/src/files/components/semantic/src/collections/grid.css

@@ -19,7 +19,6 @@
   display: block;
   text-align: center;
 
-  padding: 0% 5.55555%;
   font-size: 0em;
 
   -webkit-box-sizing: border-box;
@@ -28,6 +27,32 @@
   box-sizing: border-box;
 }
 
+@media only screen and (max-width : 1000px) {
+  body > .ui.grid {
+    padding: 0% 5%;
+  }
+}
+@media only screen and (min-width : 1000px) {
+  body > .ui.grid {
+    padding: 0% 10%;
+  }
+}
+@media only screen and (min-width : 1500px) {
+  body > .ui.grid {
+    padding: 0% 15%;
+  }
+}
+@media only screen and (min-width : 1750px) {
+  body >.ui.grid {
+    padding: 0% 20%;
+  }
+}
+@media only screen and (min-width : 2000px) {
+  body > .ui.grid {
+    padding: 0% 25%;
+  }
+}
+
 /*-------------------
        Columns
 --------------------*/
@@ -253,6 +278,10 @@
 }
 
 
+/*-------------------
+       Folding
+--------------------*/
+
 @media only screen and (max-width : 1000px) {
   .ui.folding.grid {
     display: block !important;

src/collections/grid.css

@@ -19,7 +19,6 @@
   display: block;
   text-align: center;
 
-  padding: 0% 5.55555%;
   font-size: 0em;
 
   -webkit-box-sizing: border-box;
@@ -28,6 +27,32 @@
   box-sizing: border-box;
 }
 
+@media only screen and (max-width : 1000px) {
+  body > .ui.grid {
+    padding: 0% 5%;
+  }
+}
+@media only screen and (min-width : 1000px) {
+  body > .ui.grid {
+    padding: 0% 10%;
+  }
+}
+@media only screen and (min-width : 1500px) {
+  body > .ui.grid {
+    padding: 0% 15%;
+  }
+}
+@media only screen and (min-width : 1750px) {
+  body >.ui.grid {
+    padding: 0% 20%;
+  }
+}
+@media only screen and (min-width : 2000px) {
+  body > .ui.grid {
+    padding: 0% 25%;
+  }
+}
+
 /*-------------------
        Columns
 --------------------*/
@@ -253,6 +278,10 @@
 }
 
 
+/*-------------------
+       Folding
+--------------------*/
+
 @media only screen and (max-width : 1000px) {
   .ui.folding.grid {
     display: block !important;