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/preview/index.html.erb CHANGED
@@ -2,496 +2,486 @@
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>
14
- </div>
15
- </div>
16
- <div class="container styles">
17
10
 
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
- </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>
106
-
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>
11
+ <% sections = {
12
+ uniform: <<-HTML,
110
13
 
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>
14
+ <div class="center">
15
+ <img src="site/logo.png" width="451" height="101">
16
+ <p class="large">Sass components and defaults for building a UI that's on fleak.</p>
17
+ </div>
18
+ HTML
19
+
20
+ installation: <<-HTML,
21
+ <p>Add to your gem file<br/><code>gem 'uniform-ui'</code></p>
22
+ <p>Execute:<br/><code>$ bundle</code></p>
23
+ <p>Or install it yourself:<br/><code>$ gem install uniform-ui</code></p>
24
+ <p>Include the css library in your asset pipeline.<br/><code>@import 'uniform';</code></p>
113
25
 
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><%= <<-HTML
122
- <div class="property-wrapper">
123
- <div class="property">
124
- <div class="property-container">
125
26
 
126
- </div>
27
+ HTML
28
+
29
+
30
+ philosophy: <<-HTML,
31
+ <h3>Don't use ID's</h3>
32
+ <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>
33
+
34
+ <h3>Use Semanitc Classes Presentationaly :)</h3>
35
+ <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>
36
+ <p><strong>TL;DR:</strong> Semantic classes explain what that element is. Presentational classes explain what the shoud look like.</p>
37
+ <p><code>class="property-list"</code> vs <code>class="ul-list col-sm-4"</code>
38
+ <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>
39
+ <p>Structure html so that the semantic class is first and presentational classes follow.</p>
40
+ <p><code>class="property-list ul-list col-sm-4"</code></p>
41
+
42
+ <h3>Save the Namespace, save the world</h3>
43
+ <p>Don't make presentational classes that will clash with elements that could mean something else. I'm looking at you Bootsrap!</p>
44
+ <p><code>class="label"</code> should be <code>class="text-label"</code></p>
45
+
46
+ <h3>Train-case</h3>
47
+ <p>Use train-case for class names, not camelCase or snake_case. It's quicker to type and honestly just conventional.</p>
48
+
49
+ <div class="row">
50
+ <div class="col-sm-6">
51
+ <h3>Wrappers and Containers</h3>
52
+ <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>
53
+ </div>
54
+ <div class="col-sm-6">
55
+ <h3>&nbsp;</h3>
56
+ <pre><xmp><div class="property-wrapper">
57
+ <div class="property">
58
+ <div class="property-container">
127
59
  </div>
128
60
  </div>
129
- HTML
130
- %></pre>
131
- </div>
61
+ </div></xmp></pre>
132
62
  </div>
63
+ </div>
64
+ HTML
133
65
 
134
- <hr />
135
66
 
136
- <h1 id="tables">Buttons</h1>
137
- <p><code><%= "<a href='#' class='btn'></a>" %></code></p>
138
- <table class="table" cellspacing="0" cellpadding="0">
139
- <tr>
140
- <th></th>
141
- <th>Normal or <code>btn-default</code></th>
142
- <th><code>.green</code> or <code>.btn-primary</code></th>
143
- </tr>
144
- <tr>
145
- <th></th>
146
- <td><a class="btn">Button</a></td>
147
- <td><a class="btn green">Button</a></td>
148
- </tr>
149
- <tr>
150
- <th><code>:hover</code> or <code>.hover</code></th>
151
- <td><a class="btn hover">Button</a></td>
152
- <td><a class="btn green hover">Button</a></td>
153
- </tr>
154
- <tr>
155
- <th><code>:active</code> or <code>.active</code></th>
156
- <td><a class="btn active">Button</a></td>
157
- <td><a class="btn green active">Button</a></td>
158
- </tr>
159
- <tr>
160
- <th><code>:disabled</code> or <code>.disabled</code></th>
161
- <td><a class="btn disabled">Button</a></td>
162
- <td><a class="btn green disabled">Button</a></td>
163
- </tr>
164
- <tr>
165
- <th><code>.subtle</code> or <code>.btn-xs</code></th>
166
- <td><a class="btn subtle">Button</a></td>
167
- <td><a class="btn green subtle">Button</a></td>
168
- </tr>
169
- <tr>
170
- <th><code>.small</code> or <code>.btn-sm</code></th>
171
- <td><a class="btn small">Button</a></td>
172
- <td><a class="btn green small">Button</a></td>
173
- </tr>
174
- <tr>
175
- <th><code>.large</code> or <code>.btn-lg</code></th>
176
- <td><a class="btn large">Button</a></td>
177
- <td><a class="btn green large">Button</a></td>
178
- </tr>
179
- <tr>
180
- <th><code>.outline</code></th>
181
- <td><a class="btn outline">Button</a></td>
182
- <td><a class="btn green outline">Button</a></td>
183
- </tr>
184
- <tr>
185
- <th><code>.circle</code></th>
186
- <td><a class="btn circle">Button</a></td>
187
- <td><a class="btn green circle">Button</a></td>
188
- </tr>
189
- <tr>
190
- <th><code>.block</code> or <code>.btn-block</code></th>
191
- <td><a class="btn block">Button</a></td>
192
- <td><a class="btn green block">Button</a></td>
193
- </tr>
194
- </table>
195
-
196
-
197
- <hr />
198
-
199
- <h1 id="loaders">Forms/Inputs</h1>
200
- <h3>Custom Inputs</h3>
201
- <p><code><%= "<span class='custom-select'><select></select></span>" %></code></p>
202
- <p><span class='custom-select'><select class="custom"><option>An Option</option></select></span></p>
203
-
204
- <h3>Inline Inputs</h3>
205
- <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>
206
- <div class="row">
207
- <div class="col-sm-6">
208
- <div class="inline-input" style="width:100%">
209
- <span class="label"><label for="name">Name</label></span>
210
- <span><input id="name" placeholder="Jonathan Doe"></span>
211
- </div>
212
- <br/>
213
- <div class="inline-input" style="width:100%">
214
- <span class="label"><label for="car">Car Preference</label></span>
215
- <span class="select"><select id="car" class="custom"><option>Tesla</option></select></span>
216
- </div>
217
- </div>
218
- <div class="col-sm-6">
219
- <pre><%= <<-HTML
220
- <div class="inline-input">
221
- <span class="label">
222
- <label for="name">Name</label>
223
- </span>
224
- <span>
225
- <input id="name" placeholder="Jonathan Doe">
226
- </span>
227
- </div>
228
- HTML
229
- %></pre>
230
- </div>
231
-
67
+
68
+ colors: <<-HTML,
69
+ <table>
70
+ #{%w(green blue red gray yellow).map{|color|
71
+ ["-light", "", "-dark"].map{|style|
72
+ "<tr>
73
+ <td><span class='swatch #{color}#{style}-bg'></span></td>
74
+ <td><code>sass// $#{color}#{style}</code></td>
75
+ <td><code>class// .#{color}#{style}</code></td>
76
+ </tr>"
77
+ } + ["<tr><td colspan='3'>&nbsp;</td></tr>"]
78
+ }.flatten.join("\n")}
79
+ </table>
80
+ HTML
81
+
82
+
83
+ buttons: <<-HTML,
84
+ <p>Mix and match styles to make the right button, all colors are available as well.</p>
85
+ <p><code>#{CGI::escapeHTML "<a href='#' class='btn'></a>"}</code></p>
86
+ <table class="table" cellspacing="0" cellpadding="0">
87
+ <tr>
88
+ <th></th>
89
+ <th>Normal</th>
90
+ <th><code>.green</code></th>
91
+ </tr>
92
+ <tr>
93
+ <th></th>
94
+ <td><a class="btn">Button</a></td>
95
+ <td><a class="btn green">Button</a></td>
96
+ </tr>
97
+ <tr>
98
+ <th><code>:hover</code> or <code>.hover</code></th>
99
+ <td><a class="btn hover">Button</a></td>
100
+ <td><a class="btn green hover">Button</a></td>
101
+ </tr>
102
+ <tr>
103
+ <th><code>:active</code> or <code>.active</code></th>
104
+ <td><a class="btn active">Button</a></td>
105
+ <td><a class="btn green active">Button</a></td>
106
+ </tr>
107
+ <tr>
108
+ <th><code>:disabled</code> or <code>.disabled</code></th>
109
+ <td><a class="btn disabled">Button</a></td>
110
+ <td><a class="btn green disabled">Button</a></td>
111
+ </tr>
112
+ <tr>
113
+ <th><code>.subtle</code></th>
114
+ <td><a class="btn subtle">Button</a></td>
115
+ <td><a class="btn green subtle">Button</a></td>
116
+ </tr>
117
+ <tr>
118
+ <th><code>.small</code></th>
119
+ <td><a class="btn small">Button</a></td>
120
+ <td><a class="btn green small">Button</a></td>
121
+ </tr>
122
+ <tr>
123
+ <th><code>.large</code></th>
124
+ <td><a class="btn large">Button</a></td>
125
+ <td><a class="btn green large">Button</a></td>
126
+ </tr>
127
+ <tr>
128
+ <th><code>.outline</code></th>
129
+ <td><a class="btn outline">Button</a></td>
130
+ <td><a class="btn green outline">Button</a></td>
131
+ </tr>
132
+ <tr>
133
+ <th><code>.circle</code></th>
134
+ <td><a class="btn circle">Button</a></td>
135
+ <td><a class="btn green circle">Button</a></td>
136
+ </tr>
137
+ <tr>
138
+ <th><code>.block</code></th>
139
+ <td><a class="btn block">Button</a></td>
140
+ <td><a class="btn green block">Button</a></td>
141
+ </tr>
142
+ </table>
143
+ HTML
144
+
145
+ grid: <<-HTML,
146
+ TODO
147
+ HTML
148
+
149
+ inputs: <<-HTML,
150
+ <h3>Custom Inputs</h3>
151
+ <div class="row">
152
+ <div class="col-sm-6">
153
+ <p>Styled Select Box
154
+ <p><span class="uniform-select"><select><option>An Option</option></select></span></p>
232
155
  </div>
233
-
234
-
235
-
236
-
237
- <h3>Table Form</h3>
238
- <div class="row">
239
- <div class="col-sm-6">
240
- <p><code><%= "<form class='table-form'..." %></code></p>
241
- <%#= form_tag "#", :class => "table-form", :style => "margin-bottom: 20px" do %>
242
- <div class="table-form-container">
243
- <div class="inline-input">
244
- <div class="label"><%#= label_tag :name %></div>
245
- <div class="input"><%#= text_field_tag :name, "", :placeholder => "Jonathan Doe" %></div>
246
- <div class="error"></div>
247
- </div>
248
- <div class="inline-input">
249
- <div class="label"><%#= label_tag :email %></div>
250
- <div class="input"><%#= email_field_tag :email, "", :placeholder => "jonathan@42floors.com" %></div>
251
- <div class="error"></div>
252
- </div>
253
- <div class="inline-input">
254
- <div class="label"><%#= label_tag :phone %></div>
255
- <div class="input"><%#= telephone_field_tag :phone, "", :placeholder => "###-###-####" %></div>
256
- <div class="error"></div>
257
- </div>
258
- </div>
259
- <div class="submit">
260
- <%#= submit_tag "Contact Us", {class: "btn outline large"} %>
261
- </div>
262
- <%# end %>
263
- </div>
264
- <div class="col-sm-6">
265
- <pre><%= <<-HTML
266
- \<%= form_tag "#", :class => "table-form" do %\>
267
- <div class="field-table">
268
- <div class="inline-input">
269
- <div class="label">\<%= label_tag :name %\></div>
270
- <div class="input">\<%= text_field_tag :name, "", :placeholder => "Jonathan Doe" %\></div>
271
- <div class="error"></div>
272
- </div>
156
+ <div class="col-sm-6">
157
+ <pre><xmp><span class='uniform-select'>
158
+ <select>
159
+ <option>An Option</option>
160
+ </select>
161
+ </span></xmp></pre>
162
+ </div>
163
+ </div>
164
+
165
+ <h3>Inline Inputs</h3>
166
+ <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>
167
+ <div class="row">
168
+ <div class="col-sm-6">
169
+
170
+
273
171
  <div class="inline-input">
274
- <div class="label">\<%= label_tag :email %\></div>
275
- <div class="input">\<%= email_field_tag :email, "", :placeholder => "jonathan@42floors.com" %\></div>
276
- <div class="error"></div>
172
+ <span class="label">
173
+ <label for="rate">$</label>
174
+ </span>
175
+ <span>
176
+ <input id="rate">
177
+ </span>
178
+ <span class="units">
179
+ <label for="rate">/hour</label>
180
+ </span>
277
181
  </div>
182
+ </div>
183
+ <div class="col-sm-6">
184
+ <pre><xmp><div class="inline-input">
185
+ <span class="label">$</span>
186
+ <span>
187
+ <input id="name" placeholder="Jonathan Doe">
188
+ </span>
189
+ <span class="units">/hour</span>
190
+ </div></xmp></pre>
191
+ </div>
192
+ </div>
193
+ <div class="row">
194
+ <div class="col-sm-6">
278
195
  <div class="inline-input">
279
- <div class="label">\<%= label_tag :phone %\></div>
280
- <div class="input">\<%= telephone_field_tag :phone, "", :placeholder => "###-###-####" %\></div>
281
- <div class="error"></div>
196
+ <span class="label"><label for="car">Car Preference</label></span>
197
+ <span class="select"><select id="car"><option>Tesla</option></select></span>
282
198
  </div>
283
199
  </div>
284
- <div class="submit">
285
- \<%= submit_tag "Contact Us", {class: "btn outline white large"} %\>
200
+ <div class="col-sm-6">
201
+ <pre><xmp><div class="inline-input">
202
+ <span class="label">
203
+ <label for="car">Car Preference</label>
204
+ </span>
205
+ <span>
206
+ <select id="car"><option>Tesla</option></select>
207
+ </span>
208
+ </div></xmp></pre>
286
209
  </div>
287
- \<% end %\>
288
- HTML
289
- %>
290
- </pre>
210
+ </div>
211
+ <div class="row">
212
+ <div class="col-sm-6">
213
+ <div class="inline-input block">
214
+ <span class="label">
215
+ <label for="car">Car Preference</label>
216
+ </span>
217
+ <span>
218
+ <input id="name" value="Jonathan Doe" disabled>
219
+ </span>
291
220
  </div>
292
-
293
221
  </div>
294
-
295
- <hr>
222
+ <div class="col-sm-6">
223
+ <pre><xmp><div class="inline-input block">
224
+ <span class="label">
225
+ <label for="car">Car Preference</label>
226
+ </span>
227
+ <span>
228
+ <input id="name" value="Jonathan Doe" disabled>
229
+ </span>
230
+ </div></xmp></pre>
231
+ </div>
232
+ </div>
233
+ HTML
296
234
 
297
- <h1 id="loaders">Loaders</h1>
235
+ forms: <<-HTML,
236
+ TODO
237
+ HTML
298
238
 
299
- <h3>Dots</h3>
300
- <div class="loader-dots">
301
- <div class="loader-dots-container">
239
+ loaders: <<-HTML,
240
+ <div class="row">
241
+ <div class="col-sm-6">
242
+ <div class="uniform-loader">
243
+ <div class="uniform-loader-container">
302
244
  <span>&bull;</span>
303
245
  <span>&bull;</span>
304
246
  <span>&bull;</span>
305
247
  </div>
306
248
  </div>
307
- <pre><%= <<-HTML
308
- <div class="loader-dots">
309
- <div class="loader-dots-container">
249
+ </div>
250
+ <div class="col-sm-6">
251
+ <pre><xmp><div class="uniform-loader">
252
+ <div class="uniform-loader-container">
253
+ <span>&bull;</span>
254
+ <span>&bull;</span>
255
+ <span>&bull;</span>
256
+ </div>
257
+ </div></xmp></pre>
258
+ </div>
259
+ </div>
260
+ <div class="row">
261
+ <div class="col-sm-6">
262
+ <span style="position:relative; display:inline-block">
263
+ <img src="https://unsplash.it/150/100/?random" style="display:inline-block;" width="150" height="100">
264
+ <div class="uniform-loader cover">
265
+ <div class="uniform-loader-container">
266
+ <span>&bull;</span>
267
+ <span>&bull;</span>
268
+ <span>&bull;</span>
269
+ </div>
270
+ </div>
271
+ </span>
272
+ </div>
273
+ <div class="col-sm-6">
274
+ <pre><xmp><span style="position:relative; display:inline-block">
275
+ <img src="https://unsplash.it/150/100/?random" style="display:inline-block;">
276
+ <div class="uniform-loader cover">
277
+ <div class="uniform-loader-container">
310
278
  <span>&bull;</span>
311
279
  <span>&bull;</span>
312
280
  <span>&bull;</span>
313
281
  </div>
314
282
  </div>
315
- HTML
316
- %></pre>
317
-
318
-
319
- <div class="loader-dots light">
320
- <div class="loader-dots-container">
321
- <span>&bull;</span>
322
- <span>&bull;</span>
323
- <span>&bull;</span>
324
- </div>
325
- </div>
326
- <h4>Optional Class: <code>light</code></h4>
327
- <pre><%= <<-HTML
328
- <div class="loader-dots light">
329
- <div class="loader-dots-container">
283
+ </span></xmp></pre>
284
+ </div>
285
+ </div>
286
+ <div class="row">
287
+ <div class="col-sm-6">
288
+ <span style="position:relative; display:inline-block">
289
+ <img src="https://unsplash.it/150/100/?random" style="display:inline-block;" width="150" height="100">
290
+ <div class="uniform-loader cover light">
291
+ <div class="uniform-loader-container">
330
292
  <span>&bull;</span>
331
293
  <span>&bull;</span>
332
294
  <span>&bull;</span>
333
295
  </div>
334
296
  </div>
335
- HTML
336
- %></pre>
337
-
297
+ </span>
298
+ </div>
299
+ <div class="col-sm-6">
300
+ <pre><xmp><span style="position:relative; display:inline-block">
301
+ <img src="https://unsplash.it/150/100/?random" style="display:inline-block;">
302
+ <div class="uniform-loader cover light">
303
+ <div class="uniform-loader-container">
304
+ <span>&bull;</span>
305
+ <span>&bull;</span>
306
+ <span>&bull;</span>
307
+ </div>
308
+ </div>
309
+ </span></xmp></pre>
310
+ </div>
311
+ </div>
312
+ HTML
338
313
 
339
- <h4>Optional Class: <code>cover</code></h4>
340
- <pre style="position:relative">
341
- <div class="loader-dots cover">
342
- <div class="loader-dots-container">
343
- <span>&bull;</span>
344
- <span>&bull;</span>
345
- <span>&bull;</span>
314
+ cards: <<-HTML,
315
+ <div class="row">
316
+ <div class="col-sm-6">
317
+ <div class="uniform-card">
318
+ <div class="uniform-card-title">
319
+ <span class="type">Sample Card</span>
346
320
  </div>
321
+ <div class="uniform-card-body">Put Content In Here</div>
347
322
  </div>
348
- <%= <<-HTML
349
- <div style="height:200px; position:relative;">
350
- <div class="loader-dots cover">
351
- <div class="loader-dots-container">
352
- <span>&bull;</span>
353
- <span>&bull;</span>
354
- <span>&bull;</span>
323
+ </div>
324
+ <div class="col-sm-6">
325
+ <pre><xmp><div class="uniform-card">
326
+ <div class="uniform-card-title">
327
+ <span class="type">Sample Card</span>
328
+ </div>
329
+ <div class="uniform-card-body">Put Content In Here</div>
330
+ </div></xmp></pre>
331
+ </div>
332
+ </div>
333
+ <div class="row">
334
+ <div class="col-sm-6">
335
+ <div class="uniform-card">
336
+ <div class="uniform-card-avatar">
337
+ <img src="https://unsplash.it/161/161/?random" style="display:block;" height="161" width="161">
338
+ </div>
339
+ <div class="uniform-card-container">
340
+ <div class="uniform-card-title">
341
+ <span class="type">John Dozer</span>
342
+ <div class="actions">
343
+ <a class="btn">Edit</a>
344
+ </div>
345
+ </div>
346
+ <div class="uniform-card-body">
347
+ <div class="uniform-card-attributes">
348
+ <div>
349
+ <div>Company</div>
350
+ <div>Friendly Associates</div>
351
+ </div>
352
+ <div>
353
+ <div>Title</div>
354
+ <div>Head Dude</div>
355
+ </div>
356
+ <div>
357
+ <div>Skills</div>
358
+ <div>Stapling, Jogging</div>
359
+ </div>
360
+ </div>
361
+ </div>
355
362
  </div>
356
363
  </div>
357
364
  </div>
358
- HTML
359
- %></pre>
360
-
361
-
362
- <h3>Windows</h3>
363
- <div class="loader-windows">
364
- <div class="loader-windows-container">
365
- <div class="a1"></div>
366
- <div class="a2"></div>
367
- <div class="a3"></div>
368
- <div class="a4"></div>
369
- <div class="b1"></div>
370
- <div class="b2"></div>
371
- <div class="b3"></div>
372
- <div class="c1"></div>
373
- <div class="c2"></div>
374
- <div class="c3"></div>
375
- <div class="c4"></div>
376
- <div class="c5"></div>
377
- <div class="d1"></div>
378
- <div class="d2"></div>
365
+ <div class="col-sm-6">
366
+ <pre><xmp><div class="uniform-card">
367
+ <div class="uniform-card-avatar">
368
+ <img src="https://unsplash.it/161/161/?random" style="display:block;" height="161" width="161">
369
+ </div>
370
+ <div class="uniform-card-container">
371
+ <div class="uniform-card-title">
372
+ <span class="type">John Dozer</span>
373
+ <div class="actions">
374
+ <a class="btn">Edit</a>
379
375
  </div>
380
376
  </div>
381
- <pre><%= <<-HTML
382
- <div class="loader-windows">
383
- <div class="loader-windows-container">
384
- <div class="a1"></div>
385
- <div class="a2"></div>
386
- <div class="a3"></div>
387
- <div class="a4"></div>
388
- <div class="b1"></div>
389
- <div class="b2"></div>
390
- <div class="b3"></div>
391
- <div class="c1"></div>
392
- <div class="c2"></div>
393
- <div class="c3"></div>
394
- <div class="c4"></div>
395
- <div class="c5"></div>
396
- <div class="d1"></div>
397
- <div class="d2"></div>
377
+ <div class="uniform-card-body">
378
+ <div class="uniform-card-attributes">
379
+ <div>
380
+ <div>Company</div>
381
+ <div>Friendly Associates</div>
382
+ </div>
383
+ <div>
384
+ <div>Title</div>
385
+ <div>Head Dude</div>
386
+ </div>
387
+ <div>
388
+ <div>Skills</div>
389
+ <div>Stapling, Jogging</div>
390
+ </div>
391
+ </div>
398
392
  </div>
399
393
  </div>
400
- HTML
401
- %>
402
- </pre>
394
+ </div></xmp></pre>
395
+ </div>
396
+ </div>
397
+ HTML
398
+
399
+ tiles: <<-HTML,
400
+ TODO
401
+ HTML
402
+
403
+ rows: <<-HTML,
404
+ TODO
405
+ HTML
406
+
407
+ lists: <<-HTML,
408
+ TODO
409
+ HTML
403
410
 
411
+ tables: <<-HTML,
412
+ TODO
413
+ HTML
404
414
 
405
- <h4>Optional Class: <code>small</code></h4>
406
- <div class="loader-windows small">
407
- <div class="loader-windows-container">
408
- <div class="a1"></div>
409
- <div class="a2"></div>
410
- <div class="a3"></div>
411
- <div class="a4"></div>
412
- <div class="b1"></div>
413
- <div class="b2"></div>
414
- <div class="b3"></div>
415
- <div class="c1"></div>
416
- <div class="c2"></div>
417
- <div class="c3"></div>
418
- <div class="c4"></div>
419
- <div class="c5"></div>
420
- <div class="d1"></div>
421
- <div class="d2"></div>
415
+ nav: <<-HTML,
416
+ <div class="row">
417
+ <div class="col-sm-6">
418
+ <div class="uniform-nav horizontal main">
419
+ <div class="pad">Logo</div>
420
+ <div class="right">
421
+ <div><a>Account</a></div>
422
+ <div><a>Sign Out</a></div>
422
423
  </div>
423
424
  </div>
424
- <pre><%= <<-HTML
425
- <div class="loader-windows small">
426
- <div class="loader-windows-container">
427
- <div class="a1"></div>
428
- <div class="a2"></div>
429
- <div class="a3"></div>
430
- <div class="a4"></div>
431
- <div class="b1"></div>
432
- <div class="b2"></div>
433
- <div class="b3"></div>
434
- <div class="c1"></div>
435
- <div class="c2"></div>
436
- <div class="c3"></div>
437
- <div class="c4"></div>
438
- <div class="c5"></div>
439
- <div class="d1"></div>
440
- <div class="d2"></div>
425
+ </div>
426
+ <div class="col-sm-6">
427
+ <pre><xmp><div class="uniform-nav horizontal main">
428
+ <div class="pad">Logo</div>
429
+ <div class="right">
430
+ <div><a>Account</a></div>
431
+ <div><a>Sign Out</a></div>
432
+ </div>
433
+ </div></xmp></pre>
434
+ </div>
435
+ </div>
436
+ <div class="row">
437
+ <div class="col-sm-6">
438
+ <div class="uniform-nav">
439
+ <ul>
440
+ <li><a>Account</a></li>
441
+ <li><a>Sign Out</a></li>
442
+ </ul>
441
443
  </div>
442
444
  </div>
443
- HTML
444
- %>
445
- </pre>
446
-
447
-
445
+ <div class="col-sm-6">
446
+ <pre><xmp><div class="uniform-nav">
447
+ <ul>
448
+ <li><a>Account</a></li>
449
+ <li><a>Sign Out</a></li>
450
+ </ul>
451
+ </div></xmp></pre>
452
+ </div>
453
+ </div>
454
+ HTML
448
455
 
449
- <h4>Optional Class: <code>cover</code></h4>
450
-
456
+ tabs: <<-HTML,
457
+ TODO
458
+ HTML
451
459
 
460
+ helpers: <<-HTML,
461
+ TODO
462
+ HTML
452
463
 
453
- <pre style="position:relative">
454
- <div class="loader-windows cover">
455
- <div class="loader-windows-container">
456
- <div class="a1"></div>
457
- <div class="a2"></div>
458
- <div class="a3"></div>
459
- <div class="a4"></div>
460
- <div class="b1"></div>
461
- <div class="b2"></div>
462
- <div class="b3"></div>
463
- <div class="c1"></div>
464
- <div class="c2"></div>
465
- <div class="c3"></div>
466
- <div class="c4"></div>
467
- <div class="c5"></div>
468
- <div class="d1"></div>
469
- <div class="d2"></div>
470
- </div>
471
- </div>
472
- <%= <<-HTML
473
- <div stlye="height:100px; position:relative;">
474
- <div class="loader-windows cover">
475
- <div class="loader-windows-container">
476
- <div class="a1"></div>
477
- <div class="a2"></div>
478
- <div class="a3"></div>
479
- <div class="a4"></div>
480
- <div class="b1"></div>
481
- <div class="b2"></div>
482
- <div class="b3"></div>
483
- <div class="c1"></div>
484
- <div class="c2"></div>
485
- <div class="c3"></div>
486
- <div class="c4"></div>
487
- <div class="c5"></div>
488
- <div class="d1"></div>
489
- <div class="d2"></div>
490
- </div>
464
+ } %>
465
+ <div class="side-nav">
466
+ <div style="padding: 20px; padding-right: 30px">
467
+ <img src="site/logo.png" style="width: 100%; height: auto;">
491
468
  </div>
469
+ <ul class="uniform-nav">
470
+ <% sections.each do |key, html| %>
471
+ <li><a href="#<%= key %>"><%= key.to_s.titleize %></a></li>
472
+ <% end %>
473
+ </ul>
492
474
  </div>
493
- HTML
494
- %>
495
- </pre>
475
+ <div class="main-content">
476
+ <% sections.each do |key, html| %>
477
+ <a name="<%= key %>"></a>
478
+ <div class="section">
479
+ <% if key != :uniform %>
480
+ <h1><%= key.to_s.titleize %></h1>
481
+ <% end %>
482
+ <%= html %>
483
+ </div>
484
+ <% end %>
496
485
  </div>
486
+ <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
497
487
  </body>