uniform-ui 0.5 → 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +2 -1
  3. data/Gemfile +2 -1
  4. data/Gemfile.lock +12 -0
  5. data/Rakefile +34 -8
  6. data/index.html +587 -406
  7. data/preview/index.html.erb +423 -433
  8. data/preview/preview.scss +42 -0
  9. data/site/index.html +660 -0
  10. data/site/logo.png +0 -0
  11. data/site/preview.css +1 -0
  12. data/site/site/logo.png +0 -0
  13. data/site/site/preview.css +1 -0
  14. data/site/site/uniform.css +1 -0
  15. data/site/uniform.css +1 -0
  16. data/uniform.gemspec +3 -2
  17. data/vendor/assets/stylesheets/uniform/components/{buttons.css.scss → buttons.scss} +66 -33
  18. data/vendor/assets/stylesheets/uniform/components/card.scss +83 -0
  19. data/vendor/assets/stylesheets/uniform/components/form.scss +221 -0
  20. data/vendor/assets/stylesheets/uniform/components/grid.scss +83 -0
  21. data/vendor/assets/stylesheets/uniform/components/{inputs.css.scss → inputs.scss} +57 -29
  22. data/vendor/assets/stylesheets/uniform/components/lists.scss +62 -0
  23. data/vendor/assets/stylesheets/uniform/components/loaders.scss +62 -0
  24. data/vendor/assets/stylesheets/uniform/components/nav.scss +44 -0
  25. data/vendor/assets/stylesheets/uniform/components/row.scss +165 -0
  26. data/vendor/assets/stylesheets/uniform/components/table-container.scss +44 -0
  27. data/vendor/assets/stylesheets/uniform/components/table-form.scss +264 -0
  28. data/vendor/assets/stylesheets/uniform/components/tabs.scss +32 -0
  29. data/vendor/assets/stylesheets/uniform/components/tile.scss +32 -0
  30. data/vendor/assets/stylesheets/uniform/defaults.scss +30 -0
  31. data/vendor/assets/stylesheets/uniform/helpers.scss +128 -0
  32. data/vendor/assets/stylesheets/uniform/mixins/grid-framework.scss +142 -0
  33. data/vendor/assets/stylesheets/uniform/{mixins.css.scss → mixins.scss} +16 -32
  34. data/vendor/assets/stylesheets/uniform/variables.scss +54 -0
  35. data/vendor/assets/stylesheets/{uniform.css.scss → uniform.scss} +4 -1
  36. metadata +44 -13
  37. data/preview/preview.css +0 -1
  38. data/preview/preview.css.scss +0 -3
  39. data/preview/uniform.css +0 -0
  40. data/vendor/assets/stylesheets/uniform/components/loaders.css.scss +0 -149
  41. data/vendor/assets/stylesheets/uniform/helpers.css.scss +0 -31
  42. data/vendor/assets/stylesheets/uniform/variables.css.scss +0 -44
data/index.html CHANGED
@@ -2,478 +2,659 @@
2
2
  <head>
3
3
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
4
4
  <title>Uniform</title>
5
- <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
6
- <link rel="stylesheet" href="preview/preview.css" type="text/css" media="screen" charset="utf-8">
7
- <link rel="stylesheet" href="preview/uniform.css" type="text/css" media="screen" title="no title" charset="utf-8">
5
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css" type="text/css" media="screen">
6
+ <link rel="stylesheet" href="site/preview.css" type="text/css" media="screen" charset="utf-8">
7
+ <link rel="stylesheet" href="site/uniform.css" type="text/css" media="screen" title="no title" charset="utf-8">
8
8
  </head>
9
9
  <body>
10
- <div class="intro">
11
- <div class="container">
12
- <h1>Uniform</h1>
13
- <p class="large">All the things to help us quickly develop front-end stuff with consistency</p>
10
+
11
+
12
+ <div class="side-nav">
13
+ <div style="padding: 20px; padding-right: 30px">
14
+ <img src="site/logo.png" style="width: 100%; height: auto;">
14
15
  </div>
16
+ <ul class="uniform-nav">
17
+
18
+ <li><a href="#uniform">Uniform</a></li>
19
+
20
+ <li><a href="#installation">Installation</a></li>
21
+
22
+ <li><a href="#philosophy">Philosophy</a></li>
23
+
24
+ <li><a href="#colors">Colors</a></li>
25
+
26
+ <li><a href="#buttons">Buttons</a></li>
27
+
28
+ <li><a href="#grid">Grid</a></li>
29
+
30
+ <li><a href="#inputs">Inputs</a></li>
31
+
32
+ <li><a href="#forms">Forms</a></li>
33
+
34
+ <li><a href="#loaders">Loaders</a></li>
35
+
36
+ <li><a href="#cards">Cards</a></li>
37
+
38
+ <li><a href="#tiles">Tiles</a></li>
39
+
40
+ <li><a href="#rows">Rows</a></li>
41
+
42
+ <li><a href="#lists">Lists</a></li>
43
+
44
+ <li><a href="#tables">Tables</a></li>
45
+
46
+ <li><a href="#nav">Nav</a></li>
47
+
48
+ <li><a href="#tabs">Tabs</a></li>
49
+
50
+ <li><a href="#helpers">Helpers</a></li>
51
+
52
+ </ul>
15
53
  </div>
16
- <div class="container styles">
54
+ <div class="main-content">
55
+
56
+ <a name="uniform"></a>
57
+ <div class="section">
58
+
59
+
60
+ <div class="center">
61
+ <img src="site/logo.png" width="451" height="101">
62
+ <p class="large">Sass components and defaults for building a UI that's on fleak.</p>
63
+ </div>
17
64
 
18
-
19
- <h2>Built on</h2>
20
- <p class="large">There are many things these tools do. These docs are for things specific to uniform.</p>
21
- <div style="overflow:hidden">
22
- <div class="col-xs-4">
23
- <a href="http://getbootstrap.com/css/" class="btn block large outline">
24
- Bootstrap
25
- <span class="subtext">(Framework)</span>
26
- </a>
27
65
  </div>
28
- <div class="col-xs-4">
29
- <a href="http://bourbon.io/docs/" class="btn block large outline">
30
- Bourbon
31
- <span class="subtext">(Sass Mixins)</span>
32
- </a>
33
- </div>
34
- </div>
35
-
36
- <hr />
37
- <h1>Colors</h1>
38
- <table class="colors">
39
- <tr class="row">
40
- <td class="col-xs-6 gray-light">
41
- <code>sass// $gray-light</code>
42
- </td>
43
- <td class="col-xs-1 yellow-light">
44
- <code>sass// $yellow-light</code>
45
- </td>
46
- <td class="col-xs-3 green-light">
47
- <code>sass// $green-light</code>
48
- </td>
49
- <td class="col-xs-1 blue-light">
50
- <code>sass// $blue-light</code>
51
- </td>
52
- <td class="col-xs-1 red-light">
53
- <code>sass// $red-light</code>
54
- </td>
55
- </tr>
56
- <tr class="row main">
57
- <td class="col-xs-6 gray">
58
- <code>sass// $gray</code>
59
- </td>
60
- <td class="col-xs-1 yellow">
61
- <code>sass// $yellow</code>
62
- </td>
63
- <td class="col-xs-3 green">
64
- <code>sass// $green</code>
65
- </td>
66
- <td class="col-xs-1 blue">
67
- <code>sass// $blue</code>
68
- </td>
69
- <td class="col-xs-1 red">
70
- <code>sass// $red</code>
71
- </td>
72
- </tr>
73
- <tr class="row">
74
- <td class="col-xs-6 gray-dark" >
75
- <code>sass// $gray-dark</code>
76
- </td>
77
- <td class="col-xs-1 yellow-dark">
78
- <code>sass// $yellow-dark</code>
79
- </td>
80
- <td class="col-xs-3 green-dark">
81
- <code>sass// $green-dark</code>
82
- </td>
83
- <td class="col-xs-1 blue-dark">
84
- <code>sass// $blue-dark</code>
85
- </td>
86
- <td class="col-xs-1 red-dark">
87
- <code>sass// $red-dark</code>
88
- </td>
89
- </tr>
90
- </table>
91
-
92
- <hr/>
93
-
94
- <h1>CSS Guidelines</h1>
95
-
96
- <h3>Don't use ID's</h3>
97
- <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>
98
-
99
- <h3>Use Semanitc Classes Presentationaly :)</h3>
100
- <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>
101
- <p><strong>TL;DR:</strong> Semantic classes explain what that element is. Presentational classes explain what the shoud look like.</p>
102
- <p><code>class="property-list"</code> vs <code>class="ul-list col-sm-4"</code>
103
- <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>
104
- <p>Structure html so that the semantic class is first and presentational classes follow.</p>
105
- <p><code>class="property-list ul-list col-sm-4"</code></p>
66
+
67
+ <a name="installation"></a>
68
+ <div class="section">
69
+
70
+ <h1>Installation</h1>
71
+
72
+ <p>Add to your gem file<br/><code>gem 'uniform-ui'</code></p>
73
+ <p>Execute:<br/><code>$ bundle</code></p>
74
+ <p>Or install it yourself:<br/><code>$ gem install uniform-ui</code></p>
75
+ <p>Include the css library in your asset pipeline.<br/><code>@import 'uniform';</code></p>
106
76
 
107
- <h3>Save the Namespace, save the world</h3>
108
- <p>Don't make presentational classes that will clash with elements that could mean something else. I'm looking at you Bootsrap!</p>
109
- <p><code>class="label"</code> should be <code>class="text-label"</code></p>
110
77
 
111
- <h3>Train-case</h3>
112
- <p>Use train-case for class names, not camelCase or snake_case. It's quicker to type and honestly just conventional.</p>
113
-
114
- <div class="row">
115
- <div class="col-sm-6">
116
- <h3>Wrappers and Containers</h3>
117
- <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>
118
- </div>
119
- <div class="col-sm-6">
120
- <h3>&nbsp;</h3>
121
- <pre> <div class="property-wrapper">
122
- <div class="property">
123
- <div class="property-container">
124
78
 
125
79
  </div>
80
+
81
+ <a name="philosophy"></a>
82
+ <div class="section">
83
+
84
+ <h1>Philosophy</h1>
85
+
86
+ <h3>Don't use ID's</h3>
87
+ <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>
88
+
89
+ <h3>Use Semanitc Classes Presentationaly :)</h3>
90
+ <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>
91
+ <p><strong>TL;DR:</strong> Semantic classes explain what that element is. Presentational classes explain what the shoud look like.</p>
92
+ <p><code>class="property-list"</code> vs <code>class="ul-list col-sm-4"</code>
93
+ <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>
94
+ <p>Structure html so that the semantic class is first and presentational classes follow.</p>
95
+ <p><code>class="property-list ul-list col-sm-4"</code></p>
96
+
97
+ <h3>Save the Namespace, save the world</h3>
98
+ <p>Don't make presentational classes that will clash with elements that could mean something else. I'm looking at you Bootsrap!</p>
99
+ <p><code>class="label"</code> should be <code>class="text-label"</code></p>
100
+
101
+ <h3>Train-case</h3>
102
+ <p>Use train-case for class names, not camelCase or snake_case. It's quicker to type and honestly just conventional.</p>
103
+
104
+ <div class="row">
105
+ <div class="col-sm-6">
106
+ <h3>Wrappers and Containers</h3>
107
+ <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>
108
+ </div>
109
+ <div class="col-sm-6">
110
+ <h3>&nbsp;</h3>
111
+ <pre><xmp><div class="property-wrapper">
112
+ <div class="property">
113
+ <div class="property-container">
126
114
  </div>
127
115
  </div>
128
- </pre>
129
- </div>
116
+ </div></xmp></pre>
130
117
  </div>
118
+ </div>
131
119
 
132
- <hr />
120
+ </div>
121
+
122
+ <a name="colors"></a>
123
+ <div class="section">
124
+
125
+ <h1>Colors</h1>
126
+
127
+ <table>
128
+ <tr>
129
+ <td><span class='swatch green-light-bg'></span></td>
130
+ <td><code>sass// $green-light</code></td>
131
+ <td><code>class// .green-light</code></td>
132
+ </tr>
133
+ <tr>
134
+ <td><span class='swatch green-bg'></span></td>
135
+ <td><code>sass// $green</code></td>
136
+ <td><code>class// .green</code></td>
137
+ </tr>
138
+ <tr>
139
+ <td><span class='swatch green-dark-bg'></span></td>
140
+ <td><code>sass// $green-dark</code></td>
141
+ <td><code>class// .green-dark</code></td>
142
+ </tr>
143
+ <tr><td colspan='3'>&nbsp;</td></tr>
144
+ <tr>
145
+ <td><span class='swatch blue-light-bg'></span></td>
146
+ <td><code>sass// $blue-light</code></td>
147
+ <td><code>class// .blue-light</code></td>
148
+ </tr>
149
+ <tr>
150
+ <td><span class='swatch blue-bg'></span></td>
151
+ <td><code>sass// $blue</code></td>
152
+ <td><code>class// .blue</code></td>
153
+ </tr>
154
+ <tr>
155
+ <td><span class='swatch blue-dark-bg'></span></td>
156
+ <td><code>sass// $blue-dark</code></td>
157
+ <td><code>class// .blue-dark</code></td>
158
+ </tr>
159
+ <tr><td colspan='3'>&nbsp;</td></tr>
160
+ <tr>
161
+ <td><span class='swatch red-light-bg'></span></td>
162
+ <td><code>sass// $red-light</code></td>
163
+ <td><code>class// .red-light</code></td>
164
+ </tr>
165
+ <tr>
166
+ <td><span class='swatch red-bg'></span></td>
167
+ <td><code>sass// $red</code></td>
168
+ <td><code>class// .red</code></td>
169
+ </tr>
170
+ <tr>
171
+ <td><span class='swatch red-dark-bg'></span></td>
172
+ <td><code>sass// $red-dark</code></td>
173
+ <td><code>class// .red-dark</code></td>
174
+ </tr>
175
+ <tr><td colspan='3'>&nbsp;</td></tr>
176
+ <tr>
177
+ <td><span class='swatch gray-light-bg'></span></td>
178
+ <td><code>sass// $gray-light</code></td>
179
+ <td><code>class// .gray-light</code></td>
180
+ </tr>
181
+ <tr>
182
+ <td><span class='swatch gray-bg'></span></td>
183
+ <td><code>sass// $gray</code></td>
184
+ <td><code>class// .gray</code></td>
185
+ </tr>
186
+ <tr>
187
+ <td><span class='swatch gray-dark-bg'></span></td>
188
+ <td><code>sass// $gray-dark</code></td>
189
+ <td><code>class// .gray-dark</code></td>
190
+ </tr>
191
+ <tr><td colspan='3'>&nbsp;</td></tr>
192
+ <tr>
193
+ <td><span class='swatch yellow-light-bg'></span></td>
194
+ <td><code>sass// $yellow-light</code></td>
195
+ <td><code>class// .yellow-light</code></td>
196
+ </tr>
197
+ <tr>
198
+ <td><span class='swatch yellow-bg'></span></td>
199
+ <td><code>sass// $yellow</code></td>
200
+ <td><code>class// .yellow</code></td>
201
+ </tr>
202
+ <tr>
203
+ <td><span class='swatch yellow-dark-bg'></span></td>
204
+ <td><code>sass// $yellow-dark</code></td>
205
+ <td><code>class// .yellow-dark</code></td>
206
+ </tr>
207
+ <tr><td colspan='3'>&nbsp;</td></tr>
208
+ </table>
133
209
 
134
- <h1 id="tables">Buttons</h1>
135
- <p><code><a href='#' class='btn'></a></code></p>
136
- <table class="table" cellspacing="0" cellpadding="0">
137
- <tr>
138
- <th></th>
139
- <th>Normal or <code>btn-default</code></th>
140
- <th><code>.green</code> or <code>.btn-primary</code></th>
141
- </tr>
142
- <tr>
143
- <th></th>
144
- <td><a class="btn">Button</a></td>
145
- <td><a class="btn green">Button</a></td>
146
- </tr>
147
- <tr>
148
- <th><code>:hover</code> or <code>.hover</code></th>
149
- <td><a class="btn hover">Button</a></td>
150
- <td><a class="btn green hover">Button</a></td>
151
- </tr>
152
- <tr>
153
- <th><code>:active</code> or <code>.active</code></th>
154
- <td><a class="btn active">Button</a></td>
155
- <td><a class="btn green active">Button</a></td>
156
- </tr>
157
- <tr>
158
- <th><code>:disabled</code> or <code>.disabled</code></th>
159
- <td><a class="btn disabled">Button</a></td>
160
- <td><a class="btn green disabled">Button</a></td>
161
- </tr>
162
- <tr>
163
- <th><code>.subtle</code> or <code>.btn-xs</code></th>
164
- <td><a class="btn subtle">Button</a></td>
165
- <td><a class="btn green subtle">Button</a></td>
166
- </tr>
167
- <tr>
168
- <th><code>.small</code> or <code>.btn-sm</code></th>
169
- <td><a class="btn small">Button</a></td>
170
- <td><a class="btn green small">Button</a></td>
171
- </tr>
172
- <tr>
173
- <th><code>.large</code> or <code>.btn-lg</code></th>
174
- <td><a class="btn large">Button</a></td>
175
- <td><a class="btn green large">Button</a></td>
176
- </tr>
177
- <tr>
178
- <th><code>.outline</code></th>
179
- <td><a class="btn outline">Button</a></td>
180
- <td><a class="btn green outline">Button</a></td>
181
- </tr>
182
- <tr>
183
- <th><code>.circle</code></th>
184
- <td><a class="btn circle">Button</a></td>
185
- <td><a class="btn green circle">Button</a></td>
186
- </tr>
187
- <tr>
188
- <th><code>.block</code> or <code>.btn-block</code></th>
189
- <td><a class="btn block">Button</a></td>
190
- <td><a class="btn green block">Button</a></td>
191
- </tr>
192
- </table>
193
-
194
-
195
- <hr />
196
-
197
- <h1 id="loaders">Forms/Inputs</h1>
198
- <h3>Custom Inputs</h3>
199
- <p><code><span class='custom-select'><select></select></span></code></p>
200
- <p><span class='custom-select'><select class="custom"><option>An Option</option></select></span></p>
201
-
202
- <h3>Inline Inputs</h3>
203
- <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>
204
- <div class="row">
205
- <div class="col-sm-6">
206
- <div class="inline-input" style="width:100%">
207
- <span class="label"><label for="name">Name</label></span>
208
- <span><input id="name" placeholder="Jonathan Doe"></span>
209
- </div>
210
- <br/>
211
- <div class="inline-input" style="width:100%">
212
- <span class="label"><label for="car">Car Preference</label></span>
213
- <span class="select"><select id="car" class="custom"><option>Tesla</option></select></span>
214
- </div>
215
210
  </div>
216
- <div class="col-sm-6">
217
- <pre> <div class="inline-input">
218
- <span class="label">
219
- <label for="name">Name</label>
220
- </span>
221
- <span>
222
- <input id="name" placeholder="Jonathan Doe">
223
- </span>
224
- </div>
225
- </pre>
211
+
212
+ <a name="buttons"></a>
213
+ <div class="section">
214
+
215
+ <h1>Buttons</h1>
216
+
217
+ <p>Mix and match styles to make the right button, all colors are available as well.</p>
218
+ <p><code>&lt;a href=&#39;#&#39; class=&#39;btn&#39;&gt;&lt;/a&gt;</code></p>
219
+ <table class="table" cellspacing="0" cellpadding="0">
220
+ <tr>
221
+ <th></th>
222
+ <th>Normal</th>
223
+ <th><code>.green</code></th>
224
+ </tr>
225
+ <tr>
226
+ <th></th>
227
+ <td><a class="btn">Button</a></td>
228
+ <td><a class="btn green">Button</a></td>
229
+ </tr>
230
+ <tr>
231
+ <th><code>:hover</code> or <code>.hover</code></th>
232
+ <td><a class="btn hover">Button</a></td>
233
+ <td><a class="btn green hover">Button</a></td>
234
+ </tr>
235
+ <tr>
236
+ <th><code>:active</code> or <code>.active</code></th>
237
+ <td><a class="btn active">Button</a></td>
238
+ <td><a class="btn green active">Button</a></td>
239
+ </tr>
240
+ <tr>
241
+ <th><code>:disabled</code> or <code>.disabled</code></th>
242
+ <td><a class="btn disabled">Button</a></td>
243
+ <td><a class="btn green disabled">Button</a></td>
244
+ </tr>
245
+ <tr>
246
+ <th><code>.subtle</code></th>
247
+ <td><a class="btn subtle">Button</a></td>
248
+ <td><a class="btn green subtle">Button</a></td>
249
+ </tr>
250
+ <tr>
251
+ <th><code>.small</code></th>
252
+ <td><a class="btn small">Button</a></td>
253
+ <td><a class="btn green small">Button</a></td>
254
+ </tr>
255
+ <tr>
256
+ <th><code>.large</code></th>
257
+ <td><a class="btn large">Button</a></td>
258
+ <td><a class="btn green large">Button</a></td>
259
+ </tr>
260
+ <tr>
261
+ <th><code>.outline</code></th>
262
+ <td><a class="btn outline">Button</a></td>
263
+ <td><a class="btn green outline">Button</a></td>
264
+ </tr>
265
+ <tr>
266
+ <th><code>.circle</code></th>
267
+ <td><a class="btn circle">Button</a></td>
268
+ <td><a class="btn green circle">Button</a></td>
269
+ </tr>
270
+ <tr>
271
+ <th><code>.block</code></th>
272
+ <td><a class="btn block">Button</a></td>
273
+ <td><a class="btn green block">Button</a></td>
274
+ </tr>
275
+ </table>
276
+
226
277
  </div>
227
278
 
228
- </div>
229
-
230
-
231
-
232
-
233
- <h3>Table Form</h3>
234
- <div class="row">
235
- <div class="col-sm-6">
236
- <p><code><form class='table-form'...</code></p>
237
-
238
- <div class="table-form-container">
239
- <div class="inline-input">
240
- <div class="label"></div>
241
- <div class="input"></div>
242
- <div class="error"></div>
243
- </div>
244
- <div class="inline-input">
245
- <div class="label"></div>
246
- <div class="input"></div>
247
- <div class="error"></div>
248
- </div>
249
- <div class="inline-input">
250
- <div class="label"></div>
251
- <div class="input"></div>
252
- <div class="error"></div>
253
- </div>
254
- </div>
255
- <div class="submit">
256
-
257
- </div>
279
+ <a name="grid"></a>
280
+ <div class="section">
258
281
 
282
+ <h1>Grid</h1>
283
+
284
+ TODO
285
+
259
286
  </div>
260
- <div class="col-sm-6">
261
- <pre> <%= form_tag "#", :class => "table-form" do %>
262
- <div class="field-table">
287
+
288
+ <a name="inputs"></a>
289
+ <div class="section">
290
+
291
+ <h1>Inputs</h1>
292
+
293
+ <h3>Custom Inputs</h3>
294
+ <div class="row">
295
+ <div class="col-sm-6">
296
+ <p>Styled Select Box
297
+ <p><span class="uniform-select"><select><option>An Option</option></select></span></p>
298
+ </div>
299
+ <div class="col-sm-6">
300
+ <pre><xmp><span class='uniform-select'>
301
+ <select>
302
+ <option>An Option</option>
303
+ </select>
304
+ </span></xmp></pre>
305
+ </div>
306
+ </div>
307
+
308
+ <h3>Inline Inputs</h3>
309
+ <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>
310
+ <div class="row">
311
+ <div class="col-sm-6">
312
+
313
+
263
314
  <div class="inline-input">
264
- <div class="label"><%= label_tag :name %></div>
265
- <div class="input"><%= text_field_tag :name, "", :placeholder => "Jonathan Doe" %></div>
266
- <div class="error"></div>
315
+ <span class="label">
316
+ <label for="rate">$</label>
317
+ </span>
318
+ <span>
319
+ <input id="rate">
320
+ </span>
321
+ <span class="units">
322
+ <label for="rate">/hour</label>
323
+ </span>
267
324
  </div>
325
+ </div>
326
+ <div class="col-sm-6">
327
+ <pre><xmp><div class="inline-input">
328
+ <span class="label">$</span>
329
+ <span>
330
+ <input id="name" placeholder="Jonathan Doe">
331
+ </span>
332
+ <span class="units">/hour</span>
333
+ </div></xmp></pre>
334
+ </div>
335
+ </div>
336
+ <div class="row">
337
+ <div class="col-sm-6">
268
338
  <div class="inline-input">
269
- <div class="label"><%= label_tag :email %></div>
270
- <div class="input"><%= email_field_tag :email, "", :placeholder => "jonathan@42floors.com" %></div>
271
- <div class="error"></div>
339
+ <span class="label"><label for="car">Car Preference</label></span>
340
+ <span class="select"><select id="car"><option>Tesla</option></select></span>
272
341
  </div>
273
- <div class="inline-input">
274
- <div class="label"><%= label_tag :phone %></div>
275
- <div class="input"><%= telephone_field_tag :phone, "", :placeholder => "###-###-####" %></div>
276
- <div class="error"></div>
342
+ </div>
343
+ <div class="col-sm-6">
344
+ <pre><xmp><div class="inline-input">
345
+ <span class="label">
346
+ <label for="car">Car Preference</label>
347
+ </span>
348
+ <span>
349
+ <select id="car"><option>Tesla</option></select>
350
+ </span>
351
+ </div></xmp></pre>
352
+ </div>
353
+ </div>
354
+ <div class="row">
355
+ <div class="col-sm-6">
356
+ <div class="inline-input block">
357
+ <span class="label">
358
+ <label for="car">Car Preference</label>
359
+ </span>
360
+ <span>
361
+ <input id="name" value="Jonathan Doe" disabled>
362
+ </span>
277
363
  </div>
278
364
  </div>
279
- <div class="submit">
280
- <%= submit_tag "Contact Us", {class: "btn outline white large"} %>
365
+ <div class="col-sm-6">
366
+ <pre><xmp><div class="inline-input block">
367
+ <span class="label">
368
+ <label for="car">Car Preference</label>
369
+ </span>
370
+ <span>
371
+ <input id="name" value="Jonathan Doe" disabled>
372
+ </span>
373
+ </div></xmp></pre>
281
374
  </div>
282
- <% end %>
375
+ </div>
283
376
 
284
- </pre>
285
377
  </div>
286
378
 
287
- </div>
288
-
289
- <hr>
290
-
291
- <h1 id="loaders">Loaders</h1>
379
+ <a name="forms"></a>
380
+ <div class="section">
381
+
382
+ <h1>Forms</h1>
383
+
384
+ TODO
292
385
 
293
- <h3>Dots</h3>
294
- <div class="loader-dots">
295
- <div class="loader-dots-container">
386
+ </div>
387
+
388
+ <a name="loaders"></a>
389
+ <div class="section">
390
+
391
+ <h1>Loaders</h1>
392
+
393
+ <div class="row">
394
+ <div class="col-sm-6">
395
+ <div class="uniform-loader">
396
+ <div class="uniform-loader-container">
296
397
  <span>&bull;</span>
297
398
  <span>&bull;</span>
298
399
  <span>&bull;</span>
299
400
  </div>
300
401
  </div>
301
- <pre> <div class="loader-dots">
302
- <div class="loader-dots-container">
402
+ </div>
403
+ <div class="col-sm-6">
404
+ <pre><xmp><div class="uniform-loader">
405
+ <div class="uniform-loader-container">
406
+ <span>&bull;</span>
407
+ <span>&bull;</span>
408
+ <span>&bull;</span>
409
+ </div>
410
+ </div></xmp></pre>
411
+ </div>
412
+ </div>
413
+ <div class="row">
414
+ <div class="col-sm-6">
415
+ <span style="position:relative; display:inline-block">
416
+ <img src="https://unsplash.it/150/100/?random" style="display:inline-block;" width="150" height="100">
417
+ <div class="uniform-loader cover">
418
+ <div class="uniform-loader-container">
419
+ <span>&bull;</span>
420
+ <span>&bull;</span>
421
+ <span>&bull;</span>
422
+ </div>
423
+ </div>
424
+ </span>
425
+ </div>
426
+ <div class="col-sm-6">
427
+ <pre><xmp><span style="position:relative; display:inline-block">
428
+ <img src="https://unsplash.it/150/100/?random" style="display:inline-block;">
429
+ <div class="uniform-loader cover">
430
+ <div class="uniform-loader-container">
303
431
  <span>&bull;</span>
304
432
  <span>&bull;</span>
305
433
  <span>&bull;</span>
306
434
  </div>
307
435
  </div>
308
- </pre>
309
-
310
-
311
- <div class="loader-dots light">
312
- <div class="loader-dots-container">
313
- <span>&bull;</span>
314
- <span>&bull;</span>
315
- <span>&bull;</span>
316
- </div>
317
- </div>
318
- <h4>Optional Class: <code>light</code></h4>
319
- <pre> <div class="loader-dots light">
320
- <div class="loader-dots-container">
436
+ </span></xmp></pre>
437
+ </div>
438
+ </div>
439
+ <div class="row">
440
+ <div class="col-sm-6">
441
+ <span style="position:relative; display:inline-block">
442
+ <img src="https://unsplash.it/150/100/?random" style="display:inline-block;" width="150" height="100">
443
+ <div class="uniform-loader cover light">
444
+ <div class="uniform-loader-container">
321
445
  <span>&bull;</span>
322
446
  <span>&bull;</span>
323
447
  <span>&bull;</span>
324
448
  </div>
325
449
  </div>
326
- </pre>
327
-
450
+ </span>
451
+ </div>
452
+ <div class="col-sm-6">
453
+ <pre><xmp><span style="position:relative; display:inline-block">
454
+ <img src="https://unsplash.it/150/100/?random" style="display:inline-block;">
455
+ <div class="uniform-loader cover light">
456
+ <div class="uniform-loader-container">
457
+ <span>&bull;</span>
458
+ <span>&bull;</span>
459
+ <span>&bull;</span>
460
+ </div>
461
+ </div>
462
+ </span></xmp></pre>
463
+ </div>
464
+ </div>
328
465
 
329
- <h4>Optional Class: <code>cover</code></h4>
330
- <pre style="position:relative">
331
- <div class="loader-dots cover">
332
- <div class="loader-dots-container">
333
- <span>&bull;</span>
334
- <span>&bull;</span>
335
- <span>&bull;</span>
336
466
  </div>
337
- </div>
338
- <div style="height:200px; position:relative;">
339
- <div class="loader-dots cover">
340
- <div class="loader-dots-container">
341
- <span>&bull;</span>
342
- <span>&bull;</span>
343
- <span>&bull;</span>
467
+
468
+ <a name="cards"></a>
469
+ <div class="section">
470
+
471
+ <h1>Cards</h1>
472
+
473
+ <div class="row">
474
+ <div class="col-sm-6">
475
+ <div class="uniform-card">
476
+ <div class="uniform-card-title">
477
+ <span class="type">Sample Card</span>
344
478
  </div>
479
+ <div class="uniform-card-body">Put Content In Here</div>
345
480
  </div>
346
481
  </div>
347
- </pre>
348
-
349
-
350
- <h3>Windows</h3>
351
- <div class="loader-windows">
352
- <div class="loader-windows-container">
353
- <div class="a1"></div>
354
- <div class="a2"></div>
355
- <div class="a3"></div>
356
- <div class="a4"></div>
357
- <div class="b1"></div>
358
- <div class="b2"></div>
359
- <div class="b3"></div>
360
- <div class="c1"></div>
361
- <div class="c2"></div>
362
- <div class="c3"></div>
363
- <div class="c4"></div>
364
- <div class="c5"></div>
365
- <div class="d1"></div>
366
- <div class="d2"></div>
482
+ <div class="col-sm-6">
483
+ <pre><xmp><div class="uniform-card">
484
+ <div class="uniform-card-title">
485
+ <span class="type">Sample Card</span>
486
+ </div>
487
+ <div class="uniform-card-body">Put Content In Here</div>
488
+ </div></xmp></pre>
489
+ </div>
490
+ </div>
491
+ <div class="row">
492
+ <div class="col-sm-6">
493
+ <div class="uniform-card">
494
+ <div class="uniform-card-avatar">
495
+ <img src="https://unsplash.it/161/161/?random" style="display:block;" height="161" width="161">
496
+ </div>
497
+ <div class="uniform-card-container">
498
+ <div class="uniform-card-title">
499
+ <span class="type">John Dozer</span>
500
+ <div class="actions">
501
+ <a class="btn">Edit</a>
502
+ </div>
503
+ </div>
504
+ <div class="uniform-card-body">
505
+ <div class="uniform-card-attributes">
506
+ <div>
507
+ <div>Company</div>
508
+ <div>Friendly Associates</div>
509
+ </div>
510
+ <div>
511
+ <div>Title</div>
512
+ <div>Head Dude</div>
513
+ </div>
514
+ <div>
515
+ <div>Skills</div>
516
+ <div>Stapling, Jogging</div>
517
+ </div>
518
+ </div>
519
+ </div>
367
520
  </div>
368
- </div>
369
- <pre> <div class="loader-windows">
370
- <div class="loader-windows-container">
371
- <div class="a1"></div>
372
- <div class="a2"></div>
373
- <div class="a3"></div>
374
- <div class="a4"></div>
375
- <div class="b1"></div>
376
- <div class="b2"></div>
377
- <div class="b3"></div>
378
- <div class="c1"></div>
379
- <div class="c2"></div>
380
- <div class="c3"></div>
381
- <div class="c4"></div>
382
- <div class="c5"></div>
383
- <div class="d1"></div>
384
- <div class="d2"></div>
385
521
  </div>
386
522
  </div>
387
-
388
- </pre>
389
-
390
-
391
- <h4>Optional Class: <code>small</code></h4>
392
- <div class="loader-windows small">
393
- <div class="loader-windows-container">
394
- <div class="a1"></div>
395
- <div class="a2"></div>
396
- <div class="a3"></div>
397
- <div class="a4"></div>
398
- <div class="b1"></div>
399
- <div class="b2"></div>
400
- <div class="b3"></div>
401
- <div class="c1"></div>
402
- <div class="c2"></div>
403
- <div class="c3"></div>
404
- <div class="c4"></div>
405
- <div class="c5"></div>
406
- <div class="d1"></div>
407
- <div class="d2"></div>
523
+ <div class="col-sm-6">
524
+ <pre><xmp><div class="uniform-card">
525
+ <div class="uniform-card-avatar">
526
+ <img src="https://unsplash.it/161/161/?random" style="display:block;" height="161" width="161">
527
+ </div>
528
+ <div class="uniform-card-container">
529
+ <div class="uniform-card-title">
530
+ <span class="type">John Dozer</span>
531
+ <div class="actions">
532
+ <a class="btn">Edit</a>
408
533
  </div>
409
534
  </div>
410
- <pre> <div class="loader-windows small">
411
- <div class="loader-windows-container">
412
- <div class="a1"></div>
413
- <div class="a2"></div>
414
- <div class="a3"></div>
415
- <div class="a4"></div>
416
- <div class="b1"></div>
417
- <div class="b2"></div>
418
- <div class="b3"></div>
419
- <div class="c1"></div>
420
- <div class="c2"></div>
421
- <div class="c3"></div>
422
- <div class="c4"></div>
423
- <div class="c5"></div>
424
- <div class="d1"></div>
425
- <div class="d2"></div>
535
+ <div class="uniform-card-body">
536
+ <div class="uniform-card-attributes">
537
+ <div>
538
+ <div>Company</div>
539
+ <div>Friendly Associates</div>
540
+ </div>
541
+ <div>
542
+ <div>Title</div>
543
+ <div>Head Dude</div>
544
+ </div>
545
+ <div>
546
+ <div>Skills</div>
547
+ <div>Stapling, Jogging</div>
548
+ </div>
549
+ </div>
426
550
  </div>
427
551
  </div>
552
+ </div></xmp></pre>
553
+ </div>
554
+ </div>
428
555
 
429
- </pre>
430
-
556
+ </div>
557
+
558
+ <a name="tiles"></a>
559
+ <div class="section">
560
+
561
+ <h1>Tiles</h1>
562
+
563
+ TODO
431
564
 
565
+ </div>
566
+
567
+ <a name="rows"></a>
568
+ <div class="section">
569
+
570
+ <h1>Rows</h1>
571
+
572
+ TODO
432
573
 
433
- <h4>Optional Class: <code>cover</code></h4>
434
-
574
+ </div>
575
+
576
+ <a name="lists"></a>
577
+ <div class="section">
578
+
579
+ <h1>Lists</h1>
580
+
581
+ TODO
435
582
 
583
+ </div>
584
+
585
+ <a name="tables"></a>
586
+ <div class="section">
587
+
588
+ <h1>Tables</h1>
589
+
590
+ TODO
436
591
 
437
- <pre style="position:relative">
438
- <div class="loader-windows cover">
439
- <div class="loader-windows-container">
440
- <div class="a1"></div>
441
- <div class="a2"></div>
442
- <div class="a3"></div>
443
- <div class="a4"></div>
444
- <div class="b1"></div>
445
- <div class="b2"></div>
446
- <div class="b3"></div>
447
- <div class="c1"></div>
448
- <div class="c2"></div>
449
- <div class="c3"></div>
450
- <div class="c4"></div>
451
- <div class="c5"></div>
452
- <div class="d1"></div>
453
- <div class="d2"></div>
454
- </div>
455
- </div>
456
- <div stlye="height:100px; position:relative;">
457
- <div class="loader-windows cover">
458
- <div class="loader-windows-container">
459
- <div class="a1"></div>
460
- <div class="a2"></div>
461
- <div class="a3"></div>
462
- <div class="a4"></div>
463
- <div class="b1"></div>
464
- <div class="b2"></div>
465
- <div class="b3"></div>
466
- <div class="c1"></div>
467
- <div class="c2"></div>
468
- <div class="c3"></div>
469
- <div class="c4"></div>
470
- <div class="c5"></div>
471
- <div class="d1"></div>
472
- <div class="d2"></div>
592
+ </div>
593
+
594
+ <a name="nav"></a>
595
+ <div class="section">
596
+
597
+ <h1>Nav</h1>
598
+
599
+ <div class="row">
600
+ <div class="col-sm-6">
601
+ <div class="uniform-nav horizontal main">
602
+ <div class="pad">Logo</div>
603
+ <div class="right">
604
+ <div><a>Account</a></div>
605
+ <div><a>Sign Out</a></div>
473
606
  </div>
474
607
  </div>
475
608
  </div>
609
+ <div class="col-sm-6">
610
+ <pre><xmp><div class="uniform-nav horizontal main">
611
+ <div class="pad">Logo</div>
612
+ <div class="right">
613
+ <div><a>Account</a></div>
614
+ <div><a>Sign Out</a></div>
615
+ </div>
616
+ </div></xmp></pre>
617
+ </div>
618
+ </div>
619
+ <div class="row">
620
+ <div class="col-sm-6">
621
+ <div class="uniform-nav">
622
+ <ul>
623
+ <li><a>Account</a></li>
624
+ <li><a>Sign Out</a></li>
625
+ </ul>
626
+ </div>
627
+ </div>
628
+ <div class="col-sm-6">
629
+ <pre><xmp><div class="uniform-nav">
630
+ <ul>
631
+ <li><a>Account</a></li>
632
+ <li><a>Sign Out</a></li>
633
+ </ul>
634
+ </div></xmp></pre>
635
+ </div>
636
+ </div>
637
+
638
+ </div>
639
+
640
+ <a name="tabs"></a>
641
+ <div class="section">
642
+
643
+ <h1>Tabs</h1>
644
+
645
+ TODO
476
646
 
477
- </pre>
647
+ </div>
648
+
649
+ <a name="helpers"></a>
650
+ <div class="section">
651
+
652
+ <h1>Helpers</h1>
653
+
654
+ TODO
655
+
656
+ </div>
657
+
478
658
  </div>
659
+ <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
479
660
  </body>