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

Former-commit-id: 83fad5c8463935b941cfa2ddb35f2f41e398735c
Former-commit-id: 90a80462bbca910616704827ef001fa2789f63bb

RELEASE 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**

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;

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

@@ -1 +1 @@
-922e6f1374b05dcf93dad02058e1b6f46f161216
+36de00ec3a8e5475ddfc8b6803f8c9110744bfce

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

@@ -1 +1 @@
-d63fb61b1d2fbd86e5a501c1bd18551b68d88699
+6a14aafc754c7fc499198dce8fa2ee168e9825ea

build/packaged/javascript/semantic.min.js.REMOVED.git-id

@@ -1 +1 @@
-3a6e005c9da9ba2d8bc73d7488c6072b899315ca
+cfec6cf44c9f82717d737ed090b06199ba546d98

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;

node/package.json

@@ -1,7 +1,7 @@
 {
   "semantic": {
     "name": "Semantic UI",
-    "version": "0.2.5"
+    "version": "0.3.0"
   },
   "dependencies": {
     "docpad": "~6.53.0",

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>

node/src/documents/collections/grid.html.eco

@@ -248,13 +248,13 @@ type        : 'UI Collection'
 
   <h2 class="ui dividing header">Types</h2>
 
-
+  <div class="example">
-  <div class="highlighted 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>
+    <div class="ui text message info ignore">
-    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>
+      <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>

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>

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;

node/src/files/build/packaged/css/semantic.css.REMOVED.git-id

@@ -1 +1 @@
-922e6f1374b05dcf93dad02058e1b6f46f161216
+36de00ec3a8e5475ddfc8b6803f8c9110744bfce

node/src/files/build/packaged/css/semantic.min.css.REMOVED.git-id

@@ -1 +1 @@
-d63fb61b1d2fbd86e5a501c1bd18551b68d88699
+6a14aafc754c7fc499198dce8fa2ee168e9825ea

node/src/files/build/packaged/javascript/semantic.min.js.REMOVED.git-id

@@ -1 +1 @@
-3a6e005c9da9ba2d8bc73d7488c6072b899315ca
+cfec6cf44c9f82717d737ed090b06199ba546d98

node/src/files/build/semantic.zip.REMOVED.git-id

@@ -1 +1 @@
-e16823931ca556e5534e7e02bfad616ce0d44a89
+6fa875f2f25e0e26bdfcc9000626d2196f86233b

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;

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;