markdown-ui 0.1.0

data/lib/markdown-ui/message/standard_message.rb

@@ -0,0 +1,17 @@
+# coding: UTF-8
+
+module MarkdownUI
+  class StandardMessage
+    def initialize(content, klass = nil)
+      @klass = klass
+      @content = content
+    end
+
+    def render
+      klass = "ui #{@klass} message"
+      content = MarkdownUI::Content::Parser.new(@content).parse
+
+      MarkdownUI::StandardTag.new(content, klass).render
+    end
+  end
+end

data/lib/markdown-ui/segment/custom_segment.rb

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

data/lib/markdown-ui/segment/horizontal_segment.rb

@@ -0,0 +1,16 @@
+module MarkdownUI
+  class HorizontalSegment
+    def initialize(element, content)
+      @element = element
+      @content = content
+    end
+
+    def render
+      element = @element.strip
+      content = @content.strip
+      klass = "ui #{element} horizontal segment"
+
+      MarkdownUI::StandardTag.new(content, klass).render
+    end
+  end
+end

data/lib/markdown-ui/segment/padded_segment.rb

@@ -0,0 +1,16 @@
+module MarkdownUI
+  class PaddedSegment
+    def initialize(element, content)
+      @element = element
+      @content = content
+    end
+
+    def render
+      element = @element.strip
+      content = @content.strip
+      klass = "ui #{element} padded segment"
+
+      MarkdownUI::StandardTag.new(content, klass).render
+    end
+  end
+end

data/lib/markdown-ui/segment/piled_segment.rb

@@ -0,0 +1,16 @@
+module MarkdownUI
+  class PiledSegment
+    def initialize(element, content)
+      @element = element
+      @content = content
+    end
+
+    def render
+      element = @element.strip
+      content = @content.strip
+      klass = "ui #{element} piled segment"
+
+      MarkdownUI::StandardTag.new(content, klass).render
+    end
+  end
+end

data/lib/markdown-ui/segment/segment.rb

@@ -0,0 +1,34 @@
+module MarkdownUI
+  class Segment
+    def initialize(element, content)
+      @mode = OpenStruct.new(
+        :horizontal?  => !(element =~ /horizontal/i).nil?,
+        :vertical?    => !(element =~ /vertical/i).nil?,
+        :stacked?     => !(element =~ /stacked/i).nil?,
+        :piled?       => !(element =~ /piled/i).nil?,
+        :padded?      => !(element =~ /padded/i).nil?
+      )
+      @element = element
+      @content = content
+    end
+
+    def render
+      if @element.length == "segment".length
+        MarkdownUI::StandardSegment.new(@element, @content).render
+      elsif @mode.horizontal?
+        MarkdownUI::HorizontalSegment.new(@element, @content).render
+      elsif @mode.vertical?
+        MarkdownUI::VerticalSegment.new(@element, @content).render
+      elsif @mode.stacked?
+        MarkdownUI::StackedSegment.new(@element, @content).render
+      elsif @mode.piled?
+        MarkdownUI::PiledSegment.new(@element, @content).render
+      elsif @mode.padded?
+        MarkdownUI::PaddedSegment.new(@element, @content).render
+      else
+        MarkdownUI::CustomSegment.new(@element, @content).render
+      end
+    end
+
+  end
+end

data/lib/markdown-ui/segment/stacked_segment.rb

@@ -0,0 +1,16 @@
+module MarkdownUI
+  class StackedSegment
+    def initialize(element, content)
+      @element = element
+      @content = content
+    end
+
+    def render
+      element = @element.strip
+      content = @content.strip
+      klass = "ui #{element} stacked segment"
+
+      MarkdownUI::StandardTag.new(content, klass).render
+    end
+  end
+end

data/lib/markdown-ui/segment/standard_segment.rb

@@ -0,0 +1,16 @@
+module MarkdownUI
+  class StandardSegment
+    def initialize(element, content)
+      @element = element
+      @content = content
+    end
+
+    def render
+      element = @element.strip
+      content = @content.strip
+      klass = "ui #{element} segment"
+
+      MarkdownUI::StandardTag.new(content, klass).render
+    end
+  end
+end

data/lib/markdown-ui/segment/vertical_segment.rb

@@ -0,0 +1,16 @@
+module MarkdownUI
+  class VerticalSegment
+    def initialize(element, content)
+      @element = element
+      @content = content
+    end
+
+    def render
+      element = @element.strip
+      content = @content.strip
+      klass = "ui #{element} vertical segment"
+
+      MarkdownUI::StandardTag.new(content, klass).render
+    end
+  end
+end

data/lib/markdown-ui/tag/custom_tag.rb

@@ -0,0 +1,25 @@
+# coding: UTF-8
+
+module MarkdownUI
+  class CustomTag
+    def initialize(tag, content, klass = nil)
+      @tag = tag
+      @klass = klass
+      @content = content
+    end
+
+    def render
+      klass = MarkdownUI::KlassUtil.new("#{@klass}").klass
+      tag = @tag.downcase.strip
+      content = MarkdownUI::Content::Parser.new(@content).parse
+
+      output = []
+      output << "<#{tag}"
+      output << "#{klass}>"
+      output << content
+      output << "</#{tag}>"
+
+      output.join(" ")
+    end
+  end
+end

data/lib/markdown-ui/tag/item_tag.rb

@@ -0,0 +1,24 @@
+module MarkdownUI
+  class ItemTag
+    def initialize(content, klass = nil, link = nil)
+      @klass = klass
+      @content = content
+      @link = link
+    end
+
+    def render
+      content, @data = @content.split(";")
+      klass = MarkdownUI::KlassUtil.new(@klass).klass
+      link = " href=\"#{@link.strip}\""
+
+      data = if @data
+        _data, attribute, value = @data.split(":")
+        " data-#{attribute}=\"#{value}\""
+      else
+        nil
+      end
+
+      "<a#{klass}#{data}#{link}>#{content}</a>"
+    end
+  end
+end

data/lib/markdown-ui/tag/list_tag.rb

@@ -0,0 +1,40 @@
+module MarkdownUI
+  class ListTag
+    def initialize(content, klass = nil, type = nil, data = nil)
+      @klass = klass
+      @content = content
+      @type = type
+      @data = data
+    end
+
+    def render
+      content = @content.split(";")
+      klass = MarkdownUI::KlassUtil.new(@klass).klass
+
+      data = if @data
+        _data, attribute, value = @data.split(":")
+        " data-#{attribute}=\"#{value}\""
+      else
+        nil
+      end
+
+      list = ""
+      if !content.grep(/^\<li\>.*/).empty?
+        list = content.join
+      else
+        content.each do |c|
+          list += "<li>#{c}</li>"
+        end
+      end
+
+      @type = :unordered if @type.nil?
+
+      case @type
+      when :ordered
+        "<ol#{klass}#{data}>#{list}</ol>"
+      when :unordered
+        "<ul#{klass}#{data}>#{list}</ul>"
+      end
+    end
+  end
+end

data/lib/markdown-ui/tag/span_tag.rb

@@ -0,0 +1,14 @@
+module MarkdownUI
+  class SpanTag
+    def initialize(content, klass = nil)
+      @klass = klass
+      @content = content
+    end
+
+    def render
+      klass = "#{@klass}".downcase.split(" ").uniq
+
+      "<span class=\"#{klass.join(" ").strip}\">#{@content}</span>"
+    end
+  end
+end

data/lib/markdown-ui/tag/standard_tag.rb

@@ -0,0 +1,23 @@
+module MarkdownUI
+  class StandardTag
+    def initialize(content, klass = nil, data = nil)
+      @klass = klass
+      @content = content
+      @data = data
+    end
+
+    def render
+      content = @content.strip unless @content.nil?
+      klass = MarkdownUI::KlassUtil.new(@klass).klass
+
+      data = if @data
+        _data, attribute, value = @data.split(":")
+        " data-#{attribute}=\"#{value}\""
+      else
+        nil
+      end
+
+      "<div#{klass}#{data}>#{content}</div>"
+    end
+  end
+end

data/lib/markdown-ui/tag/tag.rb

@@ -0,0 +1,37 @@
+module MarkdownUI
+  class Tag
+    def initialize(tag, content, klass = nil, data = nil)
+      @mode = OpenStruct.new(
+        :div?      => !(tag =~ /div/i).nil?,
+        :span?     => !(tag =~ /span/i).nil?,
+        :article?  => !(tag =~ /article/i).nil?,
+        :section?  => !(tag =~ /section/i).nil?,
+        :header?   => !(tag =~ /header/i).nil?,
+        :footer?   => !(tag =~ /footer/i).nil?
+      )
+      @tag = tag
+      @content = content
+      @klass = klass
+      @data = data
+    end
+
+    def render
+      # if @mode.div?
+        MarkdownUI::StandardTag.new(@content, @klass, @data).render
+      # elsif @mode.span
+      #   MarkdownUI::SpanTag.new(@content, @klass).render
+      # elsif @mode.article
+      #   MarkdownUI::ArticleTag.new(@content, @klass).render
+      # elsif @mode.section
+      #   MarkdownUI::SectionTag.new(@content, @klass).render
+      # elsif @mode.header
+      #   MarkdownUI::HeaderTag.new(@content, @klass).render
+      # elsif @mode.footer
+      #   MarkdownUI::FooterTag.new(@content, @klass).render
+      # else
+      #   MarkdownUI::CustomTag.new(@tag, @content, @klass).render
+      # end
+    end
+
+  end
+end

data/lib/markdown-ui/utils/klass_util.rb

@@ -0,0 +1,11 @@
+module MarkdownUI
+  class KlassUtil
+    def initialize(text)
+      @text = text.downcase.split(" ").uniq
+    end
+
+    def klass
+      " class=\"#{@text.join(" ").strip}\""
+    end
+  end
+end

data/lib/markdown-ui/version.rb

@@ -0,0 +1,3 @@
+module MarkdownUI
+  VERSION = "0.1.0"
+end

data/markdown-ui.gemspec

@@ -0,0 +1,36 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'markdown-ui/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "markdown-ui"
+  spec.version       = MarkdownUI::VERSION
+  spec.authors       = ["Joel Bryan Juliano"]
+  spec.email         = ["joelbryan.juliano@gmail.com"]
+
+  spec.summary       = %q{Responsive User Interfaces in Markdown}
+  spec.description   = %q{Create responsive UI/UX for mobile and web using Markdown Syntax}
+  spec.homepage      = "https://github.com/jjuliano/markdown-ui"
+  spec.license       = "MIT"
+
+  # Prevent pushing this gem to RubyGems.org by setting 'allowed_push_host', or
+  # delete this section to allow pushing this gem to any host.
+  if spec.respond_to?(:metadata)
+    spec.metadata['allowed_push_host'] = "https://rubygems.org"
+  else
+    raise "RubyGems 2.0 or newer is required to protect against public gem pushes."
+  end
+
+  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.9"
+  spec.add_development_dependency "rake", "~> 10.0"
+  spec.add_dependency "redcarpet", "~> 3.2"
+  spec.add_dependency "nokogiri", "~> 1.6"
+  spec.add_development_dependency "test-unit", "~> 3.0"
+  spec.add_development_dependency "simplecov", "~> 0.10"
+end

data/website/index.html

@@ -0,0 +1,369 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.1/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.0.1/semantic.min.js"></script>
+
+  <!--[if lt IE 9]>
+  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+  <![endif]-->
+  <style>
+    code { white-space:pre }
+  </style>
+</head>
+
+<body>
+<div class="ui inverted blue segment">
+  <div class="ui inverted blue menu">
+    <a class="ui basic item" href="#home">Markdown UI</a>
+    <div class="ui inverted blue right menu">
+      <a class="ui item" href="#docs">Docs</a>
+      <a class="ui item" href="#about">About</a>
+      <a class="ui item" href="#github">Github</a>
+      <a class="ui item" href="#install">Install</a>
+    </div>
+  </div>
+</div>
+
+<!-- -->
+<div class="ui container">
+<!-- -->
+  <div class="ui inverted attached blue very padded segment">
+    <h1 class="ui header">Markdown UI</h1>
+    <h3 class="ui header">Responsive User Interfaces in Markdown</h3>
+  </div>
+<!-- -->
+  <div class="ui attached segment">
+<!-- -->
+    <div class="ui equal width grid">
+      <div class="ui column">
+        <p>A framework for creating responsive UI&rsquo;s for mobile and web using Markdown Syntax. It is a tool for Rapid Prototyping UI&rsquo;s for Single-page and Multiple-page apps, and allows to write UI&rsquo;s only once and then translate it to Semantic UI 2.0, BootStrap 3 (coming soon), Foundation (coming soon), etc.</p>
+        <p>It helps the developer to focus on the big picture on paper or text-editors, and with few details it lessen the cognitive load which means having meaningful productivity which equates to happiness!</p>
+      </div>
+<!-- -->
+      <div class="ui column">
+        <div class="ui inverted segment">
+          <code>&gt; Pointing Menu&#xFF1A;</code>
+          <br />
+          <code>&gt; [Home](#home "active")</code>
+          <br />
+          <code>&gt; [Messages](#messages)</code>
+          <br />
+          <code>&gt; [Friends](#friends)</code>
+          <br />
+          <code>&gt; &gt; Right Menu&#xFF1A;</code>
+          <br />
+          <code>&gt; &gt; [Logout](#logout)</code>
+          <br />
+          <br />
+          <code>__Button|Add Friend__</code>
+        </div>
+      </div>
+    </div>
+  </div>
+<!-- -->
+  <div class="ui attached segment"><h2 class="ui header">Installation</h2><code>gem install markdown-ui</code><h2 class="ui header">Usage</h2><code>markdown-ui index.md &gt; index.html</code><h2 class="ui header">Github</h2>
+github.com/jjuliano/markdown-ui</div>
+<!-- -->
+  <div class="ui segment">
+    <h1 class="ui center aligned header">Buttons</h1>
+  </div>
+<!-- -->
+  <div class="ui segment">
+    <h3 class="ui header">Button</h3>
+    <p>Standard Button</p>
+  </div>
+<!-- -->
+  <div class="ui divided segment grid">
+    <div class="ui html top attached segment">
+      <div class="ui top attached label">Standard Button</div>
+    </div>
+<!-- -->
+    <div class="ui center aligned six wide column">
+      <h5 class="ui header">Preview</h5>
+      <div class="ui button">Follow</div>
+    </div>
+<!-- -->
+    <div class="ui left aligned ten wide column">
+      <h5 class="ui header">Markdown Syntax</h5>
+      <div class="ui inverted segment">
+        <code>
+__Button|Follow__
+</code>
+      </div>
+    </div>
+<!-- -->
+  </div>
+<!-- -->
+  <div class="ui divided segment grid">
+    <div class="ui html top attached segment">
+      <div class="ui top attached label">Standard Button with Custom Class</div>
+    </div>
+<!-- -->
+    <div class="ui center aligned six wide column">
+      <h5 class="ui header">Preview</h5>
+      <div class="ui follow-button button">Follow</div>
+    </div>
+<!-- -->
+    <div class="ui left aligned ten wide column">
+      <h5 class="ui header">Markdown Syntax</h5>
+      <div class="ui inverted segment"><code>__Follow-Button Button|Follow__</code><br />or<br /><code>__Button|Follow|Follow-Button__</code></div>
+    </div>
+<!-- -->
+  </div>
+<!-- -->
+  <div class="ui divided segment grid">
+    <div class="ui html top attached segment">
+      <div class="ui top attached label">Focusable Button</div>
+    </div>
+<!-- -->
+    <div class="ui center aligned six wide column">
+      <h5 class="ui header">Preview</h5>
+      <button class="ui focusable button">Follow</button>
+    </div>
+<!-- -->
+    <div class="ui left aligned ten wide column">
+      <h5 class="ui header">Markdown Syntax</h5>
+      <div class="ui inverted segment">
+        <code>
+__Focusable Button|Follow__
+</code>
+      </div>
+    </div>
+<!-- -->
+  </div>
+<!-- -->
+  <div class="ui attached segment">
+    <h3 class="ui header">Emphasis</h3>
+    <p>A button can be formatted to show different levels of emphasis</p>
+  </div>
+<!-- -->
+  <div class="ui divided segment grid">
+    <div class="ui html top attached segment">
+      <div class="ui top attached label">Emphasis</div>
+    </div>
+<!-- -->
+    <div class="ui center aligned six wide column">
+      <h5 class="ui header">Preview</h5>
+      <div class="ui primary button">Save</div>
+      <div class="ui button">Discard</div>
+      <p></p>
+      <div class="ui secondary button">Save</div>
+      <div class="ui button">Discard</div>
+    </div>
+<!-- -->
+    <div class="ui left aligned ten wide column">
+      <h5 class="ui header">Markdown Syntax</h5>
+      <div class="ui inverted segment">
+        <code>
+__Button|Save|Primary__
+__Button|Discard__
+__Button|Save|Secondary__
+__Button|Discard__
+</code>
+      </div>
+    </div>
+<!-- -->
+  </div>
+<!-- -->
+  <div class="ui attached segment">
+    <h3 class="ui header">Animated</h3>
+    <p>A button can animate to show hidden content</p>
+  </div>
+<!-- -->
+  <div class="ui divided segment grid">
+    <div class="ui html top attached segment">
+      <div class="ui top attached label">Animated</div>
+    </div>
+<!-- -->
+    <div class="ui center aligned six wide column">
+      <h5 class="ui header">Preview</h5>
+      <div class="ui animated button">
+        <div class="visible content">Next</div>
+        <div class="hidden content">
+          <i class="right arrow icon"></i>
+        </div>
+      </div>
+    </div>
+<!-- -->
+    <div class="ui left aligned ten wide column">
+      <h5 class="ui header">Markdown Syntax</h5>
+      <div class="ui inverted segment">
+        <code>
+__Animated Button|Text&#xFF1A;Next;Icon&#xFF1A;Right Arrow__
+</code>
+      </div>
+    </div>
+<!-- -->
+  </div>
+<!-- -->
+  <div class="ui divided segment grid">
+    <div class="ui html top attached segment">
+      <div class="ui top attached label">Vertical Animated</div>
+    </div>
+<!-- -->
+    <div class="ui center aligned six wide column">
+      <h5 class="ui header">Preview</h5>
+      <div class="ui vertical animated button">
+        <div class="visible content">
+          <i class="shop icon"></i>
+        </div>
+        <div class="hidden content">Shop</div>
+      </div>
+    </div>
+<!-- -->
+    <div class="ui left aligned ten wide column">
+      <h5 class="ui header">Markdown Syntax</h5>
+      <div class="ui inverted segment">
+        <code>
+__Vertical Animated Button|Icon&#xFF1A;Shop;Text&#xFF1A;Shop__
+</code>
+      </div>
+    </div>
+<!-- -->
+  </div>
+<!-- -->
+  <div class="ui divided segment grid">
+    <div class="ui html top attached segment">
+      <div class="ui top attached label">Fade Animated</div>
+    </div>
+<!-- -->
+    <div class="ui center aligned six wide column">
+      <h5 class="ui header">Preview</h5>
+      <div class="ui fade animated button">
+        <div class="visible content">Sign-up for a Pro account</div>
+        <div class="hidden content">$12.99 a month</div>
+      </div>
+    </div>
+<!-- -->
+    <div class="ui left aligned ten wide column">
+      <h5 class="ui header">Markdown Syntax</h5>
+      <div class="ui inverted segment"><code>__Fade Animated Button|Text&#xFF1A;Sign-up for a Pro account;Text&#xFF1A;$12.99 a month__</code><br /> or <br />
+<code>__Fade Animated Button|Sign-up for a Pro account;$12.99 a month__</code></div>
+    </div>
+<!-- -->
+  </div>
+<!-- -->
+  <div class="ui attached segment">
+    <h3 class="ui header">Icon</h3>
+    <p>A button can have only an icon</p>
+  </div>
+<!-- -->
+  <div class="ui divided segment grid">
+    <div class="ui html top attached segment">
+      <div class="ui top attached label">Icon Button</div>
+    </div>
+<!-- -->
+    <div class="ui center aligned six wide column">
+      <h5 class="ui header">Preview</h5>
+      <div class="ui icon button">
+        <i class="cloud icon"></i>
+      </div>
+    </div>
+<!-- -->
+    <div class="ui left aligned ten wide column">
+      <h5 class="ui header">Markdown Syntax</h5>
+      <div class="ui inverted segment">
+        <code>
+__Icon Button|Icon&#xFF1A;Cloud__
+</code>
+      </div>
+    </div>
+<!-- -->
+  </div>
+<!-- -->
+  <div class="ui attached segment">
+    <h3 class="ui header">Labeled Icon</h3>
+    <p>A button can have an icon and a label</p>
+  </div>
+<!-- -->
+  <div class="ui divided segment grid">
+    <div class="ui html top attached segment">
+      <div class="ui top attached label">Labeled Icon</div>
+    </div>
+<!-- -->
+    <div class="ui center aligned six wide column">
+      <h5 class="ui header">Preview</h5>
+      <div class="ui labeled icon button"><i class="pause icon"></i>Pause</div>
+    </div>
+<!-- -->
+    <div class="ui left aligned ten wide column">
+      <h5 class="ui header">Markdown Syntax</h5>
+      <div class="ui inverted segment">
+        <code>
+__Labeled Icon Button|Icon&#xFF1A;Pause,Text&#xFF1A;Pause__
+</code>
+      </div>
+    </div>
+<!-- -->
+  </div>
+<!-- -->
+  <div class="ui attached segment">
+    <h3 class="ui header">Basic Button</h3>
+    <p>A basic button is less pronounced</p>
+  </div>
+<!-- -->
+  <div class="ui divided segment grid">
+    <div class="ui html top attached segment">
+      <div class="ui top attached label">Basic Button</div>
+    </div>
+<!-- -->
+    <div class="ui center aligned six wide column">
+      <h5 class="ui header">Preview</h5>
+      <div class="ui basic button"><i class="user icon"></i>Add Friend</div>
+    </div>
+<!-- -->
+    <div class="ui left aligned ten wide column">
+      <h5 class="ui header">Markdown Syntax</h5>
+      <div class="ui inverted segment">
+        <code>
+__Basic Button|Icon&#xFF1A;User,Text&#xFF1A;Add Friend__
+</code>
+      </div>
+    </div>
+<!-- -->
+  </div>
+<!-- -->
+  <div class="ui divided segment grid">
+    <div class="ui html top attached segment">
+      <div class="ui top attached label">Basic Button</div>
+    </div>
+<!-- -->
+    <div class="ui center aligned six wide column">
+      <h5 class="ui header">Preview</h5>
+      <div class="ui basic black button">Black</div>
+      <div class="ui basic yellow button">Yellow</div>
+      <div class="ui basic green button">Green</div>
+      <div class="ui basic blue button">Blue</div>
+      <div class="ui basic orange button">Orange</div>
+      <div class="ui basic purple button">Purple</div>
+      <div class="ui basic pink button">Pink</div>
+      <div class="ui basic red button">Red</div>
+      <div class="ui basic teal button">Teal</div>
+    </div>
+<!-- -->
+    <div class="ui left aligned ten wide column">
+      <h5 class="ui header">Markdown Syntax</h5>
+      <div class="ui inverted segment">
+        <code>
+__Button|Text&#xFF1A;Black|Basic Black__
+__Button|Text&#xFF1A;Yellow|Basic Yellow__
+__Button|Text&#xFF1A;Green|Basic Green__
+__Button|Text&#xFF1A;Blue|Basic Blue__
+__Button|Text&#xFF1A;Orange|Basic Orange__
+__Button|Text&#xFF1A;Purple|Basic Purple__
+__Button|Text&#xFF1A;Pink|Basic Pink__
+__Button|Text&#xFF1A;Red|Basic Red__
+__Button|Text&#xFF1A;Teal|Basic Teal__
+</code>
+      </div>
+    </div>
+<!-- -->
+  </div>
+</div>
+</body>
+</html>