index.html in uniform-ui-0.6 vs index.html in uniform-ui-1.0

- old
+ new

@@ -1,1171 +1,251 @@ <!DOCTYPE html> <head> <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 class="pad"> + <a href="/"> + <img src="/site/logo.png" class="block"> + </a> </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="uniformNav vertical"> + <div class="nav"> - <div class="center"> - <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> + + <a href="/site/helpers.html"> + Helpers + + </a> - <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"> + + <a href="/site/colors.html"> + Colors + + </a> - <h1>Philosophy</h1> + + <a href="/site/grid.html"> + Grid + + </a> - <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"> + + <a href="/site/buttons.html"> + Buttons + + </a> - <h1>Colors</h1> + + <a href="/site/tables.html"> + Tables + + <span class="uniformLabel yellow">todo</span> + + </a> - <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"> + + <a href="/site/cards.html"> + Cards + + </a> - <h1>Buttons</h1> + + <a href="/site/rows.html"> + Rows + + </a> - <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"> + + <a href="/site/form.html"> + Form + + </a> - <h1>Grid</h1> + + <a href="/site/loaders.html"> + Loaders + + </a> - <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"> + + <a href="/site/nav.html"> + Nav + + </a> - <h1>Inputs</h1> + + <a href="/site/tabs.html"> + Tabs + + </a> - <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"> + + <a href="/site/tiles.html"> + Tiles + + <span class="uniformLabel yellow">todo</span> + + </a> - <h1>Forms</h1> + + <a href="/site/labels.html"> + Labels + + <span class="uniformLabel yellow">todo</span> + + </a> - <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"> + + <a href="/site/alerts.html"> + Alerts + + <span class="uniformLabel yellow">todo</span> + + </a> - <h1>Loaders</h1> + + <a href="/site/dropdown.html"> + Dropdown + + <span class="uniformLabel yellow">todo</span> + + </a> - <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"> + + <a href="/site/modal.html"> + Modal + + <span class="uniformLabel yellow">todo</span> + + </a> - <h1>Cards</h1> + + <a href="/site/select.html"> + Select + + <span class="uniformLabel yellow">todo</span> + + </a> - <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"> + + <a href="/site/tooltip.html"> + Tooltip + + <span class="uniformLabel yellow">todo</span> + + </a> - <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 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 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;; -<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> +// javascript +//= require uniform +// - OR - +//= require uniform/base +//= require uniform/select</pre> - <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> +<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> -<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> + <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> - <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> +</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> \ No newline at end of file