Responsive grids are now deprecated, all page grids are now responsive.

11 years ago · 83fad5c846
19 changed files with 207 additions and 278 deletions
--- a/NOTES.md
+++ b/NOTES.md
@ -1,5 +1,11 @@
 ## RELEASE NOTES

+### Version 0.3.0- Sep 28, 2013
+
+**Fixes**
+- Responsive Grid is now called "Page Grid". Responsive grids are now deprecated. This reduces confusion.
+- Negative margins are now automatically removed from grids that are descendents of body tag.
+
 ### Version 0.2.5- Sep 28, 2013

 **Fixes**
--- a/build/less/collections/grid.less
+++ b/build/less/collections/grid.less
@ -26,6 +26,12 @@
  -ms-box-sizing: border-box;
  box-sizing: border-box;
 }
+
+body > .ui.grid {
+  margin-left: 0%;
+  margin-right: 0%:;
+}
+
 .ui.grid:after,
 .ui.row:after {
  content: ".";
@ -92,49 +98,36 @@
 *******************************/


-/*-------------------
-        Page
--------------------*/
+/*-----------------------
+  Page Grid (Responsive)
+-------------------------*/

 .ui.page.grid {
-  margin: 0%;
-  padding-left: 0%;
-  padding-right: 0%;
-}
-
-
-/*-------------------
-      Responsive
--------------------*/
-
-.ui.responsive.grid {
-  margin-left: 0% !important;
-  margin-right: 0% !important;
  min-width: 320px;
 }

@media only screen and (max-width : 998px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 4%;
  }
 }
@media only screen and (min-width : 998px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 8%;
  }
 }
@media only screen and (min-width : 1500px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 13%;
  }
 }
@media only screen and (min-width : 1750px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 18%;
  }
 }
@media only screen and (min-width : 2000px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 23%;
  }
 }
@ -418,7 +411,7 @@
  box-shadow: none;
 }

-.ui.celled.responsive.grid {
+.ui.celled.page.grid {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
--- a/build/minified/collections/grid.min.css
+++ b/build/minified/collections/grid.min.css
--- a/build/packaged/css/semantic.css
+++ b/build/packaged/css/semantic.css
@ -518,6 +518,10 @@
  -ms-box-sizing: border-box;
  box-sizing: border-box;
 }
+body > .ui.grid {
+  margin-left: 0%;
+  margin-right: 0%:;
+}
 .ui.grid:after,
 .ui.row:after {
  content: ".";
@ -569,43 +573,34 @@
 /*******************************
           Variations
 *******************************/
-/*-------------------
-        Page
--------------------*/
+/*-----------------------
+  Page Grid (Responsive)
+-------------------------*/
 .ui.page.grid {
-  margin: 0%;
-  padding: 0% 2%;
-}
-/*-------------------
-      Responsive
--------------------*/
-.ui.responsive.grid {
-  margin-left: 0% !important;
-  margin-right: 0% !important;
  min-width: 320px;
 }
@media only screen and (max-width: 998px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 4%;
  }
 }
@media only screen and (min-width: 998px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 8%;
  }
 }
@media only screen and (min-width: 1500px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 13%;
  }
 }
@media only screen and (min-width: 1750px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 18%;
  }
 }
@media only screen and (min-width: 2000px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 23%;
  }
 }
@ -851,7 +846,7 @@
  -moz-box-shadow: none;
  box-shadow: none;
 }
-.ui.celled.responsive.grid {
+.ui.celled.page.grid {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
--- a/build/packaged/css/semantic.min.css
+++ b/build/packaged/css/semantic.min.css
--- a/build/packaged/javascript/semantic.min.js
+++ b/build/packaged/javascript/semantic.min.js
@ -1,5 +1,5 @@
 /** # Semantic UI
-* Version: 0.2.4
+* Version: 0.3.0
 * http://github.com/jlukic/semantic-ui
 *
 *
--- a/build/uncompressed/collections/grid.css
+++ b/build/uncompressed/collections/grid.css
@ -22,6 +22,10 @@
  -ms-box-sizing: border-box;
  box-sizing: border-box;
 }
+body > .ui.grid {
+  margin-left: 0%;
+  margin-right: 0%:;
+}
 .ui.grid:after,
 .ui.row:after {
  content: ".";
@ -73,44 +77,34 @@
 /*******************************
           Variations
 *******************************/
-/*-------------------
-        Page
--------------------*/
+/*-----------------------
+  Page Grid (Responsive)
+-------------------------*/
 .ui.page.grid {
-  margin: 0%;
-  padding-left: 0%;
-  padding-right: 0%;
-}
-/*-------------------
-      Responsive
--------------------*/
-.ui.responsive.grid {
-  margin-left: 0% !important;
-  margin-right: 0% !important;
  min-width: 320px;
 }
@media only screen and (max-width: 998px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 4%;
  }
 }
@media only screen and (min-width: 998px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 8%;
  }
 }
@media only screen and (min-width: 1500px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 13%;
  }
 }
@media only screen and (min-width: 1750px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 18%;
  }
 }
@media only screen and (min-width: 2000px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 23%;
  }
 }
@ -356,7 +350,7 @@
  -moz-box-shadow: none;
  box-shadow: none;
 }
-.ui.celled.responsive.grid {
+.ui.celled.page.grid {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
--- a/node/package.json
+++ b/node/package.json
@ -1,7 +1,7 @@
 {
  "semantic": {
    "name": "Semantic UI",
-    "version": "0.2.5"
+    "version": "0.3.0"
  },
  "dependencies": {
    "docpad": "~6.53.0",
--- a/node/src/documents/collection.html.eco
+++ b/node/src/documents/collection.html.eco
@ -62,7 +62,7 @@ type        : 'Semantic'
    </div>
    <div class="item">
      <div class="image">
-        <div class="ui three column aligned responsive grid">
+        <div class="ui three column aligned page grid">
          <div class="column"><div class="ui segment">1</div></div>
          <div class="column"><div class="ui segment">2</div></div>
          <div class="column"><div class="ui segment">3</div></div>
--- a/node/src/documents/collections/grid.html.eco
+++ b/node/src/documents/collections/grid.html.eco
@ -248,13 +248,13 @@ type        : 'UI Collection'

  <h2 class="ui dividing header">Types</h2>

-
-  <div class="highlighted example">
+  <div class="example">
    <h4 class="ui header">Page Grid</h4>
-    <p>A page grid is a grid that exists on the top level of a website and includes gutters to the left and right.</p>
+    <p>A page grid exists on the top level of a web site. It can change its left and right gutter size to be responsive to a browser's width. This means the gutters to left and right of grid columns will alter in size as a browser's resolution increases.</p>

-    <div class="ui ignore warning message"><i class="icon info circle"></i>
-    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 text message info ignore">
+      <i class="icon heart"></i> Semantic UI's page grid by default will change the page gutters to increase at 250pixel intervals.
+    </div>

    <div class="ui two column page grid">
      <div class="column">
@ -399,123 +399,6 @@ type        : 'UI Collection'

  <h3 class="ui header">Grid</h3>

-  <div class="example">
-    <h4 class="ui header">Responsive to Size</h4>
-    <p>A grid can change its size to be responsive to a browser's width. This means the gutters to left and right of grid columns will alter in size as a browser's resolution increases.</p>
-
-    <div class="ui text message info ignore">
-      <i class="icon heart"></i> Semantic UI's responsive grid by default will change the page gutters to increase at 250pixel intervals.
-    </div>
-
-    <div class="ui two column responsive 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 lab"></i>
-            Lab
-          </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 class="ui header">Responsive to Device</h4>
-    <p>A grid can have its columns, or rows only show for either a computer, tablet, or mobile.</p>
-    <div class="ui text message info ignore">
-      <i class="icon heart"></i> Breakpoints are 768 for mobile, 768-998 for tablet and 998 for pc</i>
-    </div>
-    <div class="ui grid">
-      <div class="two column mobile only row">
-        <div class="column">
-          <div class="ui segment">
-            Mobile
-          </div>
-        </div>
-        <div class="column">
-          <div class="ui segment">
-            Mobile
-          </div>
-        </div>
-      </div>
-      <div class="three column row">
-        <div class="computer only column">
-          <div class="ui segment">
-            Computer
-          </div>
-        </div>
-        <div class="tablet mobile only column">
-          <div class="ui segment">
-            Tablet and Mobile
-          </div>
-        </div>
-        <div class="column">
-          <div class="ui segment">
-            All Sizes
-          </div>
-        </div>
-        <div class="column">
-          <div class="ui segment">
-            All Sizes
-          </div>
-        </div>
-      </div>
-      <div class="four column computer only row">
-        <div class="column">
-          <div class="ui segment">
-            Computer
-          </div>
-        </div>
-        <div class="column">
-          <div class="ui segment">
-            Computer
-          </div>
-        </div>
-        <div class="column">
-          <div class="ui segment">
-            Computer
-          </div>
-        </div>
-        <div class="column">
-          <div class="ui segment">
-            Computer
-          </div>
-        </div>
-      </div>
-      <div class="three column tablet only row">
-        <div class="column">
-          <div class="ui segment">
-            Tablet
-          </div>
-        </div>
-        <div class="column">
-          <div class="ui segment">
-            Tablet
-          </div>
-        </div>
-        <div class="column">
-          <div class="ui segment">
-            Tablet
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
  <div class="example">
    <h4 class="ui header">Specifying Column Count Per Row</h4>
    <p>A grid can have a different number of columns per row</p>
@ -717,6 +600,89 @@ type        : 'UI Collection'

  <h3 class="ui header">Rows</h3>

+  <div class="example">
+    <h4 class="ui header">Responsive to Device</h4>
+    <p>A grid can have its columns, or rows only show content for computer, tablet, or mobile.</p>
+    <div class="ui text message info ignore">
+      <i class="icon heart"></i> Breakpoints are 768 for mobile, 768-998 for tablet and 998 for pc</i>
+    </div>
+    <div class="ui grid">
+      <div class="two column mobile only row">
+        <div class="column">
+          <div class="ui segment">
+            Mobile
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui segment">
+            Mobile
+          </div>
+        </div>
+      </div>
+      <div class="three column row">
+        <div class="computer only column">
+          <div class="ui segment">
+            Computer
+          </div>
+        </div>
+        <div class="tablet mobile only column">
+          <div class="ui segment">
+            Tablet and Mobile
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui segment">
+            All Sizes
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui segment">
+            All Sizes
+          </div>
+        </div>
+      </div>
+      <div class="four column computer only row">
+        <div class="column">
+          <div class="ui segment">
+            Computer
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui segment">
+            Computer
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui segment">
+            Computer
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui segment">
+            Computer
+          </div>
+        </div>
+      </div>
+      <div class="three column tablet only row">
+        <div class="column">
+          <div class="ui segment">
+            Tablet
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui segment">
+            Tablet
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui segment">
+            Tablet
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
  <div class="example">
    <h4 class="ui header">Equal Height</h4>
    <p>A row can specify that it is equal height so all of its columns appear the length of its longest column.</p>
--- a/node/src/documents/index.html.eco
+++ b/node/src/documents/index.html.eco
@ -11,10 +11,10 @@ type   : 'Semantic'
 <script src="/javascript/home.js"></script>

 <div class="masthead segment">
-  <div class="ui responsive grid">
+  <div class="ui page grid">
    <div class="column">
      <div class="introduction">
-        <h1 class="ui header">Semantic UI <a class="ui black label" href="https://github.com/jlukic/Semantic-UI/blob/master/RELEASE%20NOTES.md">0.2.5</a></h1>
+        <h1 class="ui header">Semantic UI <a class="ui black label" href="https://github.com/jlukic/Semantic-UI/blob/master/RELEASE%20NOTES.md">0.3.0</a></h1>
        <h2 class="ui header">UI is the vocabulary of the web.</h2>
        <p>Semantic empowers designers and developers by creating a language for sharing UI.</p>
        <a class="ui black large labeled launch icon button"><i class="icon list layout"></i> View UI</a>
@ -27,7 +27,7 @@ type   : 'Semantic'
  </div>
 </div>
 <div class="stripe">
-  <div class="ui responsive grid">
+  <div class="ui page grid">
    <div class="ui column">
      <h2 class="ui header">
        <i class="circular emphasized code icon"></i>
@ -118,7 +118,7 @@ type   : 'Semantic'
  </div>
 </div>
 <div class="dark stripe">
-  <div class="ui responsive grid">
+  <div class="ui page grid">
    <div class="column">
      <h2 class="ui huge inverted center aligned icon header">
        <i class="circular emphasized inverted teal comment icon"></i>
@ -157,7 +157,7 @@ type   : 'Semantic'
      </div>
    </div>
  </h2>
-<div class="ui responsive grid">
+<div class="ui page grid">
  <div class="column">
    <h3 class="ui header">Let's create some tabs</h3>
    <div class="code" data-preview="true" data-type="html">
@ -188,7 +188,7 @@ type   : 'Semantic'
 </div>
 </div>
 <div class="final stripe" >
-  <div class="ui responsive grid">
+  <div class="ui page grid">
    <div class="column">
      <h2 class="ui center aligned icon header">
        <i class="circular emphasized users icon"></i>
--- a/node/src/files/build/less/collections/grid.less
+++ b/node/src/files/build/less/collections/grid.less
@ -26,6 +26,12 @@
  -ms-box-sizing: border-box;
  box-sizing: border-box;
 }
+
+body > .ui.grid {
+  margin-left: 0%;
+  margin-right: 0%:;
+}
+
 .ui.grid:after,
 .ui.row:after {
  content: ".";
@ -92,49 +98,36 @@
 *******************************/


-/*-------------------
-        Page
--------------------*/
+/*-----------------------
+  Page Grid (Responsive)
+-------------------------*/

 .ui.page.grid {
-  margin: 0%;
-  padding-left: 0%;
-  padding-right: 0%;
-}
-
-
-/*-------------------
-      Responsive
--------------------*/
-
-.ui.responsive.grid {
-  margin-left: 0% !important;
-  margin-right: 0% !important;
  min-width: 320px;
 }

@media only screen and (max-width : 998px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 4%;
  }
 }
@media only screen and (min-width : 998px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 8%;
  }
 }
@media only screen and (min-width : 1500px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 13%;
  }
 }
@media only screen and (min-width : 1750px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 18%;
  }
 }
@media only screen and (min-width : 2000px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 23%;
  }
 }
@ -418,7 +411,7 @@
  box-shadow: none;
 }

-.ui.celled.responsive.grid {
+.ui.celled.page.grid {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
--- a/node/src/files/build/minified/collections/grid.min.css
+++ b/node/src/files/build/minified/collections/grid.min.css
--- a/node/src/files/build/packaged/css/semantic.css
+++ b/node/src/files/build/packaged/css/semantic.css
@ -518,6 +518,10 @@
  -ms-box-sizing: border-box;
  box-sizing: border-box;
 }
+body > .ui.grid {
+  margin-left: 0%;
+  margin-right: 0%:;
+}
 .ui.grid:after,
 .ui.row:after {
  content: ".";
@ -569,43 +573,34 @@
 /*******************************
           Variations
 *******************************/
-/*-------------------
-        Page
--------------------*/
+/*-----------------------
+  Page Grid (Responsive)
+-------------------------*/
 .ui.page.grid {
-  margin: 0%;
-  padding: 0% 2%;
-}
-/*-------------------
-      Responsive
--------------------*/
-.ui.responsive.grid {
-  margin-left: 0% !important;
-  margin-right: 0% !important;
  min-width: 320px;
 }
@media only screen and (max-width: 998px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 4%;
  }
 }
@media only screen and (min-width: 998px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 8%;
  }
 }
@media only screen and (min-width: 1500px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 13%;
  }
 }
@media only screen and (min-width: 1750px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 18%;
  }
 }
@media only screen and (min-width: 2000px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 23%;
  }
 }
@ -851,7 +846,7 @@
  -moz-box-shadow: none;
  box-shadow: none;
 }
-.ui.celled.responsive.grid {
+.ui.celled.page.grid {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
--- a/node/src/files/build/packaged/css/semantic.min.css
+++ b/node/src/files/build/packaged/css/semantic.min.css
--- a/node/src/files/build/packaged/javascript/semantic.min.js
+++ b/node/src/files/build/packaged/javascript/semantic.min.js
@ -1,5 +1,5 @@
 /** # Semantic UI
-* Version: 0.2.4
+* Version: 0.3.0
 * http://github.com/jlukic/semantic-ui
 *
 *
--- a/node/src/files/build/semantic.zip
+++ b/node/src/files/build/semantic.zip
--- a/node/src/files/build/uncompressed/collections/grid.css
+++ b/node/src/files/build/uncompressed/collections/grid.css
@ -22,6 +22,10 @@
  -ms-box-sizing: border-box;
  box-sizing: border-box;
 }
+body > .ui.grid {
+  margin-left: 0%;
+  margin-right: 0%:;
+}
 .ui.grid:after,
 .ui.row:after {
  content: ".";
@ -73,44 +77,34 @@
 /*******************************
           Variations
 *******************************/
-/*-------------------
-        Page
--------------------*/
+/*-----------------------
+  Page Grid (Responsive)
+-------------------------*/
 .ui.page.grid {
-  margin: 0%;
-  padding-left: 0%;
-  padding-right: 0%;
-}
-/*-------------------
-      Responsive
--------------------*/
-.ui.responsive.grid {
-  margin-left: 0% !important;
-  margin-right: 0% !important;
  min-width: 320px;
 }
@media only screen and (max-width: 998px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 4%;
  }
 }
@media only screen and (min-width: 998px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 8%;
  }
 }
@media only screen and (min-width: 1500px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 13%;
  }
 }
@media only screen and (min-width: 1750px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 18%;
  }
 }
@media only screen and (min-width: 2000px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 23%;
  }
 }
@ -356,7 +350,7 @@
  -moz-box-shadow: none;
  box-shadow: none;
 }
-.ui.celled.responsive.grid {
+.ui.celled.page.grid {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
--- a/src/collections/grid.less
+++ b/src/collections/grid.less
@ -26,6 +26,12 @@
  -ms-box-sizing: border-box;
  box-sizing: border-box;
 }
+
+body > .ui.grid {
+  margin-left: 0%;
+  margin-right: 0%:;
+}
+
 .ui.grid:after,
 .ui.row:after {
  content: ".";
@ -92,49 +98,36 @@
 *******************************/


-/*-------------------
-        Page
--------------------*/
+/*-----------------------
+  Page Grid (Responsive)
+-------------------------*/

 .ui.page.grid {
-  margin: 0%;
-  padding-left: 0%;
-  padding-right: 0%;
-}
-
-
-/*-------------------
-      Responsive
--------------------*/
-
-.ui.responsive.grid {
-  margin-left: 0% !important;
-  margin-right: 0% !important;
  min-width: 320px;
 }

@media only screen and (max-width : 998px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 4%;
  }
 }
@media only screen and (min-width : 998px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 8%;
  }
 }
@media only screen and (min-width : 1500px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 13%;
  }
 }
@media only screen and (min-width : 1750px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 18%;
  }
 }
@media only screen and (min-width : 2000px) {
-  .ui.responsive.grid {
+  .ui.page.grid {
    padding: 0% 23%;
  }
 }
@ -418,7 +411,7 @@
  box-shadow: none;
 }

-.ui.celled.responsive.grid {
+.ui.celled.page.grid {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;