iterating on grid

Former-commit-id: 1d94d1a75e
Former-commit-id: 79f1ee4950

README.md

@@ -34,13 +34,13 @@ By defining a vocabulary the development community can exchange javascript and c
 
 **All UI**: The specification defines class name and html structures which can be used to represent an element
 
-**Elements**: The specification outlines states that an elements can exist, lists common types, or variations, of an element, and if necessary, defines how the element functions in groups.
+**Elements**: An element definition gives states which an elements can occupy, common types of that element, and if necessary, defines how the element functions in groups.
 
-**Collections**: The specification defines a list of elements that it can include, and ways which variations in the collection can affect each element.
+**Collections**: Collection definitions list elements that it can include, and variations which can apply to both the collection, or individual elements found in the collection.
 
-**Modules**: The specification defines a set of behaviors the module is expected to perform.
+**Modules**: Module definitions include a list of behaviors that are commonly associated with an element
 
-**Views**: The specification defines the types of content it usually contains, and a standard heirarchy for presenting the content to the user.
+**Views**: View specifications defines the types of content the view usually display, and the heirarchy typical to presenting this content to the user.
 
 #### Based on class
 
@@ -122,9 +122,9 @@ UI elements can have plural definitions when they are known to exist together fr
 
 In this case each button will be large because we understand it is a part of the large button group
 ``` html
-<div class="large buttons">
+<div class="large ui buttons">
   <div class="ui button">Cancel</div>
-  <div class="ui positive button">Continue</div>
+  <div class="ui button">Continue</div>
 </div>
 ```
 

node/src/documents/collection.html

@@ -6,13 +6,13 @@ title  : 'UI Collections'
 type   : 'Library'
 ---
 
-<div class="responsive ui grid segment">
-  <div class="column">
+<div class="segment">
+  <div class="container">
     <h1>UI Collection</h1>
     <p>UI collections are elements which contain other elements which often appear together.<p>
   </div>
 </div>
-<div class="main responsive ui grid">
+<div class="main container">
   <div class="column">
     <h2>Types of Collections</h2>
     
@@ -38,9 +38,9 @@ type   : 'Library'
       <div class="item">
         <div class="image">
           <div class="ui three column aligned responsive grid">
-            <div class="column"><div class="ui segment">First</div></div>
-            <div class="column"><div class="ui segment">Second</div></div>
-            <div class="column"><div class="ui segment">Third</div></div>
+            <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>
           </div>
         </div>
         <div class="content">

node/src/documents/collections/grid.html

@@ -256,7 +256,7 @@ type   : 'UI Collection'
   
   <h3>Grid</h3>
 
-  <div class="example">
+  <div class="highlighted example">
     <h4>Page Grid</h4>
     <p>A grid can be formatted for page content adding gutters before and after the content of the grid to help make page contents easier to read.</p>
     
@@ -286,11 +286,11 @@ type   : 'UI Collection'
     </div>
   </div>
   
-  <div class="example">
+  <div class="highlighted example">
     <h4>Responsive Grid</h4>
     <p>A grid can be responsive to a browsers width.</p>
 
-    <div class="ui text block info ignore">
+    <div class="ui text message info ignore">
       <p>
         <i class="icon heart"></i> Semantic UI's responsive grid by default will change the page gutters to increase at 250pixel intervals.
     </div>
@@ -321,7 +321,7 @@ type   : 'UI Collection'
     </div>
   </div>
   
-  <div class="example">
+  <div class="highlighted example">
     <h4>Changing column count</h4>
     <p>A grid can have a different number of columns</p>
     <div class="ui three column grid">
@@ -394,7 +394,7 @@ type   : 'UI Collection'
       </div>
     </div>
   </div>
-  <div class="example">
+  <div class="highlighted example">
     <h4>Floating (Horizontal Alignment)</h4>
     <p>A column can be aligned, or "floated", to either the left or right of its row.</p>
     <div class="ui grid">
@@ -427,7 +427,7 @@ type   : 'UI Collection'
     </div>
 
   
-  <div class="example">
+  <div class="highlighted example">
     <h4>Vertical Alignment</h4>
     <p>A grid or row can specify its vertical alignment can have its columns vertically centered.</p>
     <div class="ui centered three column grid">
@@ -521,7 +521,7 @@ type   : 'UI Collection'
     </div>
   </div>
   
-  <div class="example">
+  <div class="highlighted example">
     <h4>Evenly Divided Grid w/ Rows</h4>
     <p>Content that does not match evenly finish a row will be centered in the next row</p>
     <div class="ui two column grid">
@@ -601,7 +601,7 @@ type   : 'UI Collection'
   
   <h3>Columns</h3>
   
-  <div class="example">
+  <div class="highlighted example">
     <h4>Column Width</h4>
     <p>A column can span across multiple grid columns.</p>
     <div class="ui grid">

node/src/documents/element.html

@@ -17,23 +17,35 @@ type   : 'Library'
   <div class="peek">
     <div class="ui vertical pointing menu">
       <a class="active item">Definition</a>
-      <a class="item">Distinction</a>
+      <a class="item">Types</a>
     </div>
   </div>
   <h2>Definition</h2>
+  <p>UI Elements are single interface elements that do not contain other elements inside themselves.</p>
   
-  <p>zzzz</p>
+  <p>Elements are often found in groups, so many element definitions include a plural definition.</p>
   
-  <h2>Distinction</h2>
+  <div class="example">
+    <h4>Groups</h4>
+    <p>The plural of button is "buttons" a button wrapped inside "buttons" will automatically apply styling appropriate for a group. Also many button variations can be used on plural definitions just like they would be used in singular.</p>
+    <p>For example, in this case each button will be large because we understand it is a part of the large button group</p>
+    <div class="ui simple ignored divider"></div>
+    <div class="large ui buttons">
+      <div class="ui button">Cancel</div>
+      <div class="ui positive button">Continue</div>
+    </div>
+  </div>
+  
+  <h2>Types</h2>
   
-  <div class="ui horizontal items">
+  <div class="ui horizontal type items">
     
     <div class="item">
       <div class="image">
         <div class="ui teal fluid button">Follow</div>
       </div>
       <div class="content">
-        <div class="name">Button</div>
+        <a href="elements/button.html" class="name">Button</a>
         <p>A button indicates a possible user action.</p>
       </div>
     </div>
@@ -44,7 +56,7 @@ type   : 'Library'
         <div class="ui large orange label">User Favorite</div>
       </div>
       <div class="content">
-        <div class="name">Label</div>
+        <a href="elements/label.html" class="name">Label</a>
         <p>A button indicates a possible user action.</p>
       </div>
     </div>

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

@@ -26,7 +26,8 @@
   -ms-box-sizing: border-box;
   box-sizing: border-box;
 }
-.ui.grid:after {
+.ui.grid:after,
+.ui.row:after {
     content: ".";
     display: block;
     height: 0;

node/src/files/stylesheets/semantic.css

@@ -564,15 +564,15 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
 }
 #example .highlighted.example .grid .column,
 #example .ui.type.items .image .grid .column {
-  background-color: #E0E0E0;
-  height: 150px;
-  -webkit-box-shadow: 0px 0px 0px 1px #FFFFFF;
-  -moz-box-shadow: 0px 0px 0px 1px #FFFFFF;
-  box-shadow: 0px 0px 0px 1px #FFFFFF;
+  background-color: #F4F4F4;
+  min-height: 100px;
+  -webkit-box-shadow: 0px 0px 0px 1px #E2E2E2;
+  -moz-box-shadow: 0px 0px 0px 1px #E2E2E2;
+  box-shadow: 0px 0px 0px 1px #E2E2E2;
 }
 #example .highlighted.example .grid .segment,
 #example .ui.type.items .image .grid .segment {
-  height: 150px;
+  min-height: 100px;
   border: 1px solid #DDDDDD;
 
   -webkit-box-shadow: none;

src/collections/grid.css

@@ -26,7 +26,8 @@
   -ms-box-sizing: border-box;
   box-sizing: border-box;
 }
-.ui.grid:after {
+.ui.grid:after,
+.ui.row:after {
     content: ".";
     display: block;
     height: 0;