uniform-ui 0.5
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.
- checksums.yaml +7 -0
- data/.gitignore +1 -0
- data/Gemfile +11 -0
- data/Gemfile.lock +38 -0
- data/LICENSE +22 -0
- data/README.md +36 -0
- data/Rakefile +38 -0
- data/index.html +479 -0
- data/lib/uniform/rails.rb +6 -0
- data/lib/uniform/rails/engine.rb +8 -0
- data/lib/uniform/ui.rb +1 -0
- data/preview.css +0 -0
- data/preview/index.html.erb +497 -0
- data/preview/preview.css +1 -0
- data/preview/preview.css.scss +3 -0
- data/preview/uniform.css +0 -0
- data/uniform.gemspec +27 -0
- data/vendor/assets/stylesheets/uniform.css.scss +6 -0
- data/vendor/assets/stylesheets/uniform/components/buttons.css.scss +130 -0
- data/vendor/assets/stylesheets/uniform/components/inputs.css.scss +82 -0
- data/vendor/assets/stylesheets/uniform/components/loaders.css.scss +149 -0
- data/vendor/assets/stylesheets/uniform/helpers.css.scss +31 -0
- data/vendor/assets/stylesheets/uniform/mixins.css.scss +78 -0
- data/vendor/assets/stylesheets/uniform/variables.css.scss +44 -0
- metadata +123 -0
data/lib/uniform/ui.rb
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
require 'uniform/rails'
|
data/preview.css
ADDED
|
File without changes
|
|
@@ -0,0 +1,497 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<head>
|
|
3
|
+
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
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">
|
|
8
|
+
</head>
|
|
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
|
+
|
|
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>
|
|
110
|
+
|
|
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> </h3>
|
|
121
|
+
<pre><%= <<-HTML
|
|
122
|
+
<div class="property-wrapper">
|
|
123
|
+
<div class="property">
|
|
124
|
+
<div class="property-container">
|
|
125
|
+
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
HTML
|
|
130
|
+
%></pre>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
<hr />
|
|
135
|
+
|
|
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
|
+
|
|
232
|
+
</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>
|
|
273
|
+
<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>
|
|
277
|
+
</div>
|
|
278
|
+
<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>
|
|
282
|
+
</div>
|
|
283
|
+
</div>
|
|
284
|
+
<div class="submit">
|
|
285
|
+
\<%= submit_tag "Contact Us", {class: "btn outline white large"} %\>
|
|
286
|
+
</div>
|
|
287
|
+
\<% end %\>
|
|
288
|
+
HTML
|
|
289
|
+
%>
|
|
290
|
+
</pre>
|
|
291
|
+
</div>
|
|
292
|
+
|
|
293
|
+
</div>
|
|
294
|
+
|
|
295
|
+
<hr>
|
|
296
|
+
|
|
297
|
+
<h1 id="loaders">Loaders</h1>
|
|
298
|
+
|
|
299
|
+
<h3>Dots</h3>
|
|
300
|
+
<div class="loader-dots">
|
|
301
|
+
<div class="loader-dots-container">
|
|
302
|
+
<span>•</span>
|
|
303
|
+
<span>•</span>
|
|
304
|
+
<span>•</span>
|
|
305
|
+
</div>
|
|
306
|
+
</div>
|
|
307
|
+
<pre><%= <<-HTML
|
|
308
|
+
<div class="loader-dots">
|
|
309
|
+
<div class="loader-dots-container">
|
|
310
|
+
<span>•</span>
|
|
311
|
+
<span>•</span>
|
|
312
|
+
<span>•</span>
|
|
313
|
+
</div>
|
|
314
|
+
</div>
|
|
315
|
+
HTML
|
|
316
|
+
%></pre>
|
|
317
|
+
|
|
318
|
+
|
|
319
|
+
<div class="loader-dots light">
|
|
320
|
+
<div class="loader-dots-container">
|
|
321
|
+
<span>•</span>
|
|
322
|
+
<span>•</span>
|
|
323
|
+
<span>•</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">
|
|
330
|
+
<span>•</span>
|
|
331
|
+
<span>•</span>
|
|
332
|
+
<span>•</span>
|
|
333
|
+
</div>
|
|
334
|
+
</div>
|
|
335
|
+
HTML
|
|
336
|
+
%></pre>
|
|
337
|
+
|
|
338
|
+
|
|
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>•</span>
|
|
344
|
+
<span>•</span>
|
|
345
|
+
<span>•</span>
|
|
346
|
+
</div>
|
|
347
|
+
</div>
|
|
348
|
+
<%= <<-HTML
|
|
349
|
+
<div style="height:200px; position:relative;">
|
|
350
|
+
<div class="loader-dots cover">
|
|
351
|
+
<div class="loader-dots-container">
|
|
352
|
+
<span>•</span>
|
|
353
|
+
<span>•</span>
|
|
354
|
+
<span>•</span>
|
|
355
|
+
</div>
|
|
356
|
+
</div>
|
|
357
|
+
</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>
|
|
379
|
+
</div>
|
|
380
|
+
</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>
|
|
398
|
+
</div>
|
|
399
|
+
</div>
|
|
400
|
+
HTML
|
|
401
|
+
%>
|
|
402
|
+
</pre>
|
|
403
|
+
|
|
404
|
+
|
|
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>
|
|
422
|
+
</div>
|
|
423
|
+
</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>
|
|
441
|
+
</div>
|
|
442
|
+
</div>
|
|
443
|
+
HTML
|
|
444
|
+
%>
|
|
445
|
+
</pre>
|
|
446
|
+
|
|
447
|
+
|
|
448
|
+
|
|
449
|
+
<h4>Optional Class: <code>cover</code></h4>
|
|
450
|
+
|
|
451
|
+
|
|
452
|
+
|
|
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>
|
|
491
|
+
</div>
|
|
492
|
+
</div>
|
|
493
|
+
HTML
|
|
494
|
+
%>
|
|
495
|
+
</pre>
|
|
496
|
+
</div>
|
|
497
|
+
</body>
|