markdown-ui 0.1.15 → 0.1.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e2b8d70e2a97b8b87cf9d5f1d7a8297d92e29eff
-  data.tar.gz: aef142d60313c8d24ba027b5d7c6990e858ed404
+  metadata.gz: d4d04fc517dd1b29cfdf7f18b46f67ceba909803
+  data.tar.gz: 5866cccd06706ffe32067fdabf93b6e46e9f09ab
 SHA512:
-  metadata.gz: 2443d6ec896ff8fb610a3abd8127fce415992731af9fddf7c70f858f64f8dd4718ba37b6cfd25712e4c4dfd4a1dabb321f8ec1458dbdf239c64227909fa6e095
-  data.tar.gz: fd824860dfdaf5db4d11d744d59dc5355376575498adfde07a3b3dace2dfc4049585fb75396c411d21d089c96c7941c22d7303a1936b3cad1bfa2a3b48ad2f62
+  metadata.gz: 8f0f3561f7156aa4dd26814ff18c076515a305dab72ce8543f03f3d91771d5e5cce583bd76ad978007ac0873c13c4103c0747f55e8f610cedc7c3717ee66268c
+  data.tar.gz: 98009d4c4a0871dae899105ac542ad79f08cfc15b5208390a40f77576d75bee106df7645b92ff8ada7c7b52080c48d95be47a6b8cd180b2de1c663b6733e2c7b

data/Changelog

@@ -1,3 +1,22 @@
+0.1.16 - 11-16-15
+  * abbfe2f Added span and content block; added header examples
+  * 459aa65 Removed unneeded JS code
+  * ce643ba Add Flag Element and Docs
+  * 3db8f6a Add divider variations tests
+  * 14adbb4 Add Footer, Licensing and Donation info
+  * a0bcaab Responsive Documentations via Stackable container/grids
+  * 6fd9ce1 set viewport meta to point scale
+  * b5fd1a3 set viewport meta to point scale
+  * 858e0d6 Update docs with new responsive elements defaults
+  * e692b8a Add sensible defaults for mobile first and responsive elements
+  * 20ae1a2 Add remaining Divider docs
+  * dbae563 Explicitly load Semantic-UI reset stylesheet on the body; Bump to 2.1.6
+  * 0ea0792 Added '> Header:' block
+  * 0ac0ae5 Added Divider element variations in TOC
+  * 8a3d29c Set the default project encoding
+  * 1c4401b Update README.md
+  * 0e077aa Explain writing in HTML/JS using custom Javascripts
+
 0.1.15 - 11-6-15
   * Updated Semantic-UI to 2.1.5
   * Added inverted segment variation test

data/Gemfile

@@ -1,6 +1,9 @@
 source 'https://rubygems.org'
 gemspec
 
+Encoding.default_external = Encoding::UTF_8
+Encoding.default_internal = Encoding::UTF_8
+
 group :elements do
   gem 'markdown-ui-button',    \
   path: 'components/elements/markdown-ui-button/'

data/README.md

@@ -6,13 +6,46 @@
 
 Write UI in Markdown Syntax. See http://jjuliano.github.io/markdown-ui/
 
-## Installation
+# Installation
 
-    $ gem install markdown-ui
+Markdown-UI is readily available as a Ruby gem.
+The minimum required Ruby version is 2.0.
 
-## Usage
+`$ gem install markdown-ui`
 
-    $ markdown-ui file.mdui
+# Usage
+
+Output is via standard out, which can be piped to create an HTML file. (Under Mac and Linux)
+
+`$ markdown-ui index.mdui > index.html`
+
+# Markdown-UI (Read-Evaluate-Print-Loop) REPL shell
+
+You can interactively create Markdown-UI websites using the markdown-ui-shell.
+
+```
+$ markdown-ui-shell
+
+Hit RETURN three times to parse.
+# __Button|A Button__
+#
+#
+
+<button class="ui button">A Button</button>
+
+#
+```
+
+# Credits
+
+Markdown-UI would not be possible without the the [Semantic-UI](http：//www.semantic-ui.com) framework, and the Ruby [RedCarpet](https：//github.com/vmg/redcarpet) library. A huge thanks and credit goes to the people behind these wonderful framework and libraries.
+
+# Notes/Issues/Bugs
+
+  * Ongoing support for Semantic-UI elements/modules/components
+  * The Colon (:) character will be parsed when used inside a text, needs post-processing to dislay correctly (for URLs)
+  * A separator in between two spaces is required on block elements to separate elements (see Column example)
+  * Some elements requires custom javascripts (ie toggle button) in order to display and format them properly. You can write in HTML and Javascripts the additional code alongside your Markdown-UI docs to display them properly.
 
 ## Contributing
 
@@ -24,4 +57,3 @@ Write UI in Markdown Syntax. See http://jjuliano.github.io/markdown-ui/
 
 
 [![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/jjuliano/markdown-ui/trend.png)](https://bitdeli.com/free "Bitdeli Badge")
-

data/TODO.md

@@ -64,8 +64,8 @@
   √ Horizontal Divider
 
 * Variations
-  Inverted
-  Fitted
-  Hidden
-  Section
-  Clearing
+  √ Inverted
+  √ Fitted
+  √ Hidden
+  √ Section
+  √ Clearing

data/components/elements/markdown-ui-content/lib/content/content_block.rb

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

data/components/elements/markdown-ui-content/lib/content/flag.rb

@@ -0,0 +1,24 @@
+# coding: UTF-8
+
+module MarkdownUI
+  module Content
+    class Flag
+      def initialize(content, klass = nil)
+        @content = content
+        @klass = klass
+      end
+
+      def render
+        content = @content.downcase
+        klass = MarkdownUI::KlassUtil.new("#{@content} #{@klass} flag").klass
+
+        output = []
+        output << '<i'
+        output << klass
+        output << '></i>'
+
+        output.join
+      end
+    end
+  end
+end

data/components/elements/markdown-ui-content/lib/content/header_block.rb

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

data/components/elements/markdown-ui-content/lib/content/parser.rb

@@ -53,6 +53,8 @@ module MarkdownUI
             MarkdownUI::Content::Text.new(actual_content, klass).render
           elsif mode.icon?
             MarkdownUI::Content::Icon.new(actual_content, klass).render
+          elsif mode.flag?
+            MarkdownUI::Content::Flag.new(actual_content, klass).render
           elsif mode.header?
             MarkdownUI::Content::Header.new(actual_content, klass).render
           elsif mode.list? && mode.ordered?

data/components/elements/markdown-ui-content/lib/content/span_block.rb

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

data/exe/markdown-ui

@@ -15,19 +15,19 @@ puts <<-EOS
 <head>
   <meta charset='utf-8'>
   <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
-  <meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1'>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
-  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.5/semantic.min.css'>
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.css'>
   <script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
-  <script src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.5/semantic.min.js'></script>
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.js'></script>
 
   <!--[if lt IE 9]>
   <script src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script>
   <![endif]-->
 </head>
-
 <body>
-#{@content}
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/reset.min.css'>
+  #{@content}
 </body>
 </html>
 EOS

data/lib/markdown-ui.rb

@@ -27,7 +27,7 @@ module MarkdownUI
     end
 
     def emphasis(text)
-      MarkdownUI::Content::Icon.new(text).render
+      text =~ /icon/i ? MarkdownUI::Content::Icon.new(text).render : MarkdownUI::Content::Flag.new(text).render
     end
 
     def double_emphasis(text)
@@ -104,6 +104,12 @@ module MarkdownUI
             MarkdownUI::Content::InputBlock.new(element, content).render
           when /divider/i
             MarkdownUI::Content::DividerBlock.new(element, content).render
+          when /header/i
+            MarkdownUI::Content::HeaderBlock.new(element, content).render
+          when /content/i
+            MarkdownUI::Content::ContentBlock.new(element, content).render
+          when /span/i
+            MarkdownUI::Content::SpanBlock.new(element, content).render
           end
         end
       end

data/lib/markdown-ui/version.rb

@@ -1,3 +1,3 @@
 module MarkdownUI
-  VERSION = '0.1.15'
+  VERSION = '0.1.16'
 end

data/website/about.html

@@ -4,23 +4,23 @@
 <head>
   <meta charset='utf-8'>
   <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
-  <meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1'>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
-  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.5/semantic.min.css'>
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.css'>
   <script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
-  <script src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.5/semantic.min.js'></script>
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.js'></script>
 
   <!--[if lt IE 9]>
   <script src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script>
   <![endif]-->
 </head>
-
 <body>
-<div class="ui container">
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/reset.min.css'>
+  <div class="ui container">
   <div class="ui inverted segment">
-    <div class="ui inverted menu">
+    <div class="ui stackable inverted container menu">
       <a class="ui basic item" href="http://jjuliano.github.io/markdown-ui">Markdown UI</a>
-      <div class="ui inverted right menu">
+      <div class="ui stackable inverted right menu">
         <a class="ui item" href="docs/toc.html">Docs</a>
         <a class="ui active item" href="about.html">About</a>
         <a class="ui item" href="https://github.com/jjuliano/markdown-ui">Github</a>
@@ -61,6 +61,15 @@
       </ul>
     </div>
   </div>
+<!-- -->
+  <div class="ui inverted center aligned footer segment container grid">
+    <div class="ui ten wide column"><h5 class="ui inverted header">Help Preserve This Project</h5>
+Please help Markdown-UI by means of voluntary donations, money donated to the project will benefit the project by ensuring that Markdown-UI itself will remain well supported for the foreseeable future.
+<p></p>
+
+<a class="ui item" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=RVL2DAA4Y6NXL"><button class="ui primary button">Donate Today</button></a>
+<div class="ui divider"></div><a class="ui item" href="http://markdown-ui.mit-license.org">Free and Open Source (MIT)</a></div>
+  </div>
 </div>
 
 </body>

data/website/about.md

@@ -1,8 +1,8 @@
 > Container:
 > > Inverted Segment:
-> > > Inverted Menu:
+> > > Stackable Inverted Container Menu:
 > > > [Markdown UI](http：//jjuliano.github.io/markdown-ui "basic")
-> > > > Inverted Right Menu:
+> > > > Stackable Inverted Right Menu:
 > > > > [Docs](docs/toc.html)
 > > > > [About](about.html "active")
 > > > > [Github](https：//github.com/jjuliano/markdown-ui)
@@ -23,4 +23,14 @@
 > > > * "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"
+>
+> <!-- -->
+> > Inverted Center Aligned Footer Segment Container Grid:
+> > > Ten Wide Column:
+> > > ##### Help Preserve This Project:Inverted
+> > > Please help Markdown-UI by means of voluntary donations, money donated to the project will benefit the project by ensuring that Markdown-UI itself will remain well supported for the foreseeable future.
+> > > " "
+> > > [__Primary Button|Donate Today__](PAYPAL_BUTTON)
+> ____
+> > [Free and Open Source (MIT)](http：//markdown-ui.mit-license.org)

data/website/compile.sh

@@ -1,19 +1,12 @@
 #!/usr/bin/env bash
 
-for i in *.md; do
+for i in *.md docs/*.md ; do
   echo "PROCESSING FILE: $i"
+  dname="$(dirname $i)"
   name="$(basename $i .md)"
-  ../exe/markdown-ui $name.md > $name.html
+  ../exe/markdown-ui $dname/$name.md > $dname/$name.html
 
-  sed -ie 's/：/:/g' $name.html 2> /dev/null
-  rm -rf $name.htmle
-done
-
-for i in docs/*.md; do
-  echo "PROCESSING FILE: $i"
-  name="$(basename $i .md)"
-  ../exe/markdown-ui $i > docs/$name.html
-
-  sed -ie 's/：/:/g' docs/$name.html 2> /dev/null
-  rm -rf docs/$name.htmle
+  sed -ie 's/：/:/g' $dname/$name.html 2> /dev/null
+  sed -ie 's/PAYPAL_BUTTON/https\:\/\/www\.paypal\.com\/cgi\-bin\/webscr\?cmd\=\_s\-xclick\&hosted_button_id=RVL2DAA4Y6NXL/g' $dname/$name.html 2> /dev/null
+  rm -rf $dname/$name.htmle
 done

data/website/docs/button.html

@@ -4,23 +4,23 @@
 <head>
   <meta charset='utf-8'>
   <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
-  <meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1'>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
-  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.5/semantic.min.css'>
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.css'>
   <script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
-  <script src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.5/semantic.min.js'></script>
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.js'></script>
 
   <!--[if lt IE 9]>
   <script src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script>
   <![endif]-->
 </head>
-
 <body>
-<div class="ui container">
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/reset.min.css'>
+  <div class="ui container">
   <div class="ui inverted segment">
-    <div class="ui inverted menu">
+    <div class="ui stackable inverted container menu">
       <a class="ui basic item" href="http://jjuliano.github.io/markdown-ui">Markdown UI</a>
-      <div class="ui inverted right menu">
+      <div class="ui stackable inverted right menu">
         <a class="ui item" href="toc.html">Table of Contents</a>
         <a class="ui item" href="../about.html">About</a>
         <a class="ui item" href="https://github.com/jjuliano/markdown-ui">Github</a>
@@ -42,7 +42,7 @@
     <p>Standard Button</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Standard Button</div>
     </div>
@@ -60,7 +60,7 @@
     </div>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Standard Button with Custom Class And ID</div>
     </div>
@@ -78,7 +78,7 @@
     </div>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Focusable Button</div>
     </div>
@@ -101,7 +101,7 @@
     <p>A button can be formatted to show different levels of emphasis</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Emphasis</div>
     </div>
@@ -130,7 +130,7 @@
     <p>A button can animate to show hidden content</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Animated</div>
     </div>
@@ -153,7 +153,7 @@
     </div>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Vertical Animated</div>
     </div>
@@ -176,7 +176,7 @@
     </div>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Fade Animated</div>
     </div>
@@ -202,7 +202,7 @@
     <p>A button can have only an icon</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Icon Button</div>
     </div>
@@ -227,7 +227,7 @@
     <p>A button can have an icon and a label</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Labeled Icon</div>
     </div>
@@ -250,7 +250,7 @@
     <p>A basic button is less pronounced</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Basic Button</div>
     </div>
@@ -268,7 +268,7 @@
     </div>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Basic Button</div>
     </div>
@@ -318,7 +318,7 @@
     <p>A button can be formatted to appear on dark backgrounds</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Inverted</div>
     </div>
@@ -376,7 +376,7 @@
     <p>Buttons can exist together as a group</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Buttons</div>
     </div>
@@ -409,7 +409,7 @@
     <p>Buttons can exist together as a group</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Buttons</div>
     </div>
@@ -481,7 +481,7 @@
     <p>Button groups can contain conditionals</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Conditionals</div>
     </div>
@@ -540,7 +540,7 @@
     <p>A button can show it is currently the active user selection</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Active State</div>
     </div>
@@ -563,7 +563,7 @@
     <p>A button can show it is currently unable to be interacted with</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Disabled State</div>
     </div>
@@ -586,7 +586,7 @@
     <p>A button can show a loading indicator</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Loading State</div>
     </div>
@@ -622,7 +622,7 @@
     <p>A button can be formatted to link to a social website</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Social</div>
     </div>
@@ -664,7 +664,7 @@
     <p>A button can have different sizes</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Size</div>
     </div>
@@ -708,7 +708,7 @@
     <p>A button can have different colors</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Colored</div>
     </div>
@@ -767,7 +767,7 @@
     <p>A button can reduce its padding to fit into tighter spaces</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Compact</div>
     </div>
@@ -798,7 +798,7 @@
     <p>A button can hint towards a positive consequence</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Positive</div>
     </div>
@@ -825,7 +825,7 @@
     <p>A button can hint towards a negative consequence</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Negative</div>
     </div>
@@ -849,7 +849,7 @@
     <p>A button can take the width of its container</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Fluid</div>
     </div>
@@ -873,7 +873,7 @@
     <p>A button can be circular</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Circular</div>
     </div>
@@ -899,7 +899,7 @@
     <p>A button can be attached to the top or bottom of other content</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Vertically Attached</div>
     </div>
@@ -988,7 +988,7 @@
     <p>A button can be attached to the left or right of other content</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Horizontally Attached</div>
     </div>
@@ -1018,7 +1018,7 @@
     <p>Groups can be formatted to appear vertically</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Vertical Buttons</div>
     </div>
@@ -1054,7 +1054,7 @@
     <p>Groups can be formatted as icons</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Icon Buttons</div>
     </div>
@@ -1093,7 +1093,7 @@
     <p>Groups can be formatted as labeled icons</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Labeled Icon Buttons</div>
     </div>
@@ -1126,7 +1126,7 @@
     <p>Groups can be formatted to use multiple button types together</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Mixed Group</div>
     </div>
@@ -1159,7 +1159,7 @@
     <p>Groups can have their widths divided evenly</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Equal Width</div>
     </div>
@@ -1218,7 +1218,7 @@
     <p>Groups can have a shared color</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Colored Buttons</div>
     </div>
@@ -1251,7 +1251,7 @@
     <p>A button group can be less pronounced</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Basic Buttons</div>
     </div>
@@ -1326,7 +1326,7 @@
     <p>Groups can have a shared size</p>
   </div>
 <!-- -->
-  <div class="ui divided segment grid">
+  <div class="ui stackable divided segment grid">
     <div class="ui attached segment">
       <div class="ui top attached label">Group Sizes</div>
     </div>
@@ -1409,6 +1409,15 @@
       </div>
     </div>
   </div>
+<!-- -->
+  <div class="ui inverted center aligned footer segment container grid">
+    <div class="ui ten wide column"><h5 class="ui inverted header">Help Preserve This Project</h5>
+Please help Markdown-UI by means of voluntary donations, money donated to the project will benefit the project by ensuring that Markdown-UI itself will remain well supported for the foreseeable future.
+<p></p>
+
+<a class="ui item" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=RVL2DAA4Y6NXL"><button class="ui primary button">Donate Today</button></a>
+<div class="ui divider"></div><a class="ui item" href="http://markdown-ui.mit-license.org">Free and Open Source (MIT)</a></div>
+  </div>
 </div>
 
 </body>