uniform-ui 0.6 → 1.0

data/preview/buttons.html.erb

@@ -0,0 +1,62 @@
+<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><%= CGI::escapeHTML "<a href='#' class='uniformButton'></a>" %></code></p>
+    <table class="uniformTable" cellspacing="0" cellpadding="0">
+        <tr>
+            <th></th>
+            <th>Normal</th>
+            <th><code>.green</code></th>
+            <th><code>.blue</code></th>
+            <th><code>.red</code></th>
+            <th><code>.white</code></th>
+            <th><code>.gray</code></th>
+        </tr>
+        <tr>
+            <th></th>
+            <td><a class="uniformButton">Button</a></td>
+            <td><a class="uniformButton green">Button</a></td>
+            <td><a class="uniformButton blue">Button</a></td>
+            <td><a class="uniformButton red">Button</a></td>
+            <td><a class="uniformButton white">Button</a></td>
+            <td><a class="uniformButton gray">Button</a></td>
+        </tr>
+        <% [
+            ['hover, :hover', 'hover'],
+            ['active, :active', 'active'],
+            ['disabled, :disabled', 'disabled'],
+            'small',
+            'large',
+            'warn',
+            'block',
+            'outline',
+        ].each do |klass| %>
+            <% klass = [klass, klass] if !klass.is_a?(Array) %>
+            <tr>
+                <th><code>.<%= klass[0] %></code></th>
+                <td><a class="uniformButton <%= klass[1] %>">Button</a></td>
+                <td><a class="uniformButton green <%= klass[1] %>">Button</a></td>
+                <td><a class="uniformButton blue <%= klass[1] %>">Button</a></td>
+                <td><a class="uniformButton red <%= klass[1] %>">Button</a></td>
+                <td><a class="uniformButton white <%= klass[1] %>">Button</a></td>
+                <td><a class="uniformButton gray <%= klass[1] %>">Button</a></td>
+            </tr>
+        <% end %>
+        <tr>
+            <th><code>.outline</code></th>
+            <td class="bg-gray"><a class="uniformButton outline">Button</a></td>
+            <td class="bg-gray"><a class="uniformButton green outline">Button</a></td>
+            <td class="bg-gray"><a class="uniformButton blue outline">Button</a></td>
+            <td class="bg-gray"><a class="uniformButton red outline">Button</a></td>
+            <td class="bg-gray"><a class="uniformButton white outline">Button</a></td>
+            <td class="bg-gray"><a class="uniformButton gray outline">Button</a></td>
+        </tr>
+    </table>
+    
+    <h3 class="margin-top-more">uniformButtonGroup</h3>
+    <div class="uniformButtonGroup">
+        <a href="#">Link 1</a>
+        <a href="#">Link 2</a>
+        <a href="#">Link 3</a>
+    </div>
+</div>

data/preview/cards.html.erb

@@ -0,0 +1,23 @@
+<div class="section">
+    <h1>Cards</h1>
+    <div class="grid">
+        <div class="col-6">
+            <div class="uniformCard">
+                <div class="uniformCard-header">
+                    <span class="title">Sample Card</span>
+                </div>
+                <div class="uniformCard-body">Put Content In Here</div>
+            </div>
+        </div>
+        <div class="col-6">
+            <% html_block do %>
+<div class="uniformCard">
+    <div class="uniformCard-header">
+        <span class="title">Sample Card</span>
+    </div>
+    <div class="uniformCard-body">Put Content In Here</div>
+</div>
+            <% end %>
+        </div>
+    </div>
+</div>

data/preview/colors.html.erb

@@ -0,0 +1,22 @@
+<div class="section">
+    <h1>Colors</h1>
+    <table class="uniformTable">
+        <thead class="dark">
+            <tr>
+                <th></th>
+                <th>sass</th>
+                <th>class</th>
+            </tr>
+        </thead>
+    <% %w(green blue red gray yellow).each do |color| %>
+        <% ["-light", "", "-dark"].each do |style| %>
+            <tr>
+                <td><span class='swatch bg-<%= color %><%= style %>'></span></td>
+                <td><code>$<%= color %><%= style %></code></td>
+                <td><code>.<%= color %><%= style %></code></td>
+            </tr>
+        <% end %>
+        <tr><td colspan='3'>&nbsp;</td></tr>
+    <% end %>
+    </table>
+</div>

data/preview/form.html.erb

@@ -0,0 +1,233 @@
+<div class="section">
+    <h1>Forms</h1>
+    <h3>UniformForm</h3>
+    <div class="grid">
+        <div class="col-6">
+            <form class="uniformForm">
+                <div class="form-group">
+                    <label>Name</label>
+                    <input type="text">
+                </div>
+                <div class="form-group" data-error-message="example error message">
+                    <label>Phone</label>
+                    <input type="text">
+                </div>
+                <div class="form-group">
+                    <label>Email</label>
+                    <input type="text">
+                </div>
+            </form>
+        </div>
+        <div class="col-6">
+            <% html_block do %>
+<form class="uniformForm">
+    <div class="form-group">
+        <label>Name</label>
+        <input type="text">
+    </div>
+    <div class="form-group" data-error-message="example error message">
+        <label>Phone</label>
+        <input type="text">
+    </div>
+    <div class="form-group">
+        <label>Email</label>
+        <input type="text">
+    </div>
+</form>
+            <% end %>
+        </div>
+    </div>
+    
+    <div class="grid">
+        <div class="col-6">
+            <form class="uniformForm uniformForm-table">
+                <div class="form-group">
+                    <label>Name</label>
+                    <div>
+                        <input type="text">
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label>Phone</label>
+                    <div>
+                        <div data-error-message="example error message">
+                            <input type="text">
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label>Email</label>
+                    <div>
+                        <input type="text">
+                    </div>
+                </div>
+            </form>
+        </div>
+        <div class="col-6">
+            <% html_block do %>
+<form class="uniformForm uniformForm-table">
+    <div class="form-group">
+        <label>Name</label>
+        <input type="text">
+    </div>
+    <div class="form-group" data-error-message="example error message">
+        <label>Phone</label>
+        <input type="text">
+    </div>
+    <div class="form-group">
+        <label>Email</label>
+        <input type="text">
+    </div>
+</form>
+            <% end %>
+        </div>
+    </div>
+    
+    
+    <h3>UniformInput</h3>
+    <div class="grid">
+        <div class="col-6">
+            <p><input type="text" class="uniformInput" /></p>
+            <p><input type="text" class="uniformInput large" /></p>
+        </div>
+        <div class="col-6">
+            <% html_block do %>
+                <input type="text" class="uniformInput" />
+            <% end %>
+            <% html_block do %>
+                <input type="text" class="uniformInput large" />
+            <% end %>
+        </div>
+    </div>
+
+    <h3>Custom Inputs</h3>
+    <div class="grid nest">
+        <div class="col-6">
+            <p>Styled Select Box</p>
+            <p><span class="uniformSelect"><select><option>An Option</option></select></span></p>
+        </div>
+        <div class="col-6">
+            <% html_block do %>
+<span class='uniformSelect'>
+    <select>
+        <option>An Option</option>
+    </select>
+</span>
+            <% end %>
+        </div>
+        
+        <div class="col-6">
+            <p>uniformCheckboxCollection</p>
+            <div class="uniformCheckboxCollection">
+                <label><input type="checkbox"> Option 1</label>
+                <label><input type="checkbox"> Option 2</label>
+                <label><input type="checkbox"> Option 3</label>
+            </div>
+        </div>
+        <div class="col-6">
+            <% html_block do %>
+<div class="uniformCheckboxCollection">
+    <label><input type="checkbox"> Option 1</label>
+    <label><input type="checkbox"> Option 2</label>
+    <label><input type="checkbox"> Option 3</label>
+</div>
+            <% end %>
+        </div>
+        
+        <div class="col-6">
+            <p>uniformCheckboxCollection.inline</p>
+            <div class="uniformCheckboxCollection inline">
+                <label><input type="radio"> Option 1</label>
+                <label><input type="radio"> Option 2</label>
+                <label><input type="radio"> Option 3</label>
+            </div>
+        </div>
+        <div class="col-6">
+            <% html_block do %>
+<div class="uniformCheckboxCollection inline"> 
+    <label><input type="radio"> Option 1</label>
+    <label><input type="radio"> Option 2</label>
+    <label><input type="radio"> Option 3</label>
+</div>
+            <% end %>
+        </div>
+        
+        
+    </div>
+    
+    <h3>Floating Label</h3>
+    <p>Requires Javascript to fully work, but fails gracefully when not applied.</p>
+    <div class="grid">
+        <div class="col-6">
+            <div class="uniformFloatingLabel">
+                <label for="example-1">Name</label>
+                <input type="text" class="pad-more" id="example-1">
+            </div>
+        </div>
+        <div class="col-6">
+            <% html_block do %>
+<div class="uniformFloatingLabel">
+    <label for="example-1">Name</label>
+    <input type="text" class="pad-more" id="example-1">
+</div>
+            <% end %>
+        </div>
+    </div>
+
+    <h3>Input Group</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 uniformInputGroup.</p>
+    <div class="grid">
+        <div class="col-6">
+            <div class="uniformInputGroup">
+                <span class="label">
+                    <label for="rate">$</label>
+                </span>
+                <span class="input">
+                    <input id="rate">
+                </span>
+                <span class="units">
+                    <label for="rate">/hour</label>
+                </span>
+            </div>
+        </div>
+        <div class="col-6">
+            <% html_block do %>
+        <div class="uniformInputGroup">
+            <span class="label">
+                <label for="rate">$</label>
+            </span>
+            <span class="input">
+                <input id="rate">
+            </span>
+            <span class="units">
+                <label for="rate">/hour</label>
+            </span>
+        </div>
+            <% end %>
+        </div>
+    </div>
+    <div class="grid">
+        <div class="col-6">
+            <div class="uniformInputGroup">
+                <span class="label">
+                    <label for="car">Car Preference</label>
+                </span>
+                <span>
+                    <input id="name" value="Jonathan Doe" disabled>
+                </span>
+            </div>
+        </div>
+        <div class="col-6">
+            <% html_block do %>
+<div class="uniformInputGroup">
+    <span class="label">
+        <label for="car">Car Preference</label>
+    </span>
+    <span class="input">
+        <input id="name" value="Jonathan Doe" disabled>
+    </span>
+</div>
+            <% end %>
+        </div>
+    </div>
+</div>

data/preview/grid.html.erb

@@ -0,0 +1,304 @@
+<div class="section">
+    <h1>Grid</h1>
+    <p>Similar to Bootstrap 4 with some modifications. Uses flexbox with a host of helper options.</p>
+    <h3>Breakpoints</h3>
+    <p>
+        Any helper can have <code>-sm</code>, <code>-md</code>, <code>-lg</code>,
+        or <code>-xl</code> added to cause helper to only go into effect for that
+        breakpoint.
+    </p>
+    <p><code>xs</code> = 480px</p>
+    <p><code>sm</code> = 768px</p>
+    <p><code>md</code> = 992px</p>
+    <p><code>lg</code> = 1200px</p>
+    <% html_block do %>
+<div class="grid">
+    <div class="col">content</div>
+    <div class="col">content</div>
+    <div class="col">content</div>
+</div>
+    <% end %>
+    <h3>Grid Options</h3>
+    <% [
+        'grid-center',
+        'grid-top',
+        'grid-bottom',
+        'grid-stretch',
+        'grid-h-left',
+        'grid-h-center',
+        'grid-h-right',
+        'grid-h-around',
+        'grid-h-between'
+    ].each do |klass| %>
+        <div class="margin-bottom bg-gray-light pad-bottom">
+        .grid .<%= klass %>
+        <div class="grid <%= klass %>">
+            <div class="col bg-green-light">
+                <div class="bg-red-light">col</div>
+            </div>
+            <div class="col bg-green-light">
+                <div class="bg-red-light height-100-px">col height-100-px</div>
+            </div>
+            <div class="col bg-green-light">
+                <div class="bg-red-light">col</div>
+            </div>
+        </div>
+        </div>
+    <% end %>
+
+    <% [
+        'grid-v-top',
+        'grid-v-center',
+        'grid-v-bottom',
+        'grid-v-around',
+        'grid-v-between',
+        'grid-v-stretch'
+    ].each do |klass| %>
+        <div class="margin-bottom bg-gray-light pad-bottom">
+        .grid .<%= klass %> .height-300-px
+        <div class="grid <%= klass %> height-300-px">
+            <div class="col-4 bg-green-light border">
+                <div class="bg-red-light">col-4</div>
+            </div>
+            <div class="col-4 bg-green-light border">
+                <div class="bg-red-light height-100-px">col-4 height-100-px</div>
+            </div>
+            <div class="col-4 bg-green-light border">
+                <div class="bg-red-light">col-4</div>
+            </div>
+
+            <div class="col-4 bg-green-light border">
+                <div class="bg-red-light">col-4</div>
+            </div>
+
+            <div class="col-4 bg-green-light border">
+                <div class="bg-red-light">col-4</div>
+            </div>
+
+            <div class="col-4 bg-green-light border">
+                <div class="bg-red-light">col-4</div>
+            </div>
+
+            <div class="col-4 bg-green-light border">
+                <div class="bg-red-light">col-4</div>
+            </div>
+        </div>
+        </div>
+    <% end %>
+    
+    
+    <div class="margin-bottom bg-gray-light pad-bottom">
+    .grid .no-wrap .height-300-px
+    <div class="grid no-wrap height-300-px">
+        <div class="col-4 bg-green-light border">
+            <div class="bg-red-light">col-4</div>
+        </div>
+        <div class="col-4 bg-green-light border">
+            <div class="bg-red-light height-100-px">col-4 height-100-px</div>
+        </div>
+        <div class="col-4 bg-green-light border">
+            <div class="bg-red-light">col-4</div>
+        </div>
+
+        <div class="col-4 bg-green-light border">
+            <div class="bg-red-light">col-4</div>
+        </div>
+
+        <div class="col-4 bg-green-light border">
+            <div class="bg-red-light">col-4</div>
+        </div>
+
+        <div class="col-4 bg-green-light border">
+            <div class="bg-red-light">col-4</div>
+        </div>
+
+        <div class="col-4 bg-green-light border">
+            <div class="bg-red-light">col-4</div>
+        </div>
+    </div>
+    </div>
+    
+    <div class="margin-bottom bg-gray-light pad-bottom">
+    .grid .grid-vertical
+    <div class="grid grid-vertical">
+        <div class="col bg-green-light">
+            <div class="bg-red-light">col</div>
+        </div>
+        <div class="col bg-green-light">
+            <div class="bg-red-light height-100-px">col height-100-px</div>
+        </div>
+        <div class="col bg-green-light">
+            <div class="bg-red-light">col</div>
+        </div>
+    </div>
+    </div>
+    
+    <div class="margin-bottom bg-gray-light pad-bottom">
+    .grid .no-gutter
+    <div class="grid no-gutter">
+        <div class="col bg-green-light">
+            <div class="bg-red-light">col</div>
+        </div>
+        <div class="col bg-green-light">
+            <div class="bg-red-light height-100-px">col height-100-px</div>
+        </div>
+        <div class="col bg-green-light">
+            <div class="bg-red-light">col</div>
+        </div>
+    </div>
+    </div>
+    <div class="margin-bottom bg-gray-light pad-bottom">
+    .grid .nest
+    <div class="grid nest">
+        <div class="col bg-green-light">
+            <div class="bg-red-light">col</div>
+        </div>
+        <div class="col bg-green-light">
+            <div class="bg-red-light height-100-px">col height-100-px</div>
+        </div>
+        <div class="col bg-green-light">
+            <div class="bg-red-light">col</div>
+        </div>
+    </div>
+    </div>
+    
+
+    
+    
+    
+    <h3>Col Options</h3>
+    <div class="margin-bottom bg-gray-light pad-bottom">
+    .grid
+    <div class="grid">
+        <div class="col">
+            <div class="bg-green-light">col</div>
+        </div>
+        <div class="col">
+            <div class="bg-green-light  pad-v">
+                <div class="width-200-px bg-red-light">
+                    col > width-200-px
+                </div>
+            </div>
+        </div>
+        <div class="col">
+            <div class="bg-green-light">col</div>
+        </div>
+    </div>
+    </div>
+    
+    <div class="margin-bottom bg-gray-light pad-bottom">
+    .grid
+    <div class="grid">
+        <div class="col">
+            <div class="bg-green-light">col</div>
+        </div>
+        <div class="col">
+            <div class="bg-green-light  pad-v">
+                <div class="width-200-px bg-red-light">
+                    col > width-200-px
+                </div>
+            </div>
+        </div>
+        <div class="col-fill">
+            <div class="bg-green-light">col-fill</div>
+        </div>
+    </div>
+    </div>
+    
+    <div class="margin-bottom bg-gray-light pad-bottom">
+    .grid
+    <div class="grid">
+        <div class="col-4">
+            <div class="bg-green-light">col-4</div>
+        </div>
+        <div class="col-4">
+            <div class="bg-green-light">col-4</div>
+        </div>
+        <div class="col-4">
+            <div class="bg-green-light">col-4</div>
+        </div>
+    </div>
+    </div>
+    
+    <div class="margin-bottom bg-gray-light pad-bottom">
+    .grid
+    <div class="grid">
+        <div class="col-2">
+            <div class="bg-green-light">col-2</div>
+        </div>
+        <div class="col-6">
+            <div class="bg-green-light">col-6</div>
+        </div>
+        <div class="col-4">
+            <div class="bg-green-light">col-4</div>
+        </div>
+    </div>
+    </div>
+    
+    <div class="margin-bottom bg-gray-light pad-bottom">
+    .grid
+    <div class="grid">
+        <div class="col-3 col-push-2">
+            <div class="bg-green-light">.col-3 .col-push-2</div>
+        </div>
+    </div>
+    </div>
+    
+    
+    <div class="margin-bottom bg-gray-light pad-bottom">
+    .grid
+    <div class="grid">
+        <div class="col-4">
+            <div class="bg-green-light">col-4</div>
+        </div>
+        <div class="col-4">
+            <div class="bg-green-light">col-4</div>
+        </div>
+        <div class="col-4">
+            <div class="bg-green-light">col-4</div>
+        </div>
+    </div>
+    </div>
+    
+    
+    <div class="margin-bottom bg-gray-light pad-bottom">
+    .grid
+    <div class="grid">
+        <div class="col col-center">
+            <div class="bg-green-light">col col-center</div>
+        </div>
+        <div class="col">
+            <div class="bg-green-light pad-v">
+                <div class="width-200-px bg-red-light">
+                    col > width-200-px
+                </div>
+            </div>
+        </div>
+        <div class="col col-bottom">
+            <div class="bg-green-light">col col-bottom</div>
+        </div>
+        <div class="col col-stretch bg-green-light">
+            <div class="">col col-stretch</div>
+        </div>
+    </div>
+    </div>
+    
+    <div class="margin-bottom bg-gray-light pad-bottom">
+    .grid
+    <div class="grid">
+        <div class="col">
+            <div class="bg-green-light">col</div>
+        </div>
+        <div class="col no-gutter bg-green-light pad-v">
+            <div class="width-200-px bg-red-light">
+                col no-gutter > width-200-px
+            </div>
+        </div>
+        <div class="col">
+            <div class="bg-green-light">col</div>
+        </div>
+    </div>
+    </div>
+    
+    
+</div>