Merge branch 'flexgrid' of github.com:Semantic-Org/Semantic-UI into examples

dist/components/container.css

@@ -24,6 +24,9 @@
     margin-left: 1em !important;
     margin-right: 1em !important;
   }
+  .ui.grid.container {
+    width: auto;
+  }
 }
 @media only screen and (min-width: 781px) and (max-width: 991px) {
   .ui.container {
@@ -31,20 +34,32 @@
     margin-left: auto !important;
     margin-right: auto !important;
   }
+  .ui.grid.container {
+    width: -webkit-calc( 752px  +  2em );
+    width: calc( 752px  +  2em );
+  }
 }
-@media only screen and (min-width: 988px) and (max-width: 1148px) {
+@media only screen and (min-width: 988px) and (max-width: 1228px) {
   .ui.container {
     width: 960px;
     margin-left: auto !important;
     margin-right: auto !important;
   }
+  .ui.grid.container {
+    width: -webkit-calc( 960px  +  2em );
+    width: calc( 960px  +  2em );
+  }
 }
-@media only screen and (min-width: 1148px) {
+@media only screen and (min-width: 1228px) {
   .ui.container {
-    width: 1120px;
+    width: 1200px;
     margin-left: auto !important;
     margin-right: auto !important;
   }
+  .ui.grid.container {
+    width: -webkit-calc( 1200px  +  2em );
+    width: calc( 1200px  +  2em );
+  }
 }
 
 

dist/components/container.min.css

@@ -7,4 +7,4 @@
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
- */.ui.container{display:block;max-width:100%!important}@media only screen and (max-width:780px){.ui.container{width:auto;margin-left:1em!important;margin-right:1em!important}}@media only screen and (min-width:781px)and (max-width:991px){.ui.container{width:752px;margin-left:auto!important;margin-right:auto!important}}@media only screen and (min-width:988px)and (max-width:1148px){.ui.container{width:960px;margin-left:auto!important;margin-right:auto!important}}@media only screen and (min-width:1148px){.ui.container{width:1120px;margin-left:auto!important;margin-right:auto!important}}.ui.text.container{display:block;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;max-width:700px!important;line-height:1.5;font-size:1.14285714rem}.ui[class*="left aligned"].container{text-align:left}.ui[class*="center aligned"].container{text-align:center}.ui[class*="right aligned"].container{text-align:right}
+ */.ui.container{display:block;max-width:100%!important}@media only screen and (max-width:780px){.ui.container{width:auto;margin-left:1em!important;margin-right:1em!important}.ui.grid.container{width:auto}}@media only screen and (min-width:781px)and (max-width:991px){.ui.container{width:752px;margin-left:auto!important;margin-right:auto!important}.ui.grid.container{width:-webkit-calc(752px + 2em);width:calc(752px + 2em)}}@media only screen and (min-width:988px)and (max-width:1228px){.ui.container{width:960px;margin-left:auto!important;margin-right:auto!important}.ui.grid.container{width:-webkit-calc(960px + 2em);width:calc(960px + 2em)}}@media only screen and (min-width:1228px){.ui.container{width:1200px;margin-left:auto!important;margin-right:auto!important}.ui.grid.container{width:-webkit-calc(1200px + 2em);width:calc(1200px + 2em)}}.ui.text.container{display:block;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;max-width:700px!important;line-height:1.5;font-size:1.14285714rem}.ui[class*="left aligned"].container{text-align:left}.ui[class*="center aligned"].container{text-align:center}.ui[class*="right aligned"].container{text-align:right}

dist/components/grid.css

@@ -193,8 +193,8 @@ body > .ui.grid {
     width: auto;
     margin-left: 0em;
     margin-right: 0em;
-    padding-left: 8%;
-    padding-right: 8%;
+    padding-left: 2em;
+    padding-right: 2em;
   }
 }
 @media only screen and (min-width: 992px) and (max-width: 1399px) {

dist/semantic.css

@@ -3417,6 +3417,10 @@ input::selection {
     margin-left: 1em !important;
     margin-right: 1em !important;
   }
+
+  .ui.grid.container {
+    width: auto;
+  }
 }
 
 @media only screen and (min-width: 781px) and (max-width: 991px) {
@@ -3425,22 +3429,37 @@ input::selection {
     margin-left: auto !important;
     margin-right: auto !important;
   }
+
+  .ui.grid.container {
+    width: -webkit-calc( 752px  +  2em );
+    width: calc( 752px  +  2em );
+  }
 }
 
-@media only screen and (min-width: 988px) and (max-width: 1148px) {
+@media only screen and (min-width: 988px) and (max-width: 1228px) {
   .ui.container {
     width: 960px;
     margin-left: auto !important;
     margin-right: auto !important;
   }
+
+  .ui.grid.container {
+    width: -webkit-calc( 960px  +  2em );
+    width: calc( 960px  +  2em );
+  }
 }
 
-@media only screen and (min-width: 1148px) {
+@media only screen and (min-width: 1228px) {
   .ui.container {
-    width: 1120px;
+    width: 1200px;
     margin-left: auto !important;
     margin-right: auto !important;
   }
+
+  .ui.grid.container {
+    width: -webkit-calc( 1200px  +  2em );
+    width: calc( 1200px  +  2em );
+  }
 }
 
 /*******************************

examples/grid.html

@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
   <!-- Site Properities -->
-  <title>Fixed Menu Example - Semantic</title>
+  <title>Grid Example - Semantic</title>
 
   <link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
   <link rel="stylesheet" type="text/css" href="../dist/components/site.css">
@@ -118,6 +118,24 @@
         </div>
       </div>
 
+      <h3>Specifying Row Width</h3>
+      <p>Specifying a grid column count will divide columns into rows of predetermined column count. Additional columns will automatically flow to the next row.</p>
+      <div class="ui three column grid">
+        <div class="column">column</div>
+        <div class="column">column</div>
+        <div class="column">column</div>
+        <div class="column">column</div>
+        <div class="column">column</div>
+        <div class="column">column</div>
+      </div>
+
+      <h3>Specifying Column Width</h3>
+      <p>You can also specify column widths for each column individually</p>
+      <div class="ui three column grid">
+        <div class="four wide column">four wide column</div>
+        <div class="eight wide column">eight wide column</div>
+        <div class="four wide column">four wide column</div>
+      </div>
 
       <h3>Special Variations</h3>
       <p>Some special variations that format grids like tables require you to specify rows. For example a <code>divided grid</code> or a <code>celled grid</code> requires row wrappers.</p>
@@ -193,7 +211,7 @@
       <h1 class="ui inverted block header">Adjusting Grids</h1>
 
 
-      <h3>Centering Content</h3>
+      <h3 class="first">Centering Content</h3>
       <p>If a row does not take up all sixteen grid columns, you can use a <code>ui centered grid</code>, <code>centered row</code>, or <code>centered column</code> to center the column contents inside the grid.
       </p>
       <div class="ui two column centered grid">
@@ -261,17 +279,6 @@
         </div>
       </div>
 
-      <h3 class="first">Specifying Column Count</h3>
-      <p>Specifying a column count will divide columns into rows of predetermined column count. Additional columns will automatically flow to the next row.</p>
-      <div class="ui three column grid">
-        <div class="column">column</div>
-        <div class="column">column</div>
-        <div class="column">column</div>
-        <div class="column">column</div>
-        <div class="column">column</div>
-        <div class="column">column</div>
-      </div>
-
       <h3>Equal Width Columns</h3>
       <p>Specifying an <code>equal width grid</code> will automatically determine column sizes to fit evenly inside one row</p>
       <div class="ui equal width grid">
@@ -288,16 +295,10 @@
         </div>
       </div>
 
-      <h3>Individual Column Width</h3>
-      <div class="ui three column grid">
-        <div class="four wide column">four wide column</div>
-        <div class="eight wide column">eight wide column</div>
-        <div class="four wide column">four wide column</div>
-      </div>
 
       <h1>Responsive Patterns</h1>
 
-      <h3>Doubling</h3>
+      <h3 class="first">Doubling</h3>
       <p>You can set columns to double in width at each device jump</p>
       <div class="ui five column doubling grid">
         <div class="column">column</div>

src/definitions/elements/container.less

@@ -36,6 +36,9 @@
     margin-left: @mobileGutter !important;
     margin-right: @mobileGutter !important;
   }
+  .ui.grid.container {
+    width: @mobileGridWidth;
+  }
 }
 @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
   .ui.container {
@@ -43,6 +46,9 @@
     margin-left: @tabletGutter !important;
     margin-right: @tabletGutter !important;
   }
+  .ui.grid.container {
+    width: @tabletGridWidth;
+  }
 }
 @media only screen and (min-width: @smallMonitorBreakpoint) and (max-width: @largeMonitorBreakpoint) {
   .ui.container {
@@ -50,6 +56,9 @@
     margin-left: @smallMonitorGutter !important;
     margin-right: @smallMonitorGutter !important;
   }
+  .ui.grid.container {
+    width: @smallMonitorGridWidth;
+  }
 }
 @media only screen and (min-width: @largeMonitorBreakpoint) {
   .ui.container {
@@ -57,6 +66,9 @@
     margin-left: @largeMonitorGutter !important;
     margin-right: @largeMonitorGutter !important;
   }
+  .ui.grid.container {
+    width: @largeMonitorGridWidth;
+  }
 }
 
 /*******************************

src/themes/default/collections/grid.variables

@@ -37,7 +37,7 @@
 
 @tabletWidth: auto;
 @tabletMargin: 0em;
-@tabletGutter: 8%;
+@tabletGutter: 2em;
 
 @computerWidth: auto;
 @computerMargin: 0em;
@@ -51,7 +51,6 @@
 @widescreenMargin: 0em;
 @widescreenMonitorGutter: 23%;
 
-
 /*--------------
      Relaxed
 ---------------*/

src/themes/default/elements/container.variables

@@ -21,11 +21,16 @@
 @smallMonitorWidth: 960px;
 @smallMonitorGutter: auto;
 
-@largeMonitorWidth: 1120px;
-@largeMonitorBreakpoint: 1148px;
+@largeMonitorWidth: 1200px;
+@largeMonitorBreakpoint: 1228px;
 @largeMonitorGutter: auto;
 
-/* Adjust breakpoints to match fixed width */
+/* Coupling (Add Negative Margin to container size) */
+@gridGutterWidth: 2em;
+@mobileGridWidth: @mobileWidth;
+@tabletGridWidth: ~"calc("@tabletWidth~" + "@gridGutterWidth~")";
+@smallMonitorGridWidth: ~"calc("@smallMonitorWidth~" + "@gridGutterWidth~")";
+@largeMonitorGridWidth: ~"calc("@largeMonitorWidth~" + "@gridGutterWidth~")";
 
 /*-------------------
        Types