uniform-ui 0.5 → 0.5.1

Sign up to get free protection for your applications and to get access to all the features.
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>