Add stubs for several new UI components

server/documents/elements/flag.html.eco

@@ -0,0 +1,34 @@
+---
+layout      : 'default'
+css         : 'flag-page'
+element     : 'flag'
+elementType : 'element'
+
+title       : 'Flag'
+description : 'A flag is is used to represent a political state'
+status      : 'Undocumented'
+type        : 'UI Element'
+
+---
+<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/elements/flag.less" />
+
+<%- @partial('header') %>
+
+<div class="main container">
+
+  <h2 class="ui dividing header">What Can I Use This For?</h2>
+  <div class="no example">
+    <p>Flag sprites are useful for designating political states for everything from sports matches to localization dropdowns. Just be sure not to use them to represent languages or you might get a visit from the UX police.</p>
+
+    <p>Semantic UI's flag sprite is based on <a href="http://www.famfamfam.com/lab/icons/flags/" target="_blank">Fam Fam Fam's</a> image sprite</p>
+  </div>
+
+  <h2 class="ui dividing header">Development Progress</h2>
+  <div class="no example">
+    <p>This is an undocumented component, but is <b>near complete</b>.</p>
+
+    <p>You can help support the future development of the Semantic UI project, and help boost the priority of this component by donating to Semantic UI development.</p>
+
+    <p>Please be sure to leave a note in the comments to indicate that you are interested in the development of this particular component.</p>
+  </div>
+</div>

server/documents/elements/rail.html.eco

@@ -0,0 +1,34 @@
+---
+layout      : 'default'
+css         : 'rail-page'
+element     : 'rail'
+elementType : 'element'
+
+title       : 'Rail'
+description : 'A rail is used to show accompanying content outside the borders of the main content of a site'
+status      : 'Undocumented'
+type        : 'UI Element'
+
+---
+<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/elements/rail.less" />
+
+<%- @partial('header') %>
+
+<div class="main container">
+
+  <h2 class="ui dividing header">What Can I Use This For?</h2>
+  <div class="no example">
+    <p>A rail provides a fixed-width, off-canvas content segment that that is only visible at large enough screen sizes to support their inclusion.</p>
+    <p>Often rail content uses a section of content that sticks to the browser viewport, following the user as they scroll down the page. This will be available in a separate component <code>ui sticky</code>.</p>
+    <p>Examples of sites that use off-canvas rails include <a href="http://www.huffingtonpost.com/2014/09/22/obama-inversions_n_5864686.html" target="_blank">Huffington Post</a>, <a href="http://www.rottentomatoes.com/m/the_drop/">Rotten Tomatoes</a>, <a href="http://www.buzzfeed.com/claudiakoerner/rutgers-student-killed-in-bear-attack-while-hiking#2skhsin" target="_blank">BuzzFeed</a>.</p>
+  </div>
+
+  <h2 class="ui dividing header">Development Progress</h2>
+  <div class="no example">
+    <p>This is an undocumented component, but is <b>near complete</b>.</p>
+
+    <p>You can help support the future development of the Semantic UI project, and help boost the priority of this component by donating to Semantic UI development.</p>
+
+    <p>Please be sure to leave a note in the comments to indicate that you are interested in the development of this particular component.</p>
+  </div>
+</div>

server/documents/globals/reset.html.eco

@@ -0,0 +1,29 @@
+---
+layout      : 'default'
+css         : 'reset-page'
+element     : 'reset'
+elementType : 'global'
+
+title       : 'Reset'
+description : 'A reset is a set of normalized values for HTML elements that are handled improperly by browsers'
+status      : 'Undocumented'
+type        : 'UI Global'
+
+---
+<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/globals/reset.less" />
+
+<%- @partial('header') %>
+
+<div class="main container">
+
+  <h2 class="ui dividing header">What Can I Use This For?</h2>
+  <div class="no example">
+    <p>Semantic's default theme includes the latest Normalize css to provide a base line. In addition somewhat uniquely, Semantic UI requires a <b>Box-sizing</b> reset, to make sure that all elements handle width definitions in the same way.</p>
+  </div>
+
+  <h2 class="ui dividing header">Development Progress</h2>
+  <div class="no example">
+    <p>This is an undocumented component, but will be included in 1.0.</p>
+    <p>Stay tuned the next couple weeks for documentation.</p>
+  </div>
+</div>

server/documents/globals/site.html.eco

@@ -0,0 +1,30 @@
+---
+layout      : 'default'
+css         : 'site-page'
+element     : 'site'
+elementType : 'global'
+
+title       : 'Site'
+description : 'A site is a set of global constraints that define the basic parameters of all UI elements'
+status      : 'Undocumented'
+type        : 'UI Global'
+
+---
+<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/globals/site.less" />
+
+<%- @partial('header') %>
+
+<div class="main container">
+
+  <h2 class="ui dividing header">What Can I Use This For?</h2>
+  <div class="no example">
+    <p>Semantic includes a basic set of site parameters, including paragraph spacing, page line-height, body font size, color hex-code definitions, and other globally pertinent themable values</p>
+    <p>In addition Semantic provides utilities to include common web fonts available through Google Fonts, and include them as part of UI themes.</p>
+  </div>
+
+  <h2 class="ui dividing header">Development Progress</h2>
+  <div class="no example">
+    <p>This is an undocumented component, but will be included in 1.0.</p>
+    <p>Stay tuned the next couple weeks for documentation</p>
+  </div>
+</div>

server/documents/modules/sticky.html.eco

@@ -0,0 +1,55 @@
+---
+layout      : 'default'
+css         : ''
+element     : 'sticky'
+elementType : 'module'
+
+title       : 'Sticky'
+description : 'A sticky provides a wrapper for sticky embeds from common 3rd party sources.'
+type        : 'UI Module'
+
+themes      : ['Default']
+---
+
+<script src="/javascript/sticky.js"></script>
+
+<%- @partial('header', { tabs: {  overview: 'Overview' } }) %>
+
+<div class="main container">
+
+
+  <div class="ui active tab" data-tab="overview">
+
+    <h2 class="ui dividing header">What Can I Use This For?</h2>
+    <div class="no example">
+      <h4 class="ui header">Content on Rails</h4>
+      <p>Sticky allows for content to stick itself to a different elements viewport, so that it remains on screen as long as its related content is visible</p>
+      <p>Sticky content is a common pattern for content-based websites to allow for related links, author information, footnotes, and other extra information to be displayed while a user is engaged with a section of content. The grace of a sticky element, compared to a fixed element, is that sticky content is also designed to remove itself from view when a user is no longer engaged with that section, allowing for other content sections or a footer section to appear without distraction</p>
+    </div>
+    <div class="no example">
+      <h4 class="ui header">What's Different?</h4>
+      <p>Semantic's sticky component caches content positions on load then uses <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" target="_blank">DOM Mutations Observers</a> to make sure that content positions adjust as an element adjusts itself.</p>
+    </div>
+    <div class="no example">
+      <h4 class="ui header">Fixed Content Taller than the Browser</h4>
+      <p>In addition, SUI's component gracefully handles many edge cases of sticky content, allowing for the sticky column itself to scroll separately from the main site scrollbar if it cannot fit inside a browser viewport, binding to the top or bottom edge of the viewport when fully visible</p>
+    </div>
+
+    <h2 class="ui dividing header">Development Progress</h2>
+    <div class="no example">
+      <p>This is an undocumented component, but is <b>mostly complete</b>.</p>
+
+      <div class="ui teal active progress">
+        <div class="bar" style="width: 75%;"></div>
+      </div>
+
+      <p>You can help support the future development of the Semantic UI project, and help boost the priority of this component by donating to Semantic UI development.</p>
+
+      <p>Please be sure to leave a note in the comments to indicate that you are interested in the development of this particular component.</p>
+    </div>
+
+  </div>
+
+</div>
+</body>
+</html>

server/documents/modules/video.html.eco

@@ -0,0 +1,73 @@
+---
+layout      : 'default'
+css         : ''
+element     : 'video'
+elementType : 'module'
+
+title       : 'Video'
+description : 'A video provides a wrapper for video embeds from common 3rd party sources.'
+type        : 'UI Module'
+
+themes      : ['Default']
+---
+
+<script src="/javascript/video.js"></script>
+
+<%- @partial('header', { tabs: {  overview: 'Overview' } }) %>
+
+<div class="main container">
+
+
+  <div class="ui active tab" data-tab="overview">
+
+    <h2 class="ui dividing header">What Can I Use This For?</h2>
+    <div class="no example">
+      <h4 class="ui header">Many Networks One API</h4>
+      <p>Semantic's video component provides a wrapper around APIs for two popular sites for hosting multimedia content, Youtube and Vimeo, allowing you to use a single embed and unified set of javascript parameters, to control javascript callbacks, HD and UI display settings, autoplay etc.</p>
+      <p>Semantics video allows you to display videos based on a network's content ID, and can grab a content ID from an existing url, so you dont have to use full URLs to youtube content if you're storing external resources in your database.</p>
+    </div>
+    <div class="no example">
+      <h4 class="ui header">Responsive Embeds</h4>
+      <p>In additional Semantic's embeds use css based around <a href="http://embedresponsively.com/" target="_blank">Embed Responsively</a> to make your YouTube and Vimeo embed's maintain the correct aspect ratio as content resizes.</p>
+    </div>
+    <div class="no example">
+      <h4 class="ui header">Unified API</h4>
+      <p>Ever try to learn Vimeo's froogaloop video API? How about Youtube's Javascript APIs? Semantic provides unified callbacks for <code>onPlay</code>, <code>onPause</code>, and other common API endpoints for tying an external video embed into your sites UI</p>
+    </div>
+    <div class="no example">
+      <h4 class="ui header">Custom Image Placeholders</h4>
+      <p>Semantic's video component allows you the option to include a custom placeholder instead of loading the default placeholder from your media host.</p>
+    </div>
+
+    <h2 class="ui dividing header">Example</h2>
+    <div class="no example">
+      <div class="code" data-type="javascript" data-demo="true">
+        $('.ui.video').video();
+      </div>
+      <div class="code" data-type="html" data-preview="true">
+        <div class="ui video"
+          data-source="youtube"
+          data-id="i_mKY2CQ9Kk"
+          data-image="/images/cat.jpg"
+        ></div>
+      </div>
+    </div>
+
+    <h2 class="ui dividing header">Development Progress</h2>
+    <div class="no example">
+      <p>This is an undocumented component, but is <b>mostly complete</b>.</p>
+
+      <div class="ui teal active progress">
+        <div class="bar" style="width: 75%;"></div>
+      </div>
+
+      <p>You can help support the future development of the Semantic UI project, and help boost the priority of this component by donating to Semantic UI development.</p>
+
+      <p>Please be sure to leave a note in the comments to indicate that you are interested in the development of this particular component.</p>
+    </div>
+
+  </div>
+
+</div>
+</body>
+</html>

server/documents/views/feed.html.eco

@@ -22,7 +22,7 @@ themes      : ['Default', 'Timeline']
   <div class="example">
     <h4 class="ui header">Feed</h4>
     <p>A feed</p>
-    <div class="ui feed segment">
+    <div class="ui feed">
       <div class="event">
         <div class="label">
           <img src="/images/avatar/small/elliot.jpg">
@@ -157,7 +157,7 @@ themes      : ['Default', 'Timeline']
   <div class="example">
     <h4 class="ui header">Label</h4>
     <p>An event can contain an image or icon label</p>
-    <div class="ui feed segment">
+    <div class="ui feed">
       <div class="event">
         <div class="label">
           <img src="/images/avatar/small/elliot.jpg">
@@ -169,7 +169,7 @@ themes      : ['Default', 'Timeline']
     </div>
   </div>
   <div class="another example">
-    <div class="ui feed segment">
+    <div class="ui feed">
       <div class="event">
         <div class="label">
           <i class="pencil icon"></i>
@@ -188,7 +188,7 @@ themes      : ['Default', 'Timeline']
   <div class="example">
     <h4 class="ui header">Date</h4>
     <p>An event or an event summary can contain a date</p>
-    <div class="ui feed segment">
+    <div class="ui feed">
       <div class="event">
         <div class="label">
           <img src="/images/avatar/small/jenny.jpg">
@@ -205,7 +205,7 @@ themes      : ['Default', 'Timeline']
     </div>
   </div>
   <div class="another example">
-    <div class="ui feed segment">
+    <div class="ui feed">
       <div class="event">
         <div class="label">
           <img src="/images/avatar/small/jenny.jpg">
@@ -225,7 +225,7 @@ themes      : ['Default', 'Timeline']
   <div class="example">
     <h4 class="ui header">Additional information</h4>
     <p>An event can contain additional information like a set of images or text</p>
-    <div class="ui feed segment">
+    <div class="ui feed">
       <div class="event">
         <div class="label">
           <img src="/images/avatar/small/helen.jpg">
@@ -245,14 +245,14 @@ themes      : ['Default', 'Timeline']
       </div>
       <div class="event">
         <div class="label">
-          <img src="/images/avatar/small/jill.jpg">
+          <img src="/images/avatar/small/laura.jpg">
         </div>
         <div class="content">
           <div class="date">
             3 days ago
           </div>
           <div class="summary">
-             <a>Jill Kronkite</a> created a post
+             <a>Laura Faucet</a> created a post
           </div>
           <div class="extra text">
             Have you seen what's going on in Israel? Can you believe it.
@@ -268,7 +268,7 @@ themes      : ['Default', 'Timeline']
     <h4 class="ui header">Sizes</h4>
     <p>A feed can have different sizes</p>
 
-    <div class="ui small feed segment">
+    <div class="ui small feed">
       <h4 class="ui header">Followers Activity</h4>
       <div class="event">
         <div class="content">
@@ -302,7 +302,7 @@ themes      : ['Default', 'Timeline']
     >
   </div>
   <div class="another example">
-    <div class="ui large feed segment">
+    <div class="ui large feed">
       <div class="event">
         <div class="label">
           <img src="/images/avatar/small/elliot.jpg">

server/files/stylesheets/semantic.css

@@ -92,7 +92,7 @@ h1 {
   padding: 50px 0px 5px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
-h4 + p {
+#example .example .anchor + p {
   margin: 0px 0px 1em;
 }
 pre {
@@ -161,6 +161,7 @@ a:hover {
 }
 #example #menu .inverted.header {
   color: rgba(255, 255, 255, 0.8);
+  margin-bottom: 0.5em;
 }
 #example #menu a.inverted.header.active,
 #example #menu a.inverted.header:hover {
@@ -471,7 +472,7 @@ body#example.hide {
    background-position: 0% 0%;
  }
  100% {
-   background-position: 0% -410px;
+ background-position: 0% -410px;
  }
 }
 
@@ -484,6 +485,16 @@ body#example.hide {
  }
 
 }
+
+#example.index .introduction .buttons {
+  margin-top: 3em;
+}
+#example.index .introduction .label {
+  position: absolute;
+  margin-left: 2em;
+  top: 2em
+}
+
 #example.index .main.menu {
   background-color: rgba(0, 0, 0, 0.3);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
@@ -525,15 +536,6 @@ body#example.hide {
   vertical-align: top;
   width: 100%;
 }
-#example .introduction .buttons {
-  margin-top: 3em;
-}
-#example .introduction .label {
-  position: absolute;
-  margin-left: 2em;
-  top: 2em
-}
-
 #example .introduction .theme.buttons {
   margin: -0.1em 0em 0em 0.5em;
   vertical-align: middle;

server/layouts/default.html.eco

@@ -4,6 +4,7 @@
 <% uiIntroduction    = @getCollection("documents").findAll({type: $in: ['UI Introduction']},[{title: 1}]).toJSON() %>
 <% uiProject         = @getCollection("documents").findAll({type: $in: ['Semantic Project']},[{title: 1}]).toJSON() %>
 <% uiGuide           = @getCollection("documents").findAll({type: $in: ['UI Guide']},[{title: 1}]).toJSON() %>
+<% uiGlobals         = @getCollection("documents").findAll({type: $in: ['UI Global']},[{title: 1}]).toJSON() %>
 <% uiElements        = @getCollection("documents").findAll({type: $in: ['UI Element']},[{title: 1}]).toJSON() %>
 <% uiCollections     = @getCollection("documents").findAll({type: $in: ['UI Collection']},[{title: 1}]).toJSON() %>
 <% uiViews           = @getCollection("documents").findAll({type: $in: ['UI View']},[{title: 1}]).toJSON() %>
@@ -74,6 +75,7 @@
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/checkbox.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/dimmer.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/transition.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/definitions/modules/video.css">
   <% else: %>
   <link rel="stylesheet" type="text/css" class="ui" href="/build/packaged/definitions/css/semantic.min.css">
   <% end %>
@@ -134,6 +136,7 @@
   <script src="/build/uncompressed/definitions/modules/sticky.js"></script>
   <script src="/build/uncompressed/definitions/modules/tab.js"></script>
   <script src="/build/uncompressed/definitions/modules/transition.js"></script>
+  <script src="/build/uncompressed/definitions/modules/video.js"></script>
   <% else: %>
   <script src="/build/packaged/definitions/javascript/semantic.min.js"></script>
   <% end %>
@@ -173,7 +176,15 @@
       <i class="download icon"></i> <b>Download</b>
     </a>
     <div class="item">
-      <a href="/element.html" class="ui small <%= if @document.elementType is 'element' then 'active ' %>inverted header">Elements</a>
+      <div class="ui small <%= if @document.elementType is 'global' then 'active ' %> inverted header">Globals</div>
+      <div class="menu">
+        <% for element in uiGlobals: %>
+          <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
+        <% end %>
+      </div>
+    </div>
+    <div class="item">
+      <div class="ui small <%= if @document.elementType is 'element' then 'active ' %> inverted header">Elements</div>
       <div class="menu">
         <% for element in uiElements: %>
           <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
@@ -181,7 +192,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="/collection.html" class="ui small <%= if @document.elementType is 'collection' then 'active ' %> inverted header">Collections</a>
+      <div class="ui small <%= if @document.elementType is 'collection' then 'active ' %> inverted header">Collections</div>
       <div class="menu">
         <% for element in uiCollections: %>
           <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
@@ -205,7 +216,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="/module.html" class="ui small <%= if @document.elementType is 'behavior' then 'active ' %> inverted header">Behavior</a>
+      <div class="ui small <%= if @document.elementType is 'behavior' then 'active ' %> inverted header">Behaviors</div>
       <div class="menu">
         <% for element in uiBehavior: %>
           <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>

server/partials/header.html.eco

@@ -6,7 +6,7 @@
 
       <h1 class="ui header">
         <%=@document.title %>
-        <% if @document.status?: %><span class="ui label"><%= @document.status %></span><% end %>
+        <% if @document.status?: %><span class="ui red label"><%= @document.status %></span><% end %>
       </h1>
 
       <p><%=@document.description %></p>
@@ -51,12 +51,12 @@
     <% if @tabs?: %>
     <% index = 0 %>
     <% tabCount = 0 %>
-    <% numbers = ['zero', 'one', 'two', 'three', 'four', 'five', 'six'] %>
+    <% numbers = ['', '', 'two item', 'three item', 'four item', 'five item', 'six item'] %>
     <% colors = ['red', 'teal', 'blue', 'purple', 'black', 'orange'] %>
       <% for id, name of @tabs: %>
         <% tabCount++ %>
       <% end %>
-      <div class="<%= numbers[tabCount] %> item tabular ui menu">
+      <div class="<%= numbers[tabCount] %> tabular ui menu">
         <% for id, name of @tabs: %>
           <a class="<%= if index == 0 then 'active ' %>item" data-tab="<%= id %>"><%= name %></a>
           <% index++ %>