uniform-ui 0.6 → 1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 76cef56f683b4d387665fe0594057866d2c8ea4c
-  data.tar.gz: 5da06246b7d45a8f3d288081831ebc94d762b8a8
+  metadata.gz: 78d7885a26d44334dccad5dcdee337d2c17c28dc
+  data.tar.gz: 2be1c8cca98e9cd70a222ccf9e9d892b3607c8c7
 SHA512:
-  metadata.gz: 76f2f59566d24b9d53805dc5c81437526f1c23a4db1f410229f14e432f3b73f1a73245fe5bbf1de43c2de800eef52e4cc4368af5fc71f5656c1e043523d18684
-  data.tar.gz: 0451af2f789d52fcee972be2690c895c989ab431b4b56626a013b3b503c0a160e2b76db29294838120d25349bcdccc7e21ee56a17a48c98502dc42d07991e115
+  metadata.gz: 1bcea05b4291727254ac7104e88fc48d6b111fe2c14b85b81b0aef93368eecbd21bd88cfc1f9235305355cb9fe85b06ec3040094b4b2f321251e3eef92e47e58
+  data.tar.gz: 8d0834ad0c8679c74dbcbf9dec284e455185d33fe050132e2cfff14cf301ec675f5b6642639e94cb82cb23961802a3c407dd71657ced01601cc77bee40f0d431

data/CHANGELOG.md

@@ -0,0 +1,27 @@
+# Change Log
+
+## 1.0
+This is the first really stable and usable release of Uniform. Many of the components were rewritten, removed, and added. In general, this release brings a shift in methodology. Building with Uniform now supplies and relies on more helpers to build things out.
+
+*This will break everything in previous versions.* Many component names went from `title-case` to `camelCase`, and many modifier classes inside of components were removed in favor of using helper classes in html.
+
+### Added
+- `uniformAlert`
+- `uniformDropdown`
+- `uniformSelect`
+- `uniformFloatingLabel`
+- `uniformModal`
+- `uniformTable`
+- `uniformTooltip`
+- tons of helper classes like `margin`, `pad`, `border-top`...
+
+### Removed
+- `bourbon` and `neat` dependencies
+- custom sass functions
+- `uniform-list`, `uniform-checks`, `uniform-step`, `uniform-icons`
+
+### Changed
+- `title-case` to `camelCase` for all compontents
+- `inline-input` to `uniformInputGroup`
+- `.container` to `.grid` was completely overhauld to use flexbox
+- `table-container` to `table`

data/CNAME

@@ -0,0 +1 @@
+uniform-ui.com

data/Gemfile

@@ -1,12 +1,8 @@
-source "http://rubygems.org"
-
 # Specify your gem's dependencies in uniform.gemspec
 source 'https://rubygems.org'
 
 # Stylesheets
 gem 'sass'
 gem 'sprockets-sass'
-gem 'bourbon'
-gem 'neat'
 gem 'rake'
 gem 'activesupport'

data/Gemfile.lock

@@ -1,5 +1,4 @@
 GEM
-  remote: http://rubygems.org/
   remote: https://rubygems.org/
   specs:
     activesupport (5.0.0.1)
@@ -7,17 +6,11 @@ GEM
       i18n (~> 0.7)
       minitest (~> 5.1)
       tzinfo (~> 1.1)
-    bourbon (4.2.7)
-      sass (~> 3.4)
-      thor (~> 0.19)
     concurrent-ruby (1.0.2)
     hike (1.2.3)
     i18n (0.7.0)
     minitest (5.9.0)
     multi_json (1.12.1)
-    neat (1.8.0)
-      sass (>= 3.3)
-      thor (~> 0.19)
     rack (1.6.4)
     rake (11.3.0)
     sass (3.4.22)
@@ -29,7 +22,6 @@ GEM
     sprockets-sass (1.3.1)
       sprockets (~> 2.0)
       tilt (~> 1.1)
-    thor (0.19.1)
     thread_safe (0.3.5)
     tilt (1.4.1)
     tzinfo (1.2.2)
@@ -40,11 +32,9 @@ PLATFORMS
 
 DEPENDENCIES
   activesupport
-  bourbon
-  neat
   rake
   sass
   sprockets-sass
 
 BUNDLED WITH
-   1.12.5
+   1.15.4

data/README.md

@@ -1,9 +1,8 @@
-Uniform
-=======
+![alt text](https://raw.githubusercontent.com/bemky/uniform/master/site/logo.png)
 
 A rails gem of sass compenents and defaults for building a UI that's on fleak.
 
-Demo and Documentation: http://bemky.github.io/uniform/
+Demo and Documentation: http://uniform-ui.com
 
 ## Installation
 

data/Rakefile

@@ -12,14 +12,6 @@ environment.append_path 'vendor/assets/stylesheets'
 environment.append_path 'preview'
 environment.css_compressor = :scss
 
-module Sass::Script::Functions
-  def global_variable(name)
-    assert_type name, :String, :name
-    environment.global_env.var(name.value)
-  end
-  declare :global_variable, [:string]
-end
-
 desc "Compile page"
 task :compile do
   
@@ -33,27 +25,45 @@ task :compile do
   
   # Render the test html file
   File.open('./index.html', 'w') do |file|
-    file.write(ERB.new(File.read('preview/index.html.erb')).result(binding))
+    file.write(
+      render_with_layout("preview/index.html.erb")
+    )
   end
-  
-end
 
-desc "Compile preview"
-task :preview do
-  
-  File.open('./site/site/uniform.css', "w") do |file|
-    file << environment['uniform.scss']
-  end
-  
-  File.open('./site/site/preview.css', "w") do |file|
-    file << environment['preview.scss']
+  Dir.foreach(File.join('preview')).select{|file| file =~ /\.erb$/}.each do |file_name|
+    File.open("./site/#{file_name.gsub('.erb', '')}", 'w') do |file|
+      file.write(
+        render_with_layout("preview/#{file_name}")
+      )
+    end
   end
   
-  # Render the test html file
-  File.open('./site/index.html', 'w') do |file|
-    file.write(ERB.new(File.read('preview/index.html.erb')).result(binding))
+end
+
+def capture
+  old_output = @output
+  @output = ""
+  yield
+ensure
+  @output = old_output
+end
+
+def html_block(**options, &block)
+  @output << "<pre class='#{options[:class]}'>"
+  @output << CGI::escapeHTML(capture(&block).strip)
+  @output << "</pre>"
+end
+
+def render_with_layout(template_path, context = self)
+  template = File.read(template_path)
+  layout = File.read('preview/layout.html.erb')
+  [template, layout].inject(nil) do |prev, temp|
+    render(temp){prev}
   end
-  
+end
+
+def render(template)
+  ERB.new(template, nil, nil, "@output").result( binding )
 end
 
 class UrlGenerator < Sprockets::DirectiveProcessor

data/index.html

@@ -3,1169 +3,249 @@
     <meta http-equiv="Content-type" content="text/html; charset=utf-8">
     <title>Uniform</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css" type="text/css" media="screen">
-    <link rel="stylesheet" href="site/preview.css" type="text/css" media="screen" charset="utf-8">
-    <link rel="stylesheet" href="site/uniform.css" type="text/css" media="screen" title="no title" charset="utf-8">
+    <link rel="stylesheet" href="/site/uniform.css" type="text/css" media="screen" title="no title" charset="utf-8">
+    <link rel="stylesheet" href="/site/preview.css" type="text/css" media="screen" charset="utf-8">
 </head>
 <body>
-
 <div class="side-nav">
-    <div style="padding: 20px; padding-right: 30px">
-        <img src="site/logo.png" style="width: 100%; height: auto;">
-    </div>
-    <div class="uniform-nav vertical">
-        <ul>
-        
-            <li><a href="#uniform">Uniform</a></li>
-        
-            <li><a href="#installation">Installation</a></li>
-        
-            <li><a href="#philosophy">Philosophy</a></li>
-        
-            <li><a href="#colors">Colors</a></li>
-        
-            <li><a href="#buttons">Buttons</a></li>
-        
-            <li><a href="#grid">Grid</a></li>
-        
-            <li><a href="#inputs">Inputs</a></li>
-        
-            <li><a href="#forms">Forms</a></li>
-        
-            <li><a href="#loaders">Loaders</a></li>
-        
-            <li><a href="#cards">Cards</a></li>
-        
-            <li><a href="#tiles">Tiles</a></li>
-        
-            <li><a href="#rows">Rows</a></li>
-        
-            <li><a href="#lists">Lists</a></li>
-        
-            <li><a href="#tables">Tables</a></li>
-        
-            <li><a href="#nav">Nav</a></li>
-        
-            <li><a href="#tabs">Tabs</a></li>
-        
-            <li><a href="#helpers">Helpers</a></li>
-        
-        </ul>
-    </div>
-</div>
-<div class="main-content">
-    
-        <a name="uniform"></a>
-        <div class="section">
-            
-            <div class="center">
+    <div class="pad">
+        <a href="/">
+        <img src="/site/logo.png" class="block">
+        </a>
+    </div>
+    <div class="uniformNav vertical">
+        <div class="nav">
+            
+            
+                
+                <a href="/site/helpers.html">
+                    Helpers
+                    
+                </a>
+            
+                
+                <a href="/site/colors.html">
+                    Colors
+                    
+                </a>
+            
+                
+                <a href="/site/grid.html">
+                    Grid
+                    
+                </a>
+            
+                
+                <a href="/site/buttons.html">
+                    Buttons
+                    
+                </a>
+            
+                
+                <a href="/site/tables.html">
+                    Tables
+                    
+                        <span class="uniformLabel yellow">todo</span>
+                    
+                </a>
+            
+                
+                <a href="/site/cards.html">
+                    Cards
+                    
+                </a>
+            
+                
+                <a href="/site/rows.html">
+                    Rows
+                    
+                </a>
+            
+                
+                <a href="/site/form.html">
+                    Form
+                    
+                </a>
+            
+                
+                <a href="/site/loaders.html">
+                    Loaders
+                    
+                </a>
+            
+                
+                <a href="/site/nav.html">
+                    Nav
+                    
+                </a>
+            
+                
+                <a href="/site/tabs.html">
+                    Tabs
+                    
+                </a>
+            
+                
+                <a href="/site/tiles.html">
+                    Tiles
+                    
+                        <span class="uniformLabel yellow">todo</span>
+                    
+                </a>
+            
+                
+                <a href="/site/labels.html">
+                    Labels
+                    
+                        <span class="uniformLabel yellow">todo</span>
+                    
+                </a>
+            
+                
+                <a href="/site/alerts.html">
+                    Alerts
+                    
+                        <span class="uniformLabel yellow">todo</span>
+                    
+                </a>
+            
+                
+                <a href="/site/dropdown.html">
+                    Dropdown
+                    
+                        <span class="uniformLabel yellow">todo</span>
+                    
+                </a>
+            
+                
+                <a href="/site/modal.html">
+                    Modal
+                    
+                        <span class="uniformLabel yellow">todo</span>
+                    
+                </a>
+            
+                
+                <a href="/site/select.html">
+                    Select
+                    
+                        <span class="uniformLabel yellow">todo</span>
+                    
+                </a>
+            
+                
+                <a href="/site/tooltip.html">
+                    Tooltip
+                    
+                        <span class="uniformLabel yellow">todo</span>
+                    
+                </a>
+            
+        </div>
+    </div>
+</div>
+<div class="main-content overflow-hidden">
+    <div class="text-center margin-top-more">
     <img src="site/logo.png" width="451" height="101">
-    <p class="large">Sass components and defaults for building a UI that's on fleak.</p>
-</div>
-        </div>
-    
-        <a name="installation"></a>
-        <div class="section">
-            
-            <h1>Installation</h1>
-            
-            <p>Add to your gem file<br/><code>gem 'uniform-ui'</code></p>
-<p>Execute:<br/><code>$ bundle</code></p>
-<p>Or install it yourself:<br/><code>$ gem install uniform-ui</code></p>
-<p>Include the css library in your asset pipeline.<br/><code>@import 'uniform';</code></p>
-        </div>
-    
-        <a name="philosophy"></a>
-        <div class="section">
-            
-            <h1>Philosophy</h1>
-            
-            <h3>Don't use ID's</h3>
-<p>Unless you have to, and even then, think twice. HTML Id's make things not reusable. There should only be one instance of an id in a document</p>
-
-<h3>Use Semanitc Classes Presentationaly :)</h3>
-<p>Here's a decent post on OOCSS (Object Oriented CSS) as it relates to semantic vs presentational classes: <a href="http://blackfalcon.roughdraft.io/5255648-oocss-v-ooscss-sasscast-show-notes">OOCSS v OOSCSS</a>
-<p><strong>TL;DR:</strong> Semantic classes explain what that element is. Presentational classes explain what the shoud look like.</p>
-<p><code>class="property-list"</code> vs <code>class="ul-list col-sm-4"</code>
-<p>Some of us don't want to touch css files (preference: presentational), and some of us live there (preference: semantic). Honestly, the art of good ui development is balancing semantic and presentational classes. Each taken to their extreme is bad.</p>
-<p>Structure html so that the semantic class is first and presentational classes follow.</p>
-<p><code>class="property-list ul-list col-sm-4"</code></p>
-
-<h3>Save the Namespace, save the world</h3>
-<p>Don't make presentational classes that will clash with elements that could mean something else. I'm looking at you Bootsrap!</p>
-<p><code>class="label"</code> should be <code>class="text-label"</code></p>
-
-<h3>Train-case</h3>
-<p>Use train-case for class names, not camelCase or snake_case. It's quicker to type and honestly just conventional.</p>
-
-<div class="row">
-    <div class="col-sm-6">
-        <h3>Wrappers and Containers</h3>
-        <p>The order of nesting should go Wrapper > Element > Container. Sometimes you have to have an inside layer to do advanced css things, and the container should be that layer. This is not a suggestion for every object; use wrapper and/or container as needed.</p>
-    </div>
-    <div class="col-sm-6">
-        <h3>&nbsp;</h3>
-<pre><xmp><div class="property-wrapper">
-<div class="property">
-    <div class="property-container">
-    </div>
-</div>
-</div></xmp></pre>
-    </div>
-</div>
-        </div>
-    
-        <a name="colors"></a>
-        <div class="section">
-            
-            <h1>Colors</h1>
-            
-            <table>
-
-    
-        <tr>
-            <td><span class='swatch green-light-bg'></span></td>
-            <td><code>sass// $green-light</code></td>
-            <td><code>class// .green-light</code></td>
-        </tr>
-    
-        <tr>
-            <td><span class='swatch green-bg'></span></td>
-            <td><code>sass// $green</code></td>
-            <td><code>class// .green</code></td>
-        </tr>
-    
-        <tr>
-            <td><span class='swatch green-dark-bg'></span></td>
-            <td><code>sass// $green-dark</code></td>
-            <td><code>class// .green-dark</code></td>
-        </tr>
-    
-    <tr><td colspan='3'>&nbsp;</td></tr>
-
-    
-        <tr>
-            <td><span class='swatch blue-light-bg'></span></td>
-            <td><code>sass// $blue-light</code></td>
-            <td><code>class// .blue-light</code></td>
-        </tr>
-    
-        <tr>
-            <td><span class='swatch blue-bg'></span></td>
-            <td><code>sass// $blue</code></td>
-            <td><code>class// .blue</code></td>
-        </tr>
-    
-        <tr>
-            <td><span class='swatch blue-dark-bg'></span></td>
-            <td><code>sass// $blue-dark</code></td>
-            <td><code>class// .blue-dark</code></td>
-        </tr>
-    
-    <tr><td colspan='3'>&nbsp;</td></tr>
-
-    
-        <tr>
-            <td><span class='swatch red-light-bg'></span></td>
-            <td><code>sass// $red-light</code></td>
-            <td><code>class// .red-light</code></td>
-        </tr>
-    
-        <tr>
-            <td><span class='swatch red-bg'></span></td>
-            <td><code>sass// $red</code></td>
-            <td><code>class// .red</code></td>
-        </tr>
-    
-        <tr>
-            <td><span class='swatch red-dark-bg'></span></td>
-            <td><code>sass// $red-dark</code></td>
-            <td><code>class// .red-dark</code></td>
-        </tr>
-    
-    <tr><td colspan='3'>&nbsp;</td></tr>
-
-    
-        <tr>
-            <td><span class='swatch gray-light-bg'></span></td>
-            <td><code>sass// $gray-light</code></td>
-            <td><code>class// .gray-light</code></td>
-        </tr>
-    
-        <tr>
-            <td><span class='swatch gray-bg'></span></td>
-            <td><code>sass// $gray</code></td>
-            <td><code>class// .gray</code></td>
-        </tr>
-    
-        <tr>
-            <td><span class='swatch gray-dark-bg'></span></td>
-            <td><code>sass// $gray-dark</code></td>
-            <td><code>class// .gray-dark</code></td>
-        </tr>
-    
-    <tr><td colspan='3'>&nbsp;</td></tr>
-
-    
-        <tr>
-            <td><span class='swatch yellow-light-bg'></span></td>
-            <td><code>sass// $yellow-light</code></td>
-            <td><code>class// .yellow-light</code></td>
-        </tr>
-    
-        <tr>
-            <td><span class='swatch yellow-bg'></span></td>
-            <td><code>sass// $yellow</code></td>
-            <td><code>class// .yellow</code></td>
-        </tr>
-    
-        <tr>
-            <td><span class='swatch yellow-dark-bg'></span></td>
-            <td><code>sass// $yellow-dark</code></td>
-            <td><code>class// .yellow-dark</code></td>
-        </tr>
-    
-    <tr><td colspan='3'>&nbsp;</td></tr>
-
-</table>
-        </div>
-    
-        <a name="buttons"></a>
-        <div class="section">
-            
-            <h1>Buttons</h1>
-            
-            <p>Mix and match styles to make the right button, all colors are available as well.</p>
-<p><code>&lt;a href=&#39;#&#39; class=&#39;uniform-btn&#39;&gt;&lt;/a&gt;</code></p>
-<table class="table" cellspacing="0" cellpadding="0">
-    <tr>
-        <th></th>
-        <th>Normal</th>
-        <th><code>.green</code></th>
-    </tr>
-    <tr>
-        <th></th>
-        <td><a class="uniform-btn">Button</a></td>
-        <td><a class="uniform-btn green">Button</a></td>
-    </tr>
-    <tr>
-        <th><code>:hover</code> or <code>.hover</code></th>
-        <td><a class="uniform-btn hover">Button</a></td>
-        <td><a class="uniform-btn green hover">Button</a></td>
-    </tr>
-    <tr>
-        <th><code>:active</code> or <code>.active</code></th>
-        <td><a class="uniform-btn active">Button</a></td>
-        <td><a class="uniform-btn green active">Button</a></td>
-    </tr>
-    <tr>
-        <th><code>:disabled</code> or <code>.disabled</code></th>
-        <td><a class="uniform-btn disabled">Button</a></td>
-        <td><a class="uniform-btn green disabled">Button</a></td>
-    </tr>
-    <tr>
-        <th><code>.subtle</code></th>
-        <td><a class="uniform-btn subtle">Button</a></td>
-        <td><a class="uniform-btn green subtle">Button</a></td>
-    </tr>
-    <tr>
-        <th><code>.small</code></th>
-        <td><a class="uniform-btn small">Button</a></td>
-        <td><a class="uniform-btn green small">Button</a></td>
-    </tr>
-    <tr>
-        <th><code>.large</code></th>
-        <td><a class="uniform-btn large">Button</a></td>
-        <td><a class="uniform-btn green large">Button</a></td>
-    </tr>
-    <tr>
-        <th><code>.outline</code></th>
-        <td><a class="uniform-btn outline">Button</a></td>
-        <td><a class="uniform-btn green outline">Button</a></td>
-    </tr>
-    <tr>
-        <th><code>.circle</code></th>
-        <td><a class="uniform-btn circle">Button</a></td>
-        <td><a class="uniform-btn green circle">Button</a></td>
-    </tr>
-    <tr>
-        <th><code>.block</code></th>
-        <td><a class="uniform-btn block">Button</a></td>
-        <td><a class="uniform-btn green block">Button</a></td>
-    </tr>
-</table>
-        </div>
-    
-        <a name="grid"></a>
-        <div class="section">
-            
-            <h1>Grid</h1>
-            
-            <p>Uses Bootstrap3 grid notation</p>
-<div class="row">
-    <div class="col-sm-4">
-        <div class="green-light-bg">col-sm-4</div>
-    </div>
-    <div class="col-sm-4">
-        <div class="green-light-bg">col-sm-4</div>
-    </div>
-    <div class="col-sm-4">
-        <div class="green-light-bg">col-sm-4</div>
-    </div>
-</div>
-<br>
-<div class="row">
-    <div class="col-sm-2">
-        <div class="green-light-bg">col-sm-2</div>
-    </div>
-    <div class="col-sm-6">
-        <div class="green-light-bg">col-sm-6</div>
-    </div>
-    <div class="col-sm-4">
-        <div class="green-light-bg">col-sm-4</div>
-    </div>
-</div>
-<br>
-<pre><xmp><div class="row">
-    <div class="col-sm-4">
-        <div class="green-light-bg">col-sm-4</div>
-    </div>
-    <div class="col-sm-4">
-        <div class="green-light-bg">col-sm-4</div>
-    </div>
-    <div class="col-sm-4">
-        <div class="green-light-bg">col-sm-4</div>
-    </div>
-</div></xmp></pre>
-<br>
-<div class="row">
-    <div class="col-sm-3 col-sm-push-2">
-        <div class="green-light-bg">.col-sm-3 .col-sm-push-2</div>
-    </div>
-</div>
-<br>
-
-<h3>Breakpoints</h3>
-<p><code>xs</code> = 480px</p>
-<p><code>sm</code> = 768px</p>
-<p><code>md</code> = 992px</p>
-<p><code>lg</code> = 1200px</p>
-        </div>
-    
-        <a name="inputs"></a>
-        <div class="section">
-            
-            <h1>Inputs</h1>
-            
-            <h3>Uniform Input</h3>
-<div class="row">
-    <div class="col-sm-6">
-        <p><input type="text" class="uniform-input" /></p>
-        <p><input type="text" class="uniform-input large" /></p>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp><input type="text" class="uniform-input" /></xmp></pre>
-<pre><xmp><input type="text" class="uniform-input large" /></xmp></pre>
-    </div>
-</div>
-
-<h3>Custom Inputs</h3>
-<div class="row">
-    <div class="col-sm-6">
-        <p>Styled Select Box</p>
-        <p><span class="uniform-select"><select><option>An Option</option></select></span></p>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp><span class='uniform-select'>
-<select>
-    <option>An Option</option>
-</select>
-</span></xmp></pre>
-    </div>
-</div>
-
-<h3>Inline Inputs</h3>
-<p>Ever want to put in an input and it's label in line, and have it be 100% width responsive? Well, you can't, unless you use something like inline-input.</p>
-<div class="row">
-    <div class="col-sm-6">
-        <div class="inline-input">
-            <span class="label">
-                <label for="rate">$</label>
-            </span>
-            <span>
-                <input id="rate">
-            </span>
-            <span class="units">
-                <label for="rate">/hour</label>
-            </span>
-        </div>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp><div class="inline-input">
-<span class="label">$</span>
-<span>
-    <input id="name" placeholder="Jonathan Doe">
-</span>
-<span class="units">/hour</span>
-</div></xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <div class="inline-input">
-            <span class="label"><label for="car">Car Preference</label></span>
-            <span class="select"><select id="car"><option>Tesla</option></select></span>
-        </div>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp><div class="inline-input">
-<span class="label">
-    <label for="car">Car Preference</label>
-</span>
-<span>
-    <select id="car"><option>Tesla</option></select>
-</span>
-</div></xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <div class="inline-input block">
-            <span class="label">
-                <label for="car">Car Preference</label>
-            </span>
-            <span>
-                <input id="name" value="Jonathan Doe" disabled>
-            </span>
-        </div>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp><div class="inline-input block">
-<span class="label">
-    <label for="car">Car Preference</label>
-</span>
-<span>
-    <input id="name" value="Jonathan Doe" disabled>
-</span>
-</div></xmp></pre>
-    </div>
-</div>
-        </div>
-    
-        <a name="forms"></a>
-        <div class="section">
-            
-            <h1>Forms</h1>
-            
-            <div class="row">
-    <div class="col-sm-6">
-        <form class="uniform-form">
-            <div class="row">
-                <div class="uniform-form-group col-sm-4">
-                    <label>Name</label>
-                    <input type="text">
-                </div>
-                <div class="uniform-form-group col-sm-4">
-                    <label>Email</label>
-                    <input type="text">
-                </div>
-                <div class="uniform-form-group col-sm-4">
-                    <label>Phone</label>
-                    <input type="text">
-                </div>
-            </div>
-            <div class="row">
-                <div class="uniform-form-group col-sm-4">
-                    <label>Twitter</label>
-                    <input type="text">
-                    <label>Facebook</label>
-                    <input type="text">
-                    <label>Instagram</label>
-                    <input type="text">
-                </div>
-                <div class="uniform-form-group col-sm-8">
-                    <label>Details</label>
-                    <textarea rows="9"></textarea>
-                </div>
-            </div>
-        </form>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp><form class="uniform-form">
-            <div class="row">
-                <div class="uniform-form-group col-sm-4">
-                    <label>Name</label>
-                    <input type="text">
-                </div>
-                <div class="uniform-form-group col-sm-4">
-                    <label>Email</label>
-                    <input type="text">
-                </div>
-                <div class="uniform-form-group col-sm-4">
-                    <label>Phone</label>
-                    <input type="text">
-                </div>
-            </div>
-            <div class="row">
-                <div class="uniform-form-group col-sm-4">
-                    <label>Twitter</label>
-                    <input type="text">
-                    <label>Facebook</label>
-                    <input type="text">
-                    <label>Instagram</label>
-                    <input type="text">
-                </div>
-                <div class="uniform-form-group col-sm-8">
-                    <label>Details</label>
-                    <textarea rows="9"></textarea>
-                </div>
-            </div>
-        </form></xmp></pre>
-    </div>
-</div>
-
-<h3>Has Error</h3>
-<div class="row">
-    <div class="col-sm-6">
-        <form class="uniform-form">
-            <div class="row">
-                <div class="uniform-form-group col-sm-12">
-                    <div class="has-error">
-                        <label>Name</label>
-                        <input type="text">
-                    </div>
-                </div>
-            </div>
-        </form>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp><form class="uniform-form">
-    <div class="row">
-        <div class="uniform-form-group col-sm-4">
-            <div class="has-error">
-                <label>Name</label>
-                <input type="text">
-            </div>
-        </div>
-    </div>
-</form></xmp></pre>
-    </div>
-</div>
-
-<div class="row">
-    <div class="col-sm-6">
-        <form class="uniform-form uniform-form-table">
-            <div class="row">
-                <div class="uniform-form-group col-sm-4">
-                    <label>Name</label>
-                    <input type="text">
-                </div>
-                <div class="uniform-form-group col-sm-4">
-                    <label>Email</label>
-                    <input type="text">
-                </div>
-                <div class="uniform-form-group col-sm-4">
-                    <label>Phone</label>
-                    <input type="text">
-                </div>
-            </div>
-            <div class="row">
-                <div class="uniform-form-group col-sm-4">
-                    <label>Twitter</label>
-                    <input type="text">
-                    <label>Facebook</label>
-                    <input type="text">
-                    <label>Instagram</label>
-                    <input type="text">
-                </div>
-                <div class="uniform-form-group col-sm-8 col-span-2">
-                    <label>Details</label>
-                    <textarea rows="6"></textarea>
-                </div>
-            </div>
-        </form>
-        <br>
-        <form class="uniform-form uniform-form-table">
-            <div class="row">
-                <div class="uniform-form-group col-sm-4">
-                    <label>Name</label>
-                    <input type="text">
-                </div>
-                <div class="uniform-form-group col-sm-4">
-                    <div class="has-error">
-                        <label>Email</label>
-                        <input type="text">
-                    </div>
-                </div>
-                <div class="uniform-form-group col-sm-4">
-                    <label>Phone</label>
-                    <input type="text">
-                </div>
-            </div>
-            <div class="row">
-                <div class="uniform-form-group col-sm-4">
-                    <label>Twitter</label>
-                    <input type="text">
-                    <label>Facebook</label>
-                    <input type="text">
-                    <div class="has-error">
-                        <label>Instagram</label>
-                        <input type="text">
-                    </div>
-                </div>
-                <div class="uniform-form-group col-sm-8 col-span-2">
-                    <label>Details</label>
-                    <textarea rows="6"></textarea>
-                </div>
-            </div>
-        </form>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp><form class="uniform-form uniform-form-table">
-    <div class="row">
-        <div class="uniform-form-group col-sm-4">
-            <label>Name</label>
-            <input type="text">
-        </div>
-        <div class="uniform-form-group col-sm-4">
-            <label>Email</label>
-            <input type="text">
-        </div>
-        <div class="uniform-form-group col-sm-4">
-            <label>Phone</label>
-            <input type="text">
-        </div>
-    </div>
-    <div class="row">
-        <div class="uniform-form-group col-sm-4">
-            <label>Twitter</label>
-            <input type="text">
-            <label>Facebook</label>
-            <input type="text">
-            <label>Instagram</label>
-            <input type="text">
-        </div>
-        <div class="uniform-form-group col-sm-8 col-span-2">
-            <label>Details</label>
-            <textarea rows="6"></textarea>
-        </div>
-    </div>
-</form></xmp></pre>
-    </div>
-</div>
-        </div>
-    
-        <a name="loaders"></a>
-        <div class="section">
-            
-            <h1>Loaders</h1>
-            
-            <div class="row">
-    <div class="col-sm-6">
-        <div class="uniform-loader">
-            <div class="uniform-loader-container">
-                <span>&bull;</span>
-                <span>&bull;</span>
-                <span>&bull;</span>
-            </div>
-        </div>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp><div class="uniform-loader">
-    <div class="uniform-loader-container">
-        <span>&bull;</span>
-        <span>&bull;</span>
-        <span>&bull;</span>
-    </div>
-</div></xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <span style="position:relative; display:inline-block">
-            <img src="https://unsplash.it/150/100/?random" style="display:block;" width="150" height="100">
-            <div class="uniform-loader cover">
-                <div class="uniform-loader-container">
-                    <span>&bull;</span>
-                    <span>&bull;</span>
-                    <span>&bull;</span>
-                </div>
-            </div>
-        </span>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp><span style="position:relative; display:inline-block">
-    <img src="https://unsplash.it/150/100/?random" style="display:block;">
-    <div class="uniform-loader cover">
-        <div class="uniform-loader-container">
-            <span>&bull;</span>
-            <span>&bull;</span>
-            <span>&bull;</span>
-        </div>
-    </div>
-</span></xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <span style="position:relative; display:inline-block">
-            <img src="https://unsplash.it/150/100/?random" style="display:block;" width="150" height="100">
-            <div class="uniform-loader cover light">
-                <div class="uniform-loader-container">
-                    <span>&bull;</span>
-                    <span>&bull;</span>
-                    <span>&bull;</span>
-                </div>
-            </div>
-        </span>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp><span style="position:relative; display:inline-block">
-    <img src="https://unsplash.it/150/100/?random" style="display:block;">
-    <div class="uniform-loader cover light">
-        <div class="uniform-loader-container">
-            <span>&bull;</span>
-            <span>&bull;</span>
-            <span>&bull;</span>
-        </div>
-    </div>
-</span></xmp></pre>
-    </div>
-</div>
-        </div>
-    
-        <a name="cards"></a>
-        <div class="section">
-            
-            <h1>Cards</h1>
-            
-            <div class="row">
-    <div class="col-sm-6">
-        <div class="uniform-card">
-            <div class="uniform-card-title">
-                <span class="type">Sample Card</span>
-            </div>
-            <div class="uniform-card-body">Put Content In Here</div>
-        </div>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp><div class="uniform-card">
-    <div class="uniform-card-title">
-        <span class="type">Sample Card</span>
-    </div>
-    <div class="uniform-card-body">Put Content In Here</div>
-</div></xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <div class="uniform-card">
-            <div class="uniform-card-avatar">
-                <img src="https://unsplash.it/166/166/?random" style="display:block;" height="166" width="166">
-            </div>
-            <div class="uniform-card-container">
-                <div class="uniform-card-title">
-                    <span class="type">John Dozer</span>
-                    <div class="actions">
-                        <a class="uniform-btn">Edit</a>
-                    </div>
-                </div>
-                <div class="uniform-card-body">
-                    <div class="uniform-card-attributes">
-                        <div>
-                            <div>Company</div>
-                            <div>Friendly Associates</div>
-                        </div>
-                        <div>
-                            <div>Title</div>
-                            <div>Head Dude</div>
-                        </div>
-                        <div>
-                            <div>Skills</div>
-                            <div>Stapling, Jogging</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp><div class="uniform-card">
-    <div class="uniform-card-avatar">
-        <img src="https://unsplash.it/166/166/?random" style="display:block;" height="166" width="166">
-    </div>
-    <div class="uniform-card-container">
-        <div class="uniform-card-title">
-            <span class="type">John Dozer</span>
-            <div class="actions">
-                <a class="uniform-btn">Edit</a>
-            </div>
-        </div>
-        <div class="uniform-card-body">
-            <div class="uniform-card-attributes">
-                <div>
-                    <div>Company</div>
-                    <div>Friendly Associates</div>
-                </div>
-                <div>
-                    <div>Title</div>
-                    <div>Head Dude</div>
-                </div>
-                <div>
-                    <div>Skills</div>
-                    <div>Stapling, Jogging</div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div></xmp></pre>
-    </div>
-</div>
-        </div>
-    
-        <a name="tiles"></a>
-        <div class="section">
-            
-            <h1>Tiles</h1>
-            
-            TODO
-        </div>
-    
-        <a name="rows"></a>
-        <div class="section">
-            
-            <h1>Rows</h1>
-            
-            <a class="uniform-row" href="#rows">
-    <span class="uniform-row-avatar">
-        <img src="https://unsplash.it/63/47/?random" width="63" height="47">
-    </span>
-    <span class="uniform-row-container">
-        <span class="col-sm-6">
-            John Doe
-            <span class="uniform-row-secondary">ABC Designs</span>
-        </span>
-        <span class="col-sm-3">
-            Garland, TX
-        </span>
-        <span class="col-sm-3">
-            Texas Ranger Fan
-        </span>
-    </span>
-</a>
-<br><br>
-<pre><xmp><a class="uniform-row" href="#rows">
-    <span class="uniform-row-avatar">
-        <img src="https://unsplash.it/63/47/?random" width="63" height="47">
-    </span>
-    <span class="uniform-row-container">
-        <span class="col-sm-6">
-            John Doe
-            <span class="uniform-row-secondary">ABC Designs</span>
-        </span>
-        <span class="col-sm-3">
-            Garland, TX
-        </span>
-        <span class="col-sm-3">
-            Texas Ranger Fan
-        </span>
-    </span>
-</a></xmp></pre>
-        </div>
-    
-        <a name="lists"></a>
-        <div class="section">
-            
-            <h1>Lists</h1>
-            
-            <div class="row">
-    <div class="col-sm-6">
-        <ol class="uniform-step">
-            <li>Fill out the form</li>
-            <li>Join the club</li>
-            <li>Chill</li>
-        </ol>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp>
-<ol class="uniform-step">
-    <li>Fill out the form</li>
-    <li>Join the club</li>
-    <li>Chill</li>
-</ol></xmp></pre>
-    </div>
-</div>
-
-<div class="row">
-    <div class="col-sm-6">
-        <ul class="uniform-checks">
-            <li>Fill out the form</li>
-            <li>Join the club</li>
-            <li>Chill</li>
-        </ul>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp>
-<ul class="uniform-checks">
-    <li>Fill out the form</li>
-    <li>Join the club</li>
-    <li>Chill</li>
-</ul></xmp></pre>
-    </div>
-</div>
-
-<div class="row">
-    <div class="col-sm-6">
-        <ul class="uniform-icons">
-            <li data-icon="&#xf18b">Fill out the form</li>
-            <li data-icon="&#xf113">Join the club</li>
-            <li data-icon="&#xf121">Chill</li>
-        </ul>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp>
-<ul class="uniform-icons">
-    <li data-icon="&#xf18b">Fill out the form</li>
-    <li data-icon="&#xf113">Join the club</li>
-    <li data-icon="&#xf121">Chill</li>
-</ul></xmp></pre>
-    </div>
-</div>
-        </div>
-    
-        <a name="tables"></a>
-        <div class="section">
-            
-            <h1>Tables</h1>
-            
-            TODO
-        </div>
-    
-        <a name="nav"></a>
-        <div class="section">
-            
-            <h1>Nav</h1>
-            
-            <div class="uniform-nav">
-    <div class="brand">
-        <img src="site/logo.png" height="31" width="137">
-    </div>
-    <ul>
-        <li><a href="#">Home</a></li>
-        <li><a href="#">About</a></li>
-        <li><a href="#">Contact</a></li>
-    </ul>
-    <ul class="uniform-nav-right">
-        <li><a href="#">Login</a></li>
-    </ul>
-</div>
-<div class="uniform-nav uniform-nav-subnav">
-    <ul>
-        <li><a href="#">Home</a></li>
-        <li><span style="font-family: 'fortycons'">&#xf113;</span></li>
-        <li><a href="#">Nav</a></li>
-        <li><span style="font-family: 'fortycons'">&#xf113;</span></li>
-        <li><a href="#">Preview</a></li>
-    </ul>
-</div>
-
-<br><br>
-<pre><xmp><div class="uniform-nav">
-    <div class="brand">
-        <img src="site/logo.png" height="31" width="137">
-    </div>
-    <ul>
-        <li><a href="#">Home</a></li>
-        <li><a href="#">About</a></li>
-        <li><a href="#">Contact</a></li>
-    </ul>
-    <ul class="uniform-nav-right">
-        <li><a href="#">Login</a></li>
-    </ul>
-</div>
-<div class="uniform-nav uniform-nav-subnav">
-    <ul>
-        <li><a href="#">Home</a></li>
-        <li><span style="font-family: 'fortycons'">&#xf113;</span></li>
-        <li><a href="#">Nav</a></li>
-        <li><span style="font-family: 'fortycons'">&#xf113;</span></li>
-        <li><a href="#">Preview</a></li>
-    </ul>
-</div></xmp></pre>
-        </div>
-    
-        <a name="tabs"></a>
-        <div class="section">
-            
-            <h1>Tabs</h1>
-            
-            TODO
-        </div>
-    
-        <a name="helpers"></a>
-        <div class="section">
-            
-            <h1>Helpers</h1>
-            
-            <div class="row">
-    <div class="col-sm-6">
-        <vr>
-    </div>
-    <div class="col-sm-6">
-        <pre><xmp><vr></xmp></pre>
-    </div>
-</div>
-<br>
-<br>
-<div class="row">
-    <div class="col-sm-6">
-        <code>.rounded</code>, <code>.round</code>
-    </div>
-    <div class="col-sm-6">
-        <pre><xmp>border-radius: 50%</xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <code>.handle</code>
-    </div>
-    <div class="col-sm-6">
-        <pre><xmp>cursor: hand;</xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <code>.pointer</code>
-    </div>
-    <div class="col-sm-6">
-        <pre><xmp>cursor: pointer;</xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <code>.honeypot</code>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp>position:absolute !important;
-left:-999999px !important;
-width:1px !important;
-display:block !important;
-</xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <code>.hidden, .hide</code>
-    </div>
-    <div class="col-sm-6">
-        <pre><xmp>display:none;</xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <code>.right</code>
-    </div>
-    <div class="col-sm-6">
-        <pre><xmp>float:right;</xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <code>.text-right</code>
-    </div>
-    <div class="col-sm-6">
-        <pre><xmp>text-align: right;</xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <code>.text-center</code>
-    </div>
-    <div class="col-sm-6">
-        <pre><xmp>text-align: center;</xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <code>.clear</code>
-    </div>
-    <div class="col-sm-6">
-        <pre><xmp>clear:both;</xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <code>.pad</code>
-    </div>
-    <div class="col-sm-6">
-        <pre><xmp>padding:10px;</xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <code>.text-overflow</code>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp>text-overflow: inherit;
-white-space: inherit;
-overflow: inherit;</xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <code>.strong, .bold</code>
-    </div>
-    <div class="col-sm-6">
-        <pre><xmp>font-weight: 700;</xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <code>.light, .text-light</code>
-    </div>
-    <div class="col-sm-6">
-        <pre><xmp>font-weight: 300;</xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <code>.text-normal</code>
-    </div>
-    <div class="col-sm-6">
-        <pre><xmp>font-weight: normal;</xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <code>.warn</code>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp>color:lighten($gray, 20);
-&:hover{
-    color:$red;
-}</xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <code>p.large</code>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp>font-size:1.5em;
-font-weight:300;
-margin-bottom:20px;</xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <code>.nowrap</code>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp>white-space: nowrap;
-overflow:hidden;</xmp></pre>
-    </div>
-</div>
-        </div>
-    
-</div>
+    <p class="large">Sass components and helpers for building a UI.</p>
+</div>
+<div class="section">
+    <h1>Installation</h1>
+    <p>Add to your gem file<br/><code>gem 'uniform-ui'</code></p>
+    <p>Execute:<br/><code>$ bundle</code></p>
+    <p>Or install it yourself:<br/><code>$ gem install uniform-ui</code></p>
+    <p>Include the css library in your asset pipeline.<br/><code>@import 'uniform';</code></p>
+    <p>Include the javascript library in your asset pipeline.<br/><code>//= require uniform</code></p>
+    <h3>Scope Components</h3>
+    <p>Optionally, you can scope the components you want included in your assets.</p>
+    <pre class=''>// css
+@import &#39;uniform&#39;;
+// - OR -
+@import &#39;uniform/base&#39;;
+@import &#39;uniform/helpers&#39;;
+@import &#39;uniform/defaults&#39;;
+@import &#39;uniform/helpers/text&#39;;
+@import &#39;uniform/helpers/colors&#39;;
+@import &#39;uniform/helpers/sizes&#39;;
+@import &#39;uniform/helpers/margin&#39;;
+@import &#39;uniform/helpers/padding&#39;;
+@import &#39;uniform/components/tile&#39;;
+@import &#39;uniform/components/label&#39;;
+@import &#39;uniform/components/form&#39;;
+@import &#39;uniform/components/buttons&#39;;
+@import &#39;uniform/components/select&#39;;
+@import &#39;uniform/components/card&#39;;
+@import &#39;uniform/components/grid&#39;;
+@import &#39;uniform/components/table&#39;;
+@import &#39;uniform/components/row&#39;;
+@import &#39;uniform/components/tabs&#39;;
+@import &#39;uniform/components/tooltip&#39;;
+@import &#39;uniform/components/dropdown&#39;;
+@import &#39;uniform/components/alert&#39;;
+@import &#39;uniform/components/loaders&#39;;
+@import &#39;uniform/components/nav&#39;;
+@import &#39;uniform/components/modal&#39;;
+
+// javascript
+//= require uniform
+// - OR -
+//= require uniform/base
+//= require uniform/select</pre>
+    
+</div>
+<div class="section">
+    <h1>Philosophy</h1>
+    <h3>Don't use ID's</h3>
+    <p>Unless you have to, and even then, think twice. HTML Id's make things not
+        reusable. There should only be one instance of an id in a document</p>
+
+    <h3>Use Semanitc Classes Presentationaly :)</h3>
+    <p>
+        Here's a decent post on OOCSS (Object Oriented CSS) as it relates to
+        semantic vs presentational classes:
+        <a href="http://blackfalcon.roughdraft.io/5255648-oocss-v-ooscss-sasscast-show-notes">OOCSS v OOSCSS</a>
+    <p>
+        <strong>TL;DR:</strong> Semantic classes explain what that element is.
+        Presentational classes explain what the shoud look like.
+    </p>
+    <p>
+        <code>class="property-list"</code> vs <code>class="ul-list col-sm-4"</code>
+    </p>
+    <p>
+        Some of us don't want to touch css files (preference: presentational),
+        and some of us live there (preference: semantic). Honestly, the art of
+        good ui development is balancing semantic and presentational classes.
+        Each taken to their extreme is bad.
+    </p>
+    <p>
+        Structure html so that the semantic class is first and presentational
+        classes follow.
+    </p>
+    <p><code>class="property-list ul-list col-sm-4"</code></p>
+
+    <h3>Save the Namespace, save the world</h3>
+    <p>Don't make presentational classes that will clash with elements that could mean something else. I'm looking at you Bootsrap!</p>
+    <p><code>class="label"</code> should be <code>class="text-label"</code></p>
+
+    <h3>camelCase vs train-case</h3>
+    <p>Use camelCase for class names for components, not train-case or snake_case.</p>
+    <p>Use tran-case for class names for helpers or modifiers.</p>
+
+    <h3>Wrappers and Containers</h3>
+    <p>
+        Both <code>wrapper</code> and <code>container</code> can be used as class names
+        for an element that goes around a component. The difference is nuanced.
+        <code>wrapper</code> should be used to wrap a <strong>single</strong> element for a formatting purpose.
+        A <code>container</code> should be used to wrap <strong>multiple</strong> elements.
+    </p>
+    
+</div>
+</div>  
 <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
+<script
+  src="https://code.jquery.com/jquery-1.11.3.min.js"
+  integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g="
+  crossorigin="anonymous"></script>
+<script src="/site/preview.js"></script>
 </body>