adding definition page and many variations to segments

Former-commit-id: 03c3f1be36 Former-commit-id: 0811e64846
11 years ago · 2fe762c317
13 changed files with 620 additions and 38 deletions
--- a/build/minified/elements/header.min.css
+++ b/build/minified/elements/header.min.css
@ -1 +1 @@
-.ui.header{line-height:1.33;font-size:1.33em;font-weight:700;padding:0;border:0}.ui.header:first-child{margin-top:0}.ui.header+p{margin-top:0}h1.ui.header{min-height:1rem;margin:2rem 0rem 1.5rem;line-height:1.33rem;font-size:2rem}h2.ui.header{margin:1.5rem 0rem 1rem;line-height:1.33rem;font-size:1.5rem}h3.ui.header{margin:1.3rem 0rem 1rem;line-height:1.33rem;font-size:1.33rem}h4.ui.header{margin:.75rem 0rem .3rem;line-height:1.33rem;font-size:1.1rem}h5.ui.header{margin:0rem 0rem .2rem;line-height:1.2rem;font-size:1rem}.huge.ui.header{min-height:1em;line-height:1.33em;font-size:2em}.large.ui.header{line-height:1.33em;font-size:1.5em}.medium.ui.header{margin-bottom:.25em;line-height:1.33em;font-size:1.25em}.small.ui.header{margin-bottom:.25em;line-height:1.33em;font-size:1.1em}.tiny.ui.header{margin-bottom:0;line-height:1.2em;font-size:1em}.ui.header.disabled{opacity:.5}.ui.inverted.header{background-color:#222;padding:.7em 1em;color:#FFF}.ui.blue.header{color:#6ECFF5!important}.ui.black.header{color:#5C6166!important}.ui.green.header{color:#A1CF64!important}.ui.red.header{color:#EF4D6D!important}.ui.purple.header{color:#564F8A!important}.ui.teal.header{color:#00B5AD!important}.ui.inverted.black.header{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.header{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.header{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.header{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.header{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.header{background-color:#00B5AD!important;color:#FFF!important}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header{text-align:center}.ui.floated.header,.ui.left.floated.header{float:left}.ui.right.floated.header{float:right}.ui.attached.header{padding:.7em 1rem;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.top.attached.header{margin-bottom:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.bottom.attached.header{margin-top:0;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.header.icon{display:inline-block;text-align:center}.ui.header.icon .icon{display:block;font-size:4em;width:auto;margin:0rem auto 2rem;padding:0}
+.ui.header{line-height:1.33;font-size:1.33em;font-weight:700;padding:0;border:0}.ui.header:first-child{margin-top:0}.ui.header+p{margin-top:0}h1.ui.header{min-height:1rem;margin:2rem 0rem 1.5rem;line-height:1.33rem;font-size:2rem}h2.ui.header{margin:1.5rem 0rem 1rem;line-height:1.33rem;font-size:1.5rem}h3.ui.header{margin:1.3rem 0rem 1rem;line-height:1.33rem;font-size:1.33rem}h4.ui.header{margin:.75rem 0rem .3rem;line-height:1.33rem;font-size:1.1rem}h5.ui.header{margin:0rem 0rem .2rem;line-height:1.2rem;font-size:1rem}.huge.ui.header{min-height:1em;line-height:1.33em;font-size:2em}.large.ui.header{line-height:1.33em;font-size:1.5em}.medium.ui.header{margin-bottom:.25em;line-height:1.33em;font-size:1.25em}.small.ui.header{margin-bottom:.25em;line-height:1.33em;font-size:1.1em}.tiny.ui.header{margin-bottom:0;line-height:1.2em;font-size:1em}.ui.disabled.header{opacity:.5}.ui.inverted.header{background-color:#222;padding:.7em 1em;color:#FFF}.ui.blue.header{color:#6ECFF5!important}.ui.black.header{color:#5C6166!important}.ui.green.header{color:#A1CF64!important}.ui.red.header{color:#EF4D6D!important}.ui.purple.header{color:#564F8A!important}.ui.teal.header{color:#00B5AD!important}.ui.inverted.black.header{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.header{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.header{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.header{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.header{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.header{background-color:#00B5AD!important;color:#FFF!important}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header{text-align:center}.ui.floated.header,.ui.left.floated.header{float:left}.ui.right.floated.header{float:right}.ui.attached.header{padding:.7em 1rem;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.top.attached.header{margin-bottom:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.bottom.attached.header{margin-top:0;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.header.icon{display:inline-block;text-align:center}.ui.header.icon .icon{display:block;font-size:4em;width:auto;margin:0rem auto 2rem;padding:0}
--- a/build/minified/elements/segment.min.css
+++ b/build/minified/elements/segment.min.css
@ -1 +1 @@
-.ui.segment{position:relative;background-color:#FFF;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);padding:1em;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.ui.segment div:first-child{margin-top:0}.ui.segment .attached.label:first-child+*{margin-top:2em}.ui.segment .bottom.attached.label:first-child+*{margin-top:0}.ui.segment.attached{top:-1px;bottom:-1px;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;-moz-box-shadow:0 0 0 1px #DDD;-webkit-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.top.attached.segment{top:0;bottom:-1px;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.ui.segment.bottom.attached{top:-1px;bottom:0;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}.ui.segment .list li{padding:10px 25px}
+.ui.segment{position:relative;background-color:#FFF;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);margin:1em 0;padding:.5em 1em;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.ui.segment div:first-child{margin-top:0}.ui.segment div:last-child{margin-bottom:0}.ui.segment .attached.label:first-child+*{margin-top:2em}.ui.segment .bottom.attached.label:first-child+*{margin-top:0}.ui.disabled.segment{opacity:.5}.ui.inverted.segment{background-color:#222;padding:.7em 1em;color:#FFF}.ui.basic.segment{position:relative;background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.basic.segment:before{position:absolute;top:0;width:100%;content:'';height:1px;background-color:rgba(0,0,0,.05);border-top:1px solid rgba(255,255,255,.8)}.ui.blue.segment{color:#6ECFF5!important}.ui.green.segment{color:#A1CF64!important}.ui.red.segment{color:#EF4D6D!important}.ui.purple.segment{color:#564F8A!important}.ui.teal.segment{color:#00B5AD!important}.ui.left.aligned.segment{text-align:left}.ui.right.aligned.segment{text-align:right}.ui.center.aligned.segment{text-align:center}.ui.floated.segment,.ui.left.floated.segment{float:left}.ui.right.floated.segment{float:right}.ui.raised.segment{-webkit-box-shadow:0 1px 2px 1px rgba(0,0,0,.1);-moz-box-shadow:0 1px 2px 1px rgba(0,0,0,.1);box-shadow:0 1px 2px 1px rgba(0,0,0,.1)}.ui.inverted.segment{background-color:#555}.ui.primary.inverted.segmentn class="p">{background-color:#777;color:#F5F5F5}.ui.secondary.inverted.segment{background-color:#777;color:#F5F5F5}.ui.tertiary.inverted.segment{background-color:#B0B0B0;color:#EBEBEB}.ui.primary.segment{background-color:#FFF;color:#555}.ui.secondary.segment{background-color:#F5F5F5;color:#777}.ui.tertiary.segment{background-color:#EBEBEB;color:#B0B0B0}.ui.segment.attached{top:-1px;bottom:-1px;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;margin:0;-moz-box-shadow:0 0 0 1px #DDD;-webkit-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.top.attached.segment{top:0;bottom:-1px;margin-top:0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.ui.segment.bottom.attached{top:-1px;bottom:0;margin-bottom:0;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}
--- a/build/packaged/semantic.min.css.REMOVED.git-id
+++ b/build/packaged/semantic.min.css.REMOVED.git-id
@ -1 +1 @@
-92835bf7befedceca4f6ad8d2d074a0dad5769c4
+a0234ff39dcf422e63fafa25c4b51f8c0d236058
--- a/build/packaged/semantic.min.js.REMOVED.git-id
+++ b/build/packaged/semantic.min.js.REMOVED.git-id
@ -1 +1 @@
-0f07dbd48e46e923a00189bae39db59576075359
+7220d569e6fdfced633f365fb442ebed1e5a6618
--- a/build/uncompressed/elements/header.css
+++ b/build/uncompressed/elements/header.css
@ -86,7 +86,7 @@ h5.ui.header {
 /*******************************
            States
 *******************************/
-.ui.header.disabled {
+.ui.disabled.header {
  opacity: 0.5;
 }
 /*******************************
--- a/build/uncompressed/elements/segment.css
+++ b/build/uncompressed/elements/segment.css
@ -1,5 +1,16 @@
+/*
+ * # Semantic Segment - Flat
+ * http://github.com/quirkyinc/semantic
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: May 17 2013
+ */
 /*******************************
-          Page Segments
+            Segment
 *******************************/
 .ui.segment {
  position: relative;
@ -7,7 +18,8 @@
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-  padding: 1em;
+  margin: 1em 0em;
+  padding: 0.5em 1em;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
@ -17,22 +29,150 @@
  box-sizing: border-box;
  overflow: hidden;
 }
-/* Label at the top of a segment */
+/*-------------------
+    Loose Coupling
+--------------------*/
+/* No padding on edge content */
 .ui.segment div:first-child {
  margin-top: 0px;
 }
+.ui.segment div:last-child {
+  margin-bottom: 0px;
+}
+/* Padding on next content after a label */
 .ui.segment .attached.label:first-child + * {
  margin-top: 2em;
 }
 .ui.segment .bottom.attached.label:first-child + * {
  margin-top: 0em;
 }
+/*******************************
+            States
+*******************************/
+.ui.disabled.segment {
+  opacity: 0.5;
+}
+/*******************************
+           Variations
+*******************************/
+/*-------------------
+      Inverted 
+--------------------*/
+.ui.inverted.segment {
+  background-color: #222222;
+  padding: 0.7em 1em;
+  color: #FFFFFF;
+}
+/*-------------------
+       Basic
+--------------------*/
+.ui.basic.segment {
+  position: relative;
+  background-color: transparent;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.ui.basic.segment:before {
+  position: absolute;
+  top: 0px;
+  width: 100%;
+  content: '';
+  height: 1px;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-top: 1px solid rgba(255, 255, 255, 0.8);
+}
+/*-------------------
+       Colors
+--------------------*/
+.ui.blue.segment {
+  color: #6ECFF5 !important;
+}
+.ui.green.segment {
+  color: #A1CF64 !important;
+}
+.ui.red.segment {
+  color: #EF4D6D !important;
+}
+.ui.purple.segment {
+  color: #564F8A !important;
+}
+.ui.teal.segment {
+  color: #00B5AD !important;
+}
+/*-------------------
+       Aligned
+--------------------*/
+.ui.left.aligned.segment {
+  text-align: left;
+}
+.ui.right.aligned.segment {
+  text-align: right;
+}
+.ui.center.aligned.segment {
+  text-align: center;
+}
+/*-------------------
+       Floated
+--------------------*/
+.ui.floated.segment,
+.ui.left.floated.segment {
+  float: left;
+}
+.ui.right.floated.segment {
+  float: right;
+}
+/*-------------------
+       Raised
+--------------------*/
+.ui.raised.segment {
+  -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
+}
+/*-------------------
+      Inverted
+--------------------*/
+.ui.inverted.segment {
+  background-color: #555555;
+}
+.ui.primary.inverted.segment {
+  background-color: #777777;
+  color: #F5F5F5;
+}
+.ui.secondary.inverted.segment {
+  background-color: #777777;
+  color: #F5F5F5;
+}
+.ui.tertiary.inverted.segment {
+  background-color: #B0B0B0;
+  color: #EBEBEB;
+}
+/*-------------------
+     Ordinality
+--------------------*/
+.ui.primary.segment {
+  background-color: #FFFFFF;
+  color: #555555;
+}
+.ui.secondary.segment {
+  background-color: #F5F5F5;
+  color: #777777;
+}
+.ui.tertiary.segment {
+  background-color: #EBEBEB;
+  color: #B0B0B0;
+}
+/*-------------------
+      Attached
+--------------------*/
 .ui.segment.attached {
  top: -1px;
  bottom: -1px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
+  margin: 0em;
  -moz-box-shadow: 0px 0px 0px 1px #DDDDDD;
  -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;
  box-shadow: 0px 0px 0px 1px #DDDDDD;
@ -40,6 +180,7 @@
 .ui.top.attached.segment {
  top: 0px;
  bottom: -1px;
+  margin-top: 0em;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
  border-radius: 5px 5px 0px 0px;
@ -47,11 +188,8 @@
 .ui.segment.bottom.attached {
  top: -1px;
  bottom: 0px;
+  margin-bottom: 0em;
  -moz-border-radius: 0px 0px 5px 5px;
  -webkit-border-radius: 0px 0px 5px 5px;
  border-radius: 0px 0px 5px 5px;
 }
-/* Common Views */
-.ui.segment .list li {
-  padding: 10px 25px;
-}
--- a/node/src/documents/elements/header.html
+++ b/node/src/documents/elements/header.html
@ -77,17 +77,17 @@ type   : 'UI Element'
  <h2>Variations</h2>
  
  <div class="example">
-    <h4>Icon Header</h4>
-    <p>A header can be formatted to be displayed with an icon</p>
+    <h4>Icon</h4>
+    <p>A header can be formatted to emphasize an icon</p>
    <h1 class="ui icon header">
-      <i class="icon easel"></i>
-      Paint a Picture
+      <i class="icon mail"></i>
+      Message Anyone
    </h1>
  </div>
  
  <div class="example">
-    <h4>Floated Header</h4>
-    <p>A header can be formatted to be displayed with an icon</p>
+    <h4>Floating</h4>
+    <p>A header can sit to the left or right of other content</p>
    <div class="ui segment">
      <h3 class="ui right floated header">
        Go Forward
@ -99,7 +99,7 @@ type   : 'UI Element'
  </div>
  <div class="example">
    <h4>Text Alignment</h4>
-    <p>A header can be formatted to be displayed with an icon</p>
+    <p>A header can have its text aligned to a side</p>
    <div class="ui segment">
      <h3 class="ui right aligned header">
        Right
@ -108,14 +108,14 @@ type   : 'UI Element'
        Left
      </h3>
      <h3 class="ui center aligned header">
-        and Center
+        Center
      </h3>
    </div>
  </div>
  
  <div class="example">
    <h4>Colors</h4>
-    <p>A header can be formatted as different colors</p>
+    <p>A header can be formatted with different colors</p>
    <h5 class="ui black header">
      Black
    </h5>
--- a/node/src/documents/elements/segment.html
+++ b/node/src/documents/elements/segment.html
@ -0,0 +1,128 @@
+---
+layout : 'default'
+css    : 'header'
+
+title  : 'Segment'
+type   : 'UI Element'
+---
+<div class="segment">
+  <div class="container">
+  <h1>Segment</h1>
+  <p>A segment is used to create a grouping of related content.</p>
+  </div>
+</div>
+<div class="main container">
+
+  <div class="peek">
+    <div class="ui vertical pointing menu">
+      <a class="active item">Standard</a>
+      <a class="item">Variations</a> 
+    </div>
+  </div>
+  <h2>Standard</h2>
+  
+  <div class="example">
+    <h4>Segment</h4>
+    <p>A segment of content</p>
+    <div class="ui segment">
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+    </div>
+  </div>
+  
+  <h2>Variations</h2>
+
+  <div class="example">
+    <h4>Inverted</h4>
+    <p>A segment can have its colors inverted for contrast</p>
+    <div class="ui inverted segment">
+      <p>I'm here to tell you something, and you will probably read me first.</p>
+    </div>
+  </div>
+  
+  <div class="example">
+    <h4>Ordinality</h4>
+    <p>A segment can be formatted to appear more or less noticable</p>
+    <div class="ui primary segment">
+      <p>I'm here to tell you something, and you will probably read me first.</p>
+    </div>
+    <div class="ui secondary segment">
+      <p>I am pretty noticable but you might check out other content before you look at me.</p>
+    </div>
+    <div class="ui tertiary segment">
+      <p>If you notice me you must be looking very hard.</p>
+    </div>
+  </div>
+  
+  <div class="another example">
+    <h4>Ordinality</h4>
+    <p>A segment can be formatted to appear more or less noticable</p>
+    <div class="ui primary inverted segment">
+      <p>I'm here to tell you something, and you will probably read me first.</p>
+    </div>
+    <div class="ui secondary inverted segment">
+      <p>I am pretty noticable but you might check out other content before you look at me.</p>
+    </div>
+    <div class="ui tertiary inverted segment">
+      <p>If you notice me you must be looking very hard.</p>
+    </div>
+  </div>
+  
+  <div class="example">
+    <h4>Floated</h4>
+    <p>A header can sit to the left or right of other content</p>
+    <h3 class="ui right floated segment">
+      <p>This segment will appear to the right
+    </h3>
+    <h3 class="ui left floated segment">
+      This segment will appear to the left
+    </h3>
+  </div>
+  
+  <div class="example">
+    <h4>Text Alignment</h4>
+    <p>A header can have its text aligned to a side</p>
+    <div class="ui right aligned segment">
+      Right
+    </div>
+    <div class="ui left aligned segment">
+      Left
+    </div>
+    <div class="ui center aligned segment">
+      Center
+    </div>
+  </div>
+  
+  <div class="example">
+    <h4>Basic</h4>
+    <p>A segment may reduce its complexity to blend in with a page</p>
+    <div class="ui basic segment">
+      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+    </div>
+  </div>
+  
+  <div class="example">
+    <h4>Raised</h4>
+    <p>A segment may be formatted to raise above the page.</p>
+    <div class="ui raised segment">
+      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+    </div>
+  </div>
+  
+  
+  <div class="example">
+    <h4>Attached</h4>
+    <p>A segment can be attached to other content on a page</p>
+    
+    <div class="ui top attached segment">
+      <p>This segment is on top</p>
+    </div>
+    <div class="ui attached segment">
+      <p>This segment is attached on both sides</p>
+    </div>
+    <div class="ui bottom attached segment">
+      <p>This segment is on bottom</p>
+    </div>
+  </div>
+  
+  
+</div>
--- a/node/src/files/components/semantic/elements/header.css
+++ b/node/src/files/components/semantic/elements/header.css
@ -86,7 +86,7 @@ h5.ui.header {
 /*******************************
            States
 *******************************/
-.ui.header.disabled {
+.ui.disabled.header {
  opacity: 0.5;
 }
 /*******************************
--- a/node/src/files/components/semantic/elements/segment.css
+++ b/node/src/files/components/semantic/elements/segment.css
@ -1,5 +1,16 @@
+/*
+ * # Semantic Segment - Flat
+ * http://github.com/quirkyinc/semantic
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: May 17 2013
+ */
 /*******************************
-          Page Segments
+            Segment
 *******************************/
 .ui.segment {
  position: relative;
@ -7,7 +18,8 @@
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-  padding: 1em;
+  margin: 1em 0em;
+  padding: 0.5em 1em;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
@ -17,22 +29,150 @@
  box-sizing: border-box;
  overflow: hidden;
 }
-/* Label at the top of a segment */
+/*-------------------
+    Loose Coupling
+--------------------*/
+/* No padding on edge content */
 .ui.segment div:first-child {
  margin-top: 0px;
 }
+.ui.segment div:last-child {
+  margin-bottom: 0px;
+}
+/* Padding on next content after a label */
 .ui.segment .attached.label:first-child + * {
  margin-top: 2em;
 }
 .ui.segment .bottom.attached.label:first-child + * {
  margin-top: 0em;
 }
+/*******************************
+            States
+*******************************/
+.ui.disabled.segment {
+  opacity: 0.5;
+}
+/*******************************
+           Variations
+*******************************/
+/*-------------------
+      Inverted 
+--------------------*/
+.ui.inverted.segment {
+  background-color: #222222;
+  padding: 0.7em 1em;
+  color: #FFFFFF;
+}
+/*-------------------
+       Basic
+--------------------*/
+.ui.basic.segment {
+  position: relative;
+  background-color: transparent;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.ui.basic.segment:before {
+  position: absolute;
+  top: 0px;
+  width: 100%;
+  content: '';
+  height: 1px;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-top: 1px solid rgba(255, 255, 255, 0.8);
+}
+/*-------------------
+       Colors
+--------------------*/
+.ui.blue.segment {
+  color: #6ECFF5 !important;
+}
+.ui.green.segment {
+  color: #A1CF64 !important;
+}
+.ui.red.segment {
+  color: #EF4D6D !important;
+}
+.ui.purple.segment {
+  color: #564F8A !important;
+}
+.ui.teal.segment {
+  color: #00B5AD !important;
+}
+/*-------------------
+       Aligned
+--------------------*/
+.ui.left.aligned.segment {
+  text-align: left;
+}
+.ui.right.aligned.segment {
+  text-align: right;
+}
+.ui.center.aligned.segment {
+  text-align: center;
+}
+/*-------------------
+       Floated
+--------------------*/
+.ui.floated.segment,
+.ui.left.floated.segment {
+  float: left;
+}
+.ui.right.floated.segment {
+  float: right;
+}
+/*-------------------
+       Raised
+--------------------*/
+.ui.raised.segment {
+  -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
+}
+/*-------------------
+      Inverted
+--------------------*/
+.ui.inverted.segment {
+  background-color: #555555;
+}
+.ui.primary.inverted.segment {
+  background-color: #777777;
+  color: #F5F5F5;
+}
+.ui.secondary.inverted.segment {
+  background-color: #777777;
+  color: #F5F5F5;
+}
+.ui.tertiary.inverted.segment {
+  background-color: #B0B0B0;
+  color: #EBEBEB;
+}
+/*-------------------
+     Ordinality
+--------------------*/
+.ui.primary.segment {
+  background-color: #FFFFFF;
+  color: #555555;
+}
+.ui.secondary.segment {
+  background-color: #F5F5F5;
+  color: #777777;
+}
+.ui.tertiary.segment {
+  background-color: #EBEBEB;
+  color: #B0B0B0;
+}
+/*-------------------
+      Attached
+--------------------*/
 .ui.segment.attached {
  top: -1px;
  bottom: -1px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
+  margin: 0em;
  -moz-box-shadow: 0px 0px 0px 1px #DDDDDD;
  -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;
  box-shadow: 0px 0px 0px 1px #DDDDDD;
@ -40,6 +180,7 @@
 .ui.top.attached.segment {
  top: 0px;
  bottom: -1px;
+  margin-top: 0em;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
  border-radius: 5px 5px 0px 0px;
@ -47,11 +188,8 @@
 .ui.segment.bottom.attached {
  top: -1px;
  bottom: 0px;
+  margin-bottom: 0em;
  -moz-border-radius: 0px 0px 5px 5px;
  -webkit-border-radius: 0px 0px 5px 5px;
  border-radius: 0px 0px 5px 5px;
 }
-/* Common Views */
-.ui.segment .list li {
-  padding: 10px 25px;
-}
--- a/src/elements/button.less
+++ b/src/elements/button.less
@ -264,6 +264,7 @@
 /*-------------------
      Disabled
 --------------------*/
+
 .ui.button.disabled,
 .ui.button.disabled.hover,
 .ui.button.disabled.down {
--- a/src/elements/header.less
+++ b/src/elements/header.less
@ -98,10 +98,11 @@ h5.ui.header {
            States
 *******************************/

-.ui.header.disabled {
+.ui.disabled.header {
  opacity: 0.5;
 }

+
 /*******************************
           Variations
 *******************************/
--- a/src/elements/segment.less
+++ b/src/elements/segment.less
@ -1,5 +1,18 @@
+/*
+ * # Semantic Segment - Flat
+ * http://github.com/quirkyinc/semantic
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: May 17 2013
+ */
+
+
 /*******************************
-          Page Segments
+            Segment
 *******************************/

 .ui.segment {
@ -10,7 +23,8 @@
  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);

-  padding: 1em;
+  margin: 1em 0em;
+  padding: 0.5em 1em;

  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
@ -24,10 +38,19 @@
  overflow: hidden;
 }

-/* Label at the top of a segment */
+/*-------------------
+    Loose Coupling
+--------------------*/
+
+/* No padding on edge content */
 .ui.segment div:first-child {
  margin-top: 0px;
 }
+.ui.segment div:last-child {
+  margin-bottom: 0px;
+}
+
+/* Padding on next content after a label */
 .ui.segment .attached.label:first-child + * {
  margin-top: 2em;
 }
@ -35,6 +58,156 @@
  margin-top: 0em;
 }

+/*******************************
+            States
+*******************************/
+
+.ui.disabled.segment {
+  opacity: 0.5;
+}
+
+
+
+/*******************************
+           Variations
+*******************************/
+
+/*-------------------
+      Inverted 
+--------------------*/
+
+.ui.inverted.segment {
+  background-color: #222222;
+  padding: 0.7em 1em;
+  color: #FFFFFF;
+}
+
+/*-------------------
+       Basic
+--------------------*/
+
+.ui.basic.segment {
+  position: relative;
+  background-color: transparent;
+
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+
+.ui.basic.segment:before {
+  position: absolute;
+  top: 0px;
+  width: 100%;
+  content: '';
+  height: 1px;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-top: 1px solid rgba(255, 255, 255, 0.8);
+}
+
+/*-------------------
+       Colors
+--------------------*/
+
+.ui.blue.segment {
+  color: #6ECFF5 !important;
+}
+.ui.green.segment {
+  color: #A1CF64 !important;
+}
+.ui.red.segment {
+  color: #EF4D6D !important;
+}
+.ui.purple.segment {
+  color: #564F8A !important;
+}
+.ui.teal.segment {
+  color: #00B5AD !important;
+}
+
+/*-------------------
+       Aligned
+--------------------*/
+
+.ui.left.aligned.segment {
+  text-align: left;
+}
+.ui.right.aligned.segment {
+  text-align: right;
+}
+.ui.center.aligned.segment {
+  text-align: center;
+}
+
+/*-------------------
+       Floated
+--------------------*/
+
+.ui.floated.segment,
+.ui.left.floated.segment {
+  float: left;
+}
+.ui.right.floated.segment {
+  float: right;
+}
+
+/*-------------------
+       Raised
+--------------------*/
+
+.ui.raised.segment {
+  -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
+}
+
+/*-------------------
+      Inverted
+--------------------*/
+
+.ui.inverted.segment {
+  background-color: #555555;
+}
+
+.ui.primary.inverted.segment {
+  background-color: #777777;
+  color: #F5F5F5;
+}
+.ui.secondary.inverted.segment {
+  background-color: #777777;
+  color: #F5F5F5;
+}
+
+.ui.tertiary.inverted.segment {
+  background-color: #B0B0B0;
+  color: #EBEBEB;
+}
+
+
+/*-------------------
+     Ordinality
+--------------------*/
+
+.ui.primary.segment {
+  background-color: #FFFFFF;
+  color: #555555;
+}
+
+.ui.secondary.segment {
+  background-color: #F5F5F5;
+  color: #777777;
+}
+
+.ui.tertiary.segment {
+  background-color: #EBEBEB;
+  color: #B0B0B0;
+}
+
+
+/*-------------------
+      Attached
+--------------------*/
+
 .ui.segment.attached {
  top: -1px;
  bottom: -1px;
@ -43,6 +216,8 @@
  -webkit-border-radius: 0px;
  border-radius: 0px;

+  margin: 0em;
+
  -moz-box-shadow: 0px 0px 0px 1px #DDDDDD;
  -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;
  box-shadow: 0px 0px 0px 1px #DDDDDD;
@ -50,6 +225,9 @@
 .ui.top.attached.segment {
  top: 0px;
  bottom: -1px;
+
+  margin-top: 0em;
+
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
  border-radius: 5px 5px 0px 0px;
@ -57,12 +235,10 @@
 .ui.segment.bottom.attached {
  top: -1px;
  bottom: 0px;
+
+  margin-bottom: 0em;
+
  -moz-border-radius: 0px 0px 5px 5px;
  -webkit-border-radius: 0px 0px 5px 5px;
  border-radius: 0px 0px 5px 5px;
 }
-
-/* Common Views */
-.ui.segment .list li {
-  padding: 10px 25px;
-}