updates columns to sixteen

Former-commit-id: a37c72b223
Former-commit-id: 5517a351fe

build/packaged/semantic.min.css.REMOVED.git-id

@@ -1 +1 @@
-6cf94be31bed8e8026b857cacec719ee0ca0f2ba
+c37ad5b5b0d4ba307aa9c800adb0f31425e070a1

build/uncompressed/collections/grid.css

@@ -39,8 +39,8 @@
   display: inline-block;
   text-align: left;
   font-size: 1rem;
-  padding-left: 1.33%;
-  padding-right: 1.33%;
+  padding-left: 1%;
+  padding-right: 1%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
@@ -121,39 +121,51 @@
 --------------------*/
 /* Sizing Combinations */
 .ui.grid .one.wide.column {
-  width: 8.3333%;
+  width: 6.25%;
 }
 .ui.grid .two.wide.column {
-  width: 16.66667%;
+  width: 12.5%;
 }
 .ui.grid .three.wide.column {
-  width: 25%;
+  width: 18.75%;
 }
 .ui.grid .four.wide.column {
-  width: 33.3333%;
+  width: 25%;
 }
 .ui.grid .five.wide.column {
-  width: 41.6666%;
+  width: 31.25%;
 }
 .ui.grid .six.wide.column {
-  width: 50%;
+  width: 37.5%;
 }
 .ui.grid .seven.wide.column {
-  width: 58.3333%;
+  width: 43.75%;
 }
 .ui.grid .eight.wide.column {
-  width: 66.6666%;
+  width: 50%;
 }
 .ui.grid .nine.wide.column {
-  width: 75%;
+  width: 56.25%;
 }
 .ui.grid .ten.wide.column {
-  width: 83.3333%;
+  width: 62.5;
 }
 .ui.grid .eleven.wide.column {
-  width: 91.666%;
+  width: 68.75;
 }
 .ui.grid .twelve.wide.column {
+  width: 75%;
+}
+.ui.grid .thirteen.wide.column {
+  width: 81.25%;
+}
+.ui.grid .fourteen.wide.column {
+  width: 87.5%;
+}
+.ui.grid .fifteen.wide.column {
+  width: 93.75%;
+}
+.ui.grid .sixteen.wide.column {
   width: 100%;
 }
 /*-------------------
@@ -162,7 +174,7 @@
 /* Standard */
 .ui.grid > .column,
 .ui.grid > .row > .column {
-  width: 8.3333%;
+  width: 6.25%;
 }
 /* Assume full width with one column */
 .ui.grid > .column:only-child,
@@ -199,6 +211,21 @@
 .ui.eleven.column.grid .column {
   width: 9.0909%;
 }
+.ui.twelve.column.grid .column {
+  width: 8.3333%;
+}
+.ui.thirteen.column.grid .column {
+  width: 7.6923%;
+}
+.ui.fourteen.column.grid .column {
+  width: 7.1428%;
+}
+.ui.fifteen.column.grid .column {
+  width: 6.6666%;
+}
+.ui.sixteen.column.grid .column {
+  width: 6.25%;
+}
 /*-------------------
        Padded
 --------------------*/

node/src/documents/collections/grid.html

@@ -24,9 +24,9 @@ type   : 'UI Collection'
     <p>A grid is made up of columns of content. By default a grid must assume a certain number of columns.</p>
     <p>Each set of columns matching up to the number of columns in a grid create a row.</p>
     
-    <div class="ui ignore warning message"><i class="icon heart"></i> <b>Using Grids</b>
-    <p>The semantic library assumes 12 columns by default. If only a single column is specified inside a grid or a grid row, semantic will assume the column to take up the entire grid width. If you would like to override this behavior, specify the grid width as a <b>one wide column</b></p>
-    <p>It is also important to note, that padding is applied directly to columns, which means other ui elements should not be used in combination with column, but directly as children.</div>
+    <div class="ui ignore green message"><i class="icon heart"></i> <b>Column Count</b> <p>All grid systems must assume an arbitrary amount of column rows. Semantic by default assumes <b>16 columns</b></div>
+    <div class="ui ignore warning message"><i class="icon info circle"></i> <b>Using Grids</b>
+    <p>It is important to note, that padding is applied directly to columns, which means other ui elements should not be used in combination with column, but directly as children.</div>
     <div class="ui grid">
       <div class="column">
         <div class="ui segment">
@@ -88,6 +88,26 @@ type   : 'UI Collection'
           12
         </div>
       </div>
+      <div class="column">
+        <div class="ui segment">
+          13
+        </div>
+      </div>
+      <div class="column">
+        <div class="ui segment">
+          14
+        </div>
+      </div>
+      <div class="column">
+        <div class="ui segment">
+          15
+        </div>
+      </div>
+      <div class="column">
+        <div class="ui segment">
+          16
+        </div>
+      </div>
     </div>
   </div>
   
@@ -188,6 +208,26 @@ type   : 'UI Collection'
             12a
           </div>
         </div>
+        <div class="column">
+          <div class="ui segment">
+            13a
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui segment">
+            14a
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui segment">
+            15a
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui segment">
+            16a
+          </div>
+        </div>
       </div>
       <div class="row">
         <div class="column">
@@ -250,6 +290,26 @@ type   : 'UI Collection'
             12b
           </div>
         </div>
+        <div class="column">
+          <div class="ui segment">
+            13b
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui segment">
+            14b
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui segment">
+            15b
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui segment">
+            16b
+          </div>
+        </div>
       </div>
     </div>
   </div>

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

@@ -39,8 +39,8 @@
   display: inline-block;
   text-align: left;
   font-size: 1rem;
-  padding-left: 1.33%;
-  padding-right: 1.33%;
+  padding-left: 1%;
+  padding-right: 1%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
@@ -121,39 +121,51 @@
 --------------------*/
 /* Sizing Combinations */
 .ui.grid .one.wide.column {
-  width: 8.3333%;
+  width: 6.25%;
 }
 .ui.grid .two.wide.column {
-  width: 16.66667%;
+  width: 12.5%;
 }
 .ui.grid .three.wide.column {
-  width: 25%;
+  width: 18.75%;
 }
 .ui.grid .four.wide.column {
-  width: 33.3333%;
+  width: 25%;
 }
 .ui.grid .five.wide.column {
-  width: 41.6666%;
+  width: 31.25%;
 }
 .ui.grid .six.wide.column {
-  width: 50%;
+  width: 37.5%;
 }
 .ui.grid .seven.wide.column {
-  width: 58.3333%;
+  width: 43.75%;
 }
 .ui.grid .eight.wide.column {
-  width: 66.6666%;
+  width: 50%;
 }
 .ui.grid .nine.wide.column {
-  width: 75%;
+  width: 56.25%;
 }
 .ui.grid .ten.wide.column {
-  width: 83.3333%;
+  width: 62.5;
 }
 .ui.grid .eleven.wide.column {
-  width: 91.666%;
+  width: 68.75;
 }
 .ui.grid .twelve.wide.column {
+  width: 75%;
+}
+.ui.grid .thirteen.wide.column {
+  width: 81.25%;
+}
+.ui.grid .fourteen.wide.column {
+  width: 87.5%;
+}
+.ui.grid .fifteen.wide.column {
+  width: 93.75%;
+}
+.ui.grid .sixteen.wide.column {
   width: 100%;
 }
 /*-------------------
@@ -162,7 +174,7 @@
 /* Standard */
 .ui.grid > .column,
 .ui.grid > .row > .column {
-  width: 8.3333%;
+  width: 6.25%;
 }
 /* Assume full width with one column */
 .ui.grid > .column:only-child,
@@ -199,6 +211,21 @@
 .ui.eleven.column.grid .column {
   width: 9.0909%;
 }
+.ui.twelve.column.grid .column {
+  width: 8.3333%;
+}
+.ui.thirteen.column.grid .column {
+  width: 7.6923%;
+}
+.ui.fourteen.column.grid .column {
+  width: 7.1428%;
+}
+.ui.fifteen.column.grid .column {
+  width: 6.6666%;
+}
+.ui.sixteen.column.grid .column {
+  width: 6.25%;
+}
 /*-------------------
        Padded
 --------------------*/

node/src/files/stylesheets/semantic.css

@@ -806,8 +806,8 @@ a:hover {
 }
 #example .highlighted.example .grid,
 #example .ui.type.items .image .grid {
-  -webkit-animation: grid 5s ease-in-out infinite;
-  -moz-animation: grid 5s ease-in-out infinite;
+  -webkit-animation: grid 15s ease infinite;
+  -moz-animation: grid 15s ease infinite;
   background-color: #F6F6F6;
   margin: 0em auto;
 }

src/collections/grid.less

@@ -47,8 +47,8 @@
   text-align: left;
   font-size: 1rem;
 
-  padding-left: 1.33%;
-  padding-right: 1.33%;
+  padding-left: 1%;
+  padding-right: 1%;
 
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -164,42 +164,53 @@
     Column Width
 --------------------*/
 
-
 /* Sizing Combinations */
 .ui.grid .one.wide.column {
-  width: 8.3333%;
+  width: 6.25%;
 }
 .ui.grid .two.wide.column {
-  width: 16.66667%;
+  width: 12.5%;
 }
 .ui.grid .three.wide.column {
-  width: 25%;
+  width: 18.75%;
 }
 .ui.grid .four.wide.column {
-  width: 33.3333%;
+  width: 25%;
 }
 .ui.grid .five.wide.column {
-  width: 41.6666%;
+  width: 31.25%;
 }
 .ui.grid .six.wide.column {
-  width: 50%;
+  width: 37.5%;
 }
 .ui.grid .seven.wide.column {
-  width: 58.3333%;
+  width: 43.75%;
 }
 .ui.grid .eight.wide.column {
-  width: 66.6666%;
+  width: 50%;
 }
 .ui.grid .nine.wide.column {
-  width: 75%;
+  width: 56.25%;
 }
 .ui.grid .ten.wide.column {
-  width: 83.3333%;
+  width: 62.5;
 }
 .ui.grid .eleven.wide.column {
-  width: 91.666%;
+  width: 68.75;
 }
 .ui.grid .twelve.wide.column {
+  width: 75%;
+}
+.ui.grid .thirteen.wide.column {
+  width: 81.25%;
+}
+.ui.grid .fourteen.wide.column {
+  width: 87.5%;
+}
+.ui.grid .fifteen.wide.column {
+  width: 93.75%;
+}
+.ui.grid .sixteen.wide.column {
   width: 100%;
 }
 
@@ -210,7 +221,7 @@
 /* Standard */
 .ui.grid > .column,
 .ui.grid > .row > .column {
-  width: 8.3333%;
+  width: 6.25%;
 }
 /* Assume full width with one column */
 .ui.grid > .column:only-child,
@@ -218,46 +229,51 @@
   width: 100%;
 }
 
-
 .ui.two.column.grid .column {
   width: 50%;
 }
-
 .ui.three.column.grid .column {
   width: 33.3333%;
 }
-
 .ui.four.column.grid .column {
   width: 25%;
 }
-
 .ui.five.column.grid .column {
   width: 20%;
 }
-
 .ui.six.column.grid .column {
   width: 16.66667%;
 }
-
 .ui.seven.column.grid .column {
   width: 14.2857%;
 }
-
 .ui.eight.column.grid .column {
   width: 12.5%;
 }
-
 .ui.nine.column.grid .column {
   width: 11.1111%;
 }
-
 .ui.ten.column.grid .column {
   width: 10%;
 }
-
 .ui.eleven.column.grid .column {
   width: 9.0909%;
 }
+.ui.twelve.column.grid .column {
+  width: 8.3333%;
+}
+.ui.thirteen.column.grid .column {
+  width: 7.6923%;
+}
+.ui.fourteen.column.grid .column {
+  width: 7.1428%;
+}
+.ui.fifteen.column.grid .column {
+  width: 6.6666%;
+}
+.ui.sixteen.column.grid .column {
+  width: 6.25%;
+}
 
 
 /*-------------------