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/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>