adds starter page for dimmer

node/src/documents/modules/dimmer.html

@@ -0,0 +1,116 @@
+---
+layout : 'default'
+css    : 'dimmer'
+
+title  : 'Dimmer'
+type   : 'UI Element'
+---
+<div class="segment">
+  <div class="container">
+    <div class="ui small download menu">
+      <div class="header item">Links</div>
+      <div class="simple ui dropdown item">
+        <i class="icon setting"></i> Download <i class="icon dropdown"></i>
+        <div class="menu">
+          <a class="item">Uncompressed</a>
+          <a class="item">Minified</a>
+          <a class="item">LESS</a>
+        </div>
+      </div>
+      <a class="item"><i class="icon edit"></i> Authoring Guide</a>
+    </div>
+    <h1 class="ui header">
+      Dimmer
+      <div class="sub header">Dimmers allow content to be hidden</div>
+    </h1>
+  </div>
+</div>
+<div class="main container">
+
+  <div class="peek">
+    <div class="ui vertical pointing secondary menu">
+      <a class="active item">Standard</a>
+      <a class="item">States</a>
+    </div>
+  </div>
+  <h2 class="ui dividing header">Standard</h2>
+
+  <div class="example">
+    <h4 class="ui header">Dimmer:</h4>
+    <p>A standard dimmer</p>
+    <div class="ui dimmer">
+      <dimmer type="text">
+    </div>
+  </div>
+
+  <h2 class="ui dividing header">States</h2>
+
+  <div class="example">
+    <h4 class="ui header">Focus</h4>
+    <p>An dimmer field can show a user is currently interacting with it</p>
+    <div class="ui dimmer focus">
+      <dimmer type="text">
+    </div>
+  </div>
+  
+  <div class="example">
+    <h4 class="ui header">Error</h4>
+    <p>An dimmer field can show the data contains errors</p>
+    <div class="ui dimmer error">
+      <dimmer type="text">
+    </div>
+  </div>
+  
+  <h2 class="ui dividing header">Variations</h2>
+  
+  <div class="example">
+    <h4 class="ui header">Icon</h4>
+    <p>An dimmer can be formatted with an icon</p>
+    <div class="ui icon dimmer">
+      <dimmer type="text" placeholder="Search...">
+      <i class="icon search"></i>
+    </div>
+    <br><br>
+    <div class="ui icon dimmer">
+      <dimmer type="text" placeholder="Search users...">
+      <i class="icon blue inverted users"></i>
+    </div>
+  </div>
+  
+  <div class="example">
+    <h4 class="ui header">Labeled</h4>
+    <p>An dimmer can be formatted with a label</p>
+    <div class="ui labeled dimmer">
+      <dimmer type="text" placeholder="Search...">
+      <div class="ui corner label">
+        <i class="asterisk icon"></i>
+      </div>
+    </div>
+    <br><br>
+    <div class="ui labeled dimmer">
+      <dimmer type="text" placeholder="Search...">
+      <div class="ui corner label">
+        <div class="text">New</div>
+      </div>
+    </div>
+    
+  </div>
+  
+  <div class="example">
+    <h4 class="ui header">Action</h4>
+    <p>An dimmer can be formatted to alert the user to an action they may perform</p>
+    <div class="ui dimmer action">
+      <dimmer type="text" placeholder="Search...">
+      <div class="ui button">Search</div>
+    </div>
+    <br><br>
+    <div class="ui dimmer action">
+      <dimmer type="text" placeholder="Search...">
+      <div class="ui teal button"><i class="add user icon"></i> Add users</div>
+    </div>
+  </div>
+
+</div>
+</body>
+
+</html>