RubyGems - markdown-ui - Versions diffs - 0.1.11 → 0.1.12 - Mend

markdown-ui 0.1.11 → 0.1.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

checksums.yaml +4 -4
data/Changelog +7 -0
data/TODO.md +17 -3
data/components/elements/markdown-ui-content/lib/content/item_block.rb +19 -0
data/exe/markdown-ui +1 -2
data/lib/markdown-ui.rb +2 -0
data/lib/markdown-ui/version.rb +1 -1
data/website/about.html +1 -2
data/website/about.md +1 -6
data/website/docs/button.html +1 -17
data/website/docs/button.md +0 -208
data/website/docs/container.html +269 -38
data/website/docs/container.md +188 -102
data/website/docs/toc.html +4 -2
data/website/docs/toc.md +2 -10
data/website/index.html +1 -3
data/website/index.md +1 -24
metadata +3 -2

checksums.yaml CHANGED

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e948b13739771cf2a0c3f9805ff230213cafc774
-  data.tar.gz: 8f06bd181772ee12552d38d22fa1a1fa006f1073
+  metadata.gz: 2e8c98607d45d75da7ea4a17ede2d1a154680c1b
+  data.tar.gz: 93df15e43b1bff1140689acb832cc9d7e68f376e
 SHA512:
-  metadata.gz: b4f8f331ca1efd4cf81b651634bedf1c3c80352398caa9fb13a4a5755a3ac903e0ae784213906ddda7e55f41f83b5610388be84a18bd04604293ff58517dc80e
-  data.tar.gz: faf06313f3ec309f901564c13c33c94a4cd2d6c32d067ca4e0ee514cde2d2b3dc9bcf3ad7d03d7ec1cb88aa061b7a98077f7dd54ae692835d2b3ab07624a0d70
+  metadata.gz: 6399c625a4bbff33f15bb9402cb9839193761f87cefb98a25528f8a4d825bd9fef0e7dc1714a32bee5e32b9df52391f6004164c363267d4e3076ec115ba20da0
+  data.tar.gz: b295997adb8731b9811707fbf075305b34f9c3b3edb5f017b51cbf5e69daf609f896bee71099456c6955f88aa18f67565cda0be889ac7af5d1f14c3bc45a6909

data/Changelog CHANGED

@@ -1,3 +1,10 @@
+0.1.12 - 08-25-15
+  * Removed Nokogiri post-processing using CLI markdown-ui
+  * Fixed Container Examples to occupy and display full container in view
+  * Added ItemBlock class to handle Item Block tags
+  * Cleanup documentations by removing excessive separators
+  * Added Container Examples
 0.1.11 - 08-24-15
   * Upgraded RedCarpet to 3.3
   * Upgraded Semantic-UI to 2.0.8

data/TODO.md CHANGED

@@ -53,6 +53,20 @@
   √ Fluid
 * Examples
-  Container Using Grids
-  Centered Menu
-  Container Segment
+  √ Container Using Grids
+  √ Centered Menu
+  √ Container Segment
+#Divider
+* Types
+  Divider
+  Vertical Divider
+  Horizontal Divider
+* Variations
+  Inverted
+  Fitted
+  Hidden
+  Section
+  Clearing

data/components/elements/markdown-ui-content/lib/content/item_block.rb ADDED

@@ -0,0 +1,19 @@
+# coding: UTF-8
+module MarkdownUI
+  module Content
+    class ItemBlock
+      def initialize(element, content)
+        @element = element
+        @content = content
+      end
+      def render
+        klass = "ui #{@element} item"
+        content = @content.strip
+        MarkdownUI::StandardTag.new(content, klass).render
+      end
+    end
+  end
+end

data/exe/markdown-ui CHANGED

@@ -2,7 +2,6 @@
 require "bundler/setup"
 require "markdown-ui"
-require "nokogiri"
 parser = Redcarpet::Markdown.new(MarkdownUI::Renderer, quote: true, tables: true, xhtml: true)
 f = File.open(ARGV.first, 'r')
@@ -28,7 +27,7 @@ puts <<-EOS
 </head>
 <body>
-  #{Nokogiri::XML(@content, &:noblanks).to_xhtml(indent: 2)}
+#{@content}
 </body>
 </html>
 EOS

data/lib/markdown-ui.rb CHANGED

@@ -89,6 +89,8 @@ module MarkdownUI
             MarkdownUI::Message.new(element, content).render
           when /label/i
             MarkdownUI::Label::Element.new(element, content).render
+          when /item/i
+            MarkdownUI::Content::ItemBlock.new(element, content).render
         end
       end
     end

data/lib/markdown-ui/version.rb CHANGED

@@ -1,3 +1,3 @@
 module MarkdownUI
-  VERSION = '0.1.11'
+  VERSION = '0.1.12'
 end

data/website/about.html CHANGED

@@ -16,7 +16,7 @@
 </head>
 <body>
-  <div class="ui container">
+<div class="ui container">
   <div class="ui inverted segment">
     <div class="ui inverted menu">
       <a class="ui basic item" href="http://jjuliano.github.io/markdown-ui">Markdown UI</a>
@@ -61,7 +61,6 @@
       </ul>
     </div>
   </div>
-<!-- -->
 </div>
 </body>

data/website/about.md CHANGED

@@ -9,7 +9,6 @@
 > > > > [Install](index.html#install)
 >
 > <!-- -->
->
 > > Text Container:
 > > > Segment:
 > > > ## About
@@ -24,8 +23,4 @@
 > > > * "rapid prototyping"
 > > > * "focus on important stuff"
 > > > * "UI/UX brain-storming sessions via email, whiteboard, text editor, paper, etc."
-> > > * "shell-scripting your UI's"
->
-> <!-- -->
->
+> > > * "shell-scripting your UI's"

data/website/docs/button.html CHANGED

@@ -16,7 +16,7 @@
 </head>
 <body>
-  <div class="ui container">
+<div class="ui container">
   <div class="ui inverted segment">
     <div class="ui inverted menu">
       <a class="ui basic item" href="http://jjuliano.github.io/markdown-ui">Markdown UI</a>
@@ -58,7 +58,6 @@
         <code>__Button|Follow__</code>
       </div>
     </div>
-<!-- -->
   </div>
 <!-- -->
   <div class="ui divided segment grid">
@@ -77,7 +76,6 @@
         <code>__&lt;Optional-Class&gt; Button|Follow|&lt;Optional-ID&gt;__</code>
       </div>
     </div>
-<!-- -->
   </div>
 <!-- -->
   <div class="ui divided segment grid">
@@ -96,7 +94,6 @@
         <code>__Focusable Button|Follow|&lt;Optional-ID&gt;__</code>
       </div>
     </div>
-<!-- -->
   </div>
 <!-- -->
   <div class="ui basic segment">
@@ -126,7 +123,6 @@
         <code>__Secondary Button|Save__  __Button|Discard__</code>
       </div>
     </div>
-<!-- -->
   </div>
 <!-- -->
   <div class="ui basic segment">
@@ -155,7 +151,6 @@
         <code>__Animated Button|Next;Icon:Right Arrow__</code>
       </div>
     </div>
-<!-- -->
   </div>
 <!-- -->
   <div class="ui divided segment grid">
@@ -179,7 +174,6 @@
         <code>__Vertical Animated Button|Icon:Shop;Shop__</code>
       </div>
     </div>
-<!-- -->
   </div>
 <!-- -->
   <div class="ui divided segment grid">
@@ -201,7 +195,6 @@
         <code>__Fade Animated Button|Sign-up for a Pro account;$12.99 a month__</code>
       </div>
     </div>
-<!-- -->
   </div>
 <!-- -->
   <div class="ui basic segment">
@@ -227,7 +220,6 @@
         <code>__Icon Button|Icon:Cloud__</code>
       </div>
     </div>
-<!-- -->
   </div>
 <!-- -->
   <div class="ui basic segment">
@@ -251,7 +243,6 @@
         <code>__Labeled Icon Button|Icon:Pause,Pause__</code>
       </div>
     </div>
-<!-- -->
   </div>
 <!-- -->
   <div class="ui basic segment">
@@ -275,7 +266,6 @@
         <code>__Basic Button|Icon:User,Add Friend__</code>
       </div>
     </div>
-<!-- -->
   </div>
 <!-- -->
   <div class="ui divided segment grid">
@@ -321,7 +311,6 @@
         <code>__Basic Teal Button|Teal__</code>
       </div>
     </div>
-<!-- -->
   </div>
 <!-- -->
   <div class="ui basic segment">
@@ -376,7 +365,6 @@
         <code>&gt; __Inverted Teal Button|Teal__</code>
       </div>
     </div>
-<!-- -->
   </div>
 <!-- -->
   <div class="ui basic segment">
@@ -414,7 +402,6 @@
         <code>&gt; __Standard Button|Three__</code>
       </div>
     </div>
-<!-- -->
   </div>
 <!-- -->
   <div class="ui basic segment">
@@ -483,7 +470,6 @@
         <code>&gt; __Button|Icon:Text Width__</code>
       </div>
     </div>
-<!-- -->
   </div>
 <!-- -->
   <div class="ui basic segment">
@@ -543,7 +529,6 @@
         <code>&gt; __Positive Button|deux|&lt;Optional-ID&gt;__</code>
       </div>
     </div>
-<!-- -->
   </div>
 <!-- -->
   <div class="ui basic segment">
@@ -996,7 +981,6 @@
         <br />
       </div>
     </div>
-<!-- -->
   </div>
 <!-- -->
   <div class="ui basic segment">

data/website/docs/button.md CHANGED

@@ -9,105 +9,81 @@
 > > > > [Install](../index.html#install)
 >
 > <!-- -->
->
 > > Basic Segment:
 > > # Button:Center Aligned:button
 >
 > <!-- -->
->
 > > Basic Segment:
 > > ## Types:Dividing Left Aligned:types
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Button::simple-button
 > > "Standard Button"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Standard Button
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > __Button|Follow__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
 > > > > ``` __Button|Follow__ ```
-> >
-> > <!-- -->
-> >
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Standard Button with Custom Class And ID
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > __Optional-Class Button|Follow|Optional-ID__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
 > > > > ```__<Optional-Class> Button|Follow|<Optional-ID>__```
-> >
-> > <!-- -->
-> >
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Focusable Button
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > __Focusable Button|Follow|Optional-ID__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
 > > > > ``` __Focusable Button|Follow|<Optional-ID>__ ```
-> >
-> > <!-- -->
-> >
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Emphasis::emphasis
 > > "A button can be formatted to show different levels of emphasis"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Emphasis
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > __Primary Button|Save__  __Button|Discard__
@@ -115,187 +91,141 @@
 > > > __Secondary Button|Save__  __Button|Discard__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
 > > > > ``` __Primary Button|Save__  __Button|Discard__ ``` <br />
 > > > > ``` __Secondary Button|Save__  __Button|Discard__ ```
-> >
-> > <!-- -->
-> >
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Animated::animated
 > > "A button can animate to show hidden content"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Animated
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > __Animated Button|Next;Icon:Right Arrow__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
 > > > > ```__Animated Button|Next;Icon：Right Arrow__```
-> >
-> > <!-- -->
-> >
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Vertical Animated
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > __Vertical Animated Button|Icon:Shop;Shop__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
 > > > > ```__Vertical Animated Button|Icon：Shop;Shop__```
-> >
-> > <!-- -->
-> >
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Fade Animated
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > __Fade Animated Button|Sign-up for a Pro account;$12.99 a month__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
 > > > > ```__Fade Animated Button|Sign-up for a Pro account;$12.99 a month__```
-> >
-> > <!-- -->
-> >
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Icon::icon
 > > "A button can have only an icon"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Icon Button
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > __Icon Button|Icon:Cloud__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
 > > > > ``` __Icon Button|Icon：Cloud__ ```
-> >
-> > <!-- -->
-> >
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Labeled Icon::labeled-icon
 > > "A button can have an icon and a label"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Labeled Icon
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > __Labeled Icon Button|Icon:Pause,Pause__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
 > > > > ``` __Labeled Icon Button|Icon：Pause,Pause__ ```
-> >
-> > <!-- -->
-> >
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Basic Button::basic-button
 > > "A basic button is less pronounced"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Basic Button
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > __Basic Button|Icon:User,Add Friend__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
 > > > > ``` __Basic Button|Icon：User,Add Friend__ ```
-> >
-> > <!-- -->
-> >
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Basic Button
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > __Basic Standard Button|Standard__
@@ -310,7 +240,6 @@
 > > > __Basic Teal Button|Teal__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -324,25 +253,19 @@
 > > > > ``` __Basic Pink Button|Pink__``` <br />
 > > > > ``` __Basic Red Button|Red__``` <br />
 > > > > ``` __Basic Teal Button|Teal__```
-> >
-> > <!-- -->
-> >
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Inverted::inverted
 > > "A button can be formatted to appear on dark backgrounds"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Inverted
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > > Inverted Very Padded Segment:
@@ -358,7 +281,6 @@
 > > > __Inverted Teal Button|Teal__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -373,30 +295,23 @@
 > > > > ```> __Inverted Pink Button|Pink__``` <br />
 > > > > ```> __Inverted Red Button|Red__``` <br />
 > > > > ```> __Inverted Teal Button|Teal__```
-> >
-> > <!-- -->
-> >
 >
 > <!-- -->
->
 > > Basic Segment:
 > > ## Groups:Dividing Left Aligned:groups
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Buttons::buttons
 > > "Buttons can exist together as a group"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Buttons
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > > Buttons:
@@ -405,7 +320,6 @@
 > > > > __Button|Three|Standard__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -413,25 +327,19 @@
 > > > > ```> __Standard Button|One__``` <br />
 > > > > ```> __Standard Button|Two__``` <br />
 > > > > ```> __Standard Button|Three__```
-> >
-> > <!-- -->
-> >
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Icon Buttons::icon-buttons
 > > "Buttons can exist together as a group"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Buttons
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > > Icon Buttons:
@@ -441,14 +349,12 @@
 > > > > __Button|Icon: Align Justify__
 > > >
 > > > <!-- -->
-> > >
 > > > > Icon Buttons:
 > > > > __Button|Icon: Bold__
 > > > > __Button|Icon: Underline__
 > > > > __Button|Icon: Text Width__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -464,30 +370,23 @@
 > > > > ```> __Button|Icon：Bold__``` <br />
 > > > > ```> __Button|Icon：Underline__``` <br />
 > > > > ```> __Button|Icon：Text Width__```
-> >
-> > <!-- -->
-> >
 >
 > <!-- -->
->
 > > Basic Segment:
 > > ## Content:Dividing Left Aligned:content
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Conditionals::conditionals
 > > "Button groups can contain conditionals"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Conditionals
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > > Buttons:
@@ -496,7 +395,6 @@
 > > > > __Positive Button|Save__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -506,7 +404,6 @@
 > > > > ```> __Positive Button|Save__```
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > > Buttons:
@@ -515,7 +412,6 @@
 > > > > __Positive Button|deux|Optional-ID__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -523,82 +419,67 @@
 > > > > ```> __Button|un__``` <br />
 > > > > ```> __Div Tag||Or|Data：Text：ou__``` <br />
 > > > > ```> __Positive Button|deux|<Optional-ID>__```
-> >
-> > <!-- -->
-> >
 >
 > <!-- -->
->
 > > Basic Segment:
 > > ## States:Dividing Left Aligned:states
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Active::active
 > > "A button can show it is currently the active user selection"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Active State
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > __Active Button|Icon:User, Follow__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
 > > > > ```__Active Button|Icon：User, Follow__```
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Disabled::disabled
 > > "A button can show it is currently unable to be interacted with"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Disabled State
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > __Disabled Button|Icon:User,Followed__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
 > > > > ```__Disabled Button|Icon：User,Followed__```
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Loading::loading
 > > "A button can show a loading indicator"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Loading State
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > __Loading Button|Loading__
@@ -607,7 +488,6 @@
 > > > __Secondary Loading Button|Loading__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -617,25 +497,21 @@
 > > > > ``` __Secondary Loading Button|Loading__ ```
 >
 > <!-- -->
->
 > > Basic Segment:
 > > ## Variations:Dividing Left Aligned:variations
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Social::social
 > > "A button can be formatted to link to a social website"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Social
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > __Facebook Button|Icon:Facebook, Facebook__
@@ -647,7 +523,6 @@
 > > > __YouTube Button|Icon:YouTube, YouTube__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -660,20 +535,17 @@
 > > > > ``` __YouTube Button|Icon：YouTube, YouTube__ ``` <br />
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Size::size
 > > "A button can have different sizes"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Size
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > __Mini Button|Mini__
@@ -686,7 +558,6 @@
 > > > __Massive Button|Massive__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -700,20 +571,17 @@
 > > > > ``` __Massive Button|Massive__ ```
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Colored::colored
 > > "A button can have different colors"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Colored
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > __Red Button|Red__
@@ -731,7 +599,6 @@
 > > > __Black Button|Black__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -750,20 +617,17 @@
 > > > > ``` __Black Button|Black__ ```
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Compact::compact
 > > "A button can reduce its padding to fit into tighter spaces"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Compact
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > __Compact Button|Hold__
@@ -771,7 +635,6 @@
 > > > __Compact Labeled Icon Button|Icon:Pause, Pause__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -780,27 +643,23 @@
 > > > > ``` __Compact Labeled Icon Button|Icon：Pause, Pause__ ```
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Positive::positive
 > > "A button can hint towards a positive consequence"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Positive
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > __Positive Button|Positive Button__
 > > > __Negative Button|Negative Button__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -808,98 +667,83 @@
 > > > > ``` __Negative Button|Negative Button__ ``` <br />
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Negative::negative
 > > "A button can hint towards a negative consequence"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Negative
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > __Negative Button|Negative Button__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
 > > > > ``` __Negative Button|Negative Button__ ``` <br />
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Fluid::fluid
 > > "A button can take the width of its container"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Fluid
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > __Fluid Button|Fluid Button__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
 > > > > ``` __Fluid Button|Fluid Button__ ``` <br />
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Circular::circular
 > > "A button can be circular"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Circular
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > __Circular Icon Button|Icon:Settings__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
 > > > > ``` __Circular Icon Button|Icon：Settings__ ``` <br />
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Vertically Attached::vertically-attached
 > > "A button can be attached to the top or bottom of other content"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Vertically Attached
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > __Top Attached Focusable Button|Top__
@@ -910,7 +754,6 @@
 > > > __Bottom Attached Focusable Button|Bottom__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -922,7 +765,6 @@
 > > > > ``` __Bottom Attached Focusable Button|Bottom__ ``` <br />
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > > Two Top Attached Buttons:
@@ -930,18 +772,15 @@
 > > > > __Button|Two__
 > > >
 > > > <!-- -->
-> > >
 > > > > Attached Segment:
 > > > > " "
 > > >
 > > > <!-- -->
-> > >
 > > > > Two Bottom Attached Buttons:
 > > > > __Button|One__
 > > > > __Button|Two__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -959,32 +798,25 @@
 > > > > ```> Two Bottom Attached Buttons：``` <br />
 > > > > ```> __Button|One__ ``` <br />
 > > > > ```> __Button|Two__ ``` <br />
-> >
-> > <!-- -->
-> >
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Horizontally Attached::horizontally-attached
 > > "A button can be attached to the left or right of other content"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Horizontally Attached
 > >
 > > <!-- -->
-> >
 > > > Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > __Left Attached Button|Left__
 > > > __Right Attached Button|Right__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -992,25 +824,21 @@
 > > > > ``` > __Right Attached Button|Right__ ```
 >
 > <!-- -->
->
 > > Basic Segment:
 > > ## Group Variations:Dividing Left Aligned:group-variations
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Vertical Buttons::vertical-buttons
 > > "Groups can be formatted to appear vertically"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Vertical Buttons
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > > Vertical Buttons:
@@ -1020,7 +848,6 @@
 > > > > __Button|Photos__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -1031,20 +858,17 @@
 > > > > ``` > __Button|Photos__ ```
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Icon Buttons::icon-buttons
 > > "Groups can be formatted as icons"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Icon Buttons
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > > Icon Buttons:
@@ -1053,7 +877,6 @@
 > > > > __Button|Icon:Shuffle__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -1063,20 +886,17 @@
 > > > > ``` > __Button|Icon：Shuffle__ ```
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Labeled Icon Buttons::labeled-icon-buttons
 > > "Groups can be formatted as labeled icons"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Labeled Icon Buttons
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > > Vertical Labeled Icon Buttons:
@@ -1085,7 +905,6 @@
 > > > > __Button|Icon:Shuffle, Shuffle__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -1095,20 +914,17 @@
 > > > > ``` > __Button|Icon：Shuffle, Shuffle__ ```
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Mixed Group::mixed-group
 > > "Groups can be formatted to use multiple button types together"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Mixed Group
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > > Buttons:
@@ -1117,7 +933,6 @@
 > > > > __Right Labeled Icon Button|Icon:Right Chevron, Forward__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -1127,20 +942,17 @@
 > > > > ``` > __Right Labeled Icon Button|Icon：Right Chevron, Forward__ ```
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Equal Width::equal-width
 > > "Groups can have their widths divided evenly"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Equal Width
 > >
 > > <!-- -->
-> >
 > > > Eight Wide Column:
 > > > ##### Preview:Center Aligned
 > > > > Five Buttons:
@@ -1151,14 +963,12 @@
 > > > > __Button|Support__
 > > >
 > > > <!-- -->
-> > >
 > > > > Three Buttons:
 > > > > __Button|Overview__
 > > > > __Button|Specs__
 > > > > __Button|Support__
 > >
 > > <!-- -->
-> >
 > > > Eight Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -1177,20 +987,17 @@
 > > > > ``` > __Button|Support__ ```
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Colored Buttons::colored-buttons
 > > "Groups can have a shared color"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Colored Buttons
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > > Blue Buttons:
@@ -1199,7 +1006,6 @@
 > > > > __Button|Three__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -1209,20 +1015,17 @@
 > > > > ``` > __Button|Three__ ```
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Basic Buttons::basic-buttons
 > > "A button group can be less pronounced"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Basic Buttons
 > >
 > > <!-- -->
-> >
 > > > Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > > Basic Buttons:
@@ -1238,7 +1041,6 @@
 > > > > __Button|Three__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -1255,7 +1057,6 @@
 > > > > ``` > __Button|Three__ ```
 > >
 > > <!-- -->
-> >
 > > > Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > > Buttons:
@@ -1264,7 +1065,6 @@
 > > > > __Green Basic Button|Three__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -1274,20 +1074,17 @@
 > > > > ``` > __Green Basic Button|Three__ ```
 >
 > <!-- -->
->
 > > Basic Segment:
 > > #### Group Sizes::group-sizes
 > > "Groups can have a shared color"
 >
 > <!-- -->
->
 > > Divided Segment Grid:
 > > > Attached Segment:
 > > > > Top Attached Label:
 > > > > Group Sizes
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > > Large Buttons:
@@ -1296,7 +1093,6 @@
 > > > > __Button|Three__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -1306,7 +1102,6 @@
 > > > > ``` > __Button|Three__ ```
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > > Small Basic Icon Buttons:
@@ -1316,7 +1111,6 @@
 > > > > __Button|Icon:Download__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment:
@@ -1327,7 +1121,6 @@
 > > > > ``` > __Button|Icon：Download__ ``` <br />
 > >
 > > <!-- -->
-> >
 > > > Center Aligned Six Wide Column:
 > > > ##### Preview:Center Aligned
 > > > > Large Buttons:
@@ -1336,7 +1129,6 @@
 > > > > __Button|Two__
 > >
 > > <!-- -->
-> >
 > > > Ten Wide Column:
 > > > ##### Markdown Syntax
 > > > > Inverted Very Padded Segment: