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.
Files changed (25) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +1 -0
  3. data/Gemfile +11 -0
  4. data/Gemfile.lock +38 -0
  5. data/LICENSE +22 -0
  6. data/README.md +36 -0
  7. data/Rakefile +38 -0
  8. data/index.html +479 -0
  9. data/lib/uniform/rails.rb +6 -0
  10. data/lib/uniform/rails/engine.rb +8 -0
  11. data/lib/uniform/ui.rb +1 -0
  12. data/preview.css +0 -0
  13. data/preview/index.html.erb +497 -0
  14. data/preview/preview.css +1 -0
  15. data/preview/preview.css.scss +3 -0
  16. data/preview/uniform.css +0 -0
  17. data/uniform.gemspec +27 -0
  18. data/vendor/assets/stylesheets/uniform.css.scss +6 -0
  19. data/vendor/assets/stylesheets/uniform/components/buttons.css.scss +130 -0
  20. data/vendor/assets/stylesheets/uniform/components/inputs.css.scss +82 -0
  21. data/vendor/assets/stylesheets/uniform/components/loaders.css.scss +149 -0
  22. data/vendor/assets/stylesheets/uniform/helpers.css.scss +31 -0
  23. data/vendor/assets/stylesheets/uniform/mixins.css.scss +78 -0
  24. data/vendor/assets/stylesheets/uniform/variables.css.scss +44 -0
  25. metadata +123 -0
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 66e5531a02b5d26fc0ad382afefea509d3723c6b
4
+ data.tar.gz: 1f87b2445d11bea0300cf5e79416b6d7988fbb9a
5
+ SHA512:
6
+ metadata.gz: ecaf1ec23b2b86308f4384e99f8126de41650b5353ee9e4fcdda40c165feb55af172734551cd914e0f203d17b043d54c555dadd37899ec32fa292172bebbd491
7
+ data.tar.gz: 323183d4a2f10910e86537238ddaccef3083961486b9a2deeb1965b9d02effa53693037c15db3266a460556a5b2d68529a122fe1cd47e62eb2c3f5ce863ca93a
data/.gitignore ADDED
@@ -0,0 +1 @@
1
+ .sass-cache/*
data/Gemfile ADDED
@@ -0,0 +1,11 @@
1
+ source "http://rubygems.org"
2
+
3
+ # Specify your gem's dependencies in uniform.gemspec
4
+ source 'https://rubygems.org'
5
+
6
+ # Stylesheets
7
+ gem 'sass'
8
+ gem 'sprockets-sass'
9
+ gem 'bourbon'
10
+ gem 'neat'
11
+ gem 'rake'
data/Gemfile.lock ADDED
@@ -0,0 +1,38 @@
1
+ GEM
2
+ remote: http://rubygems.org/
3
+ remote: https://rubygems.org/
4
+ specs:
5
+ bourbon (4.2.7)
6
+ sass (~> 3.4)
7
+ thor (~> 0.19)
8
+ hike (1.2.3)
9
+ multi_json (1.12.1)
10
+ neat (1.8.0)
11
+ sass (>= 3.3)
12
+ thor (~> 0.19)
13
+ rack (1.6.4)
14
+ rake (11.3.0)
15
+ sass (3.4.22)
16
+ sprockets (2.12.4)
17
+ hike (~> 1.2)
18
+ multi_json (~> 1.0)
19
+ rack (~> 1.0)
20
+ tilt (~> 1.1, != 1.3.0)
21
+ sprockets-sass (1.3.1)
22
+ sprockets (~> 2.0)
23
+ tilt (~> 1.1)
24
+ thor (0.19.1)
25
+ tilt (1.4.1)
26
+
27
+ PLATFORMS
28
+ ruby
29
+
30
+ DEPENDENCIES
31
+ bourbon
32
+ neat
33
+ rake
34
+ sass
35
+ sprockets-sass
36
+
37
+ BUNDLED WITH
38
+ 1.12.5
data/LICENSE ADDED
@@ -0,0 +1,22 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2014 Ben Ehmke
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
22
+
data/README.md ADDED
@@ -0,0 +1,36 @@
1
+ Uniform
2
+ =======
3
+
4
+ A rails gem of sass compenents and defaults for building a UI that's on fleak.
5
+
6
+ Demo and Documentation: http://bemky.github.io/uniform/
7
+
8
+ ## Installation
9
+
10
+ Add this line to your application's Gemfile:
11
+
12
+ gem 'uniform-ui'
13
+
14
+ And then execute:
15
+
16
+ $ bundle
17
+
18
+ Or install it yourself as:
19
+
20
+ $ gem install uniform-ui
21
+
22
+ Include the css library in your asset pipeline.
23
+
24
+ ```scss
25
+ @import 'uniform';
26
+ ```
27
+
28
+ ## Usage
29
+
30
+ TODO documentation on importing individual compontents
31
+
32
+ ## Development
33
+
34
+ To compile preview:
35
+
36
+ rake compile
data/Rakefile ADDED
@@ -0,0 +1,38 @@
1
+ require 'fileutils'
2
+ require 'sprockets'
3
+ require "sprockets-sass"
4
+ require 'bundler/setup'
5
+
6
+ Bundler.require(:default)
7
+
8
+ # Setup Sprockets
9
+ environment = Sprockets::Environment.new
10
+ environment.append_path 'lib'
11
+ environment.append_path 'preview'
12
+ environment.css_compressor = :scss
13
+
14
+ desc "Compile preview"
15
+ task :compile do
16
+ FileUtils.rm_f('./uniform.css')
17
+
18
+ File.open('./preview/uniform.css', "w") do |file|
19
+ file << environment['uniform.css.scss']
20
+ end
21
+
22
+ File.open('./preview/preview.css', "w") do |file|
23
+ file << environment['preview.css.scss']
24
+ end
25
+
26
+ # Render the test html file
27
+ File.open('./index.html', 'w') do |file|
28
+ file.write(ERB.new(File.read('preview/index.html.erb')).result(binding))
29
+ end
30
+
31
+ end
32
+
33
+ class UrlGenerator < Sprockets::DirectiveProcessor
34
+ protected
35
+ def process_source
36
+ @result << @pathname.to_s << "\n" unless @has_written_body
37
+ end
38
+ end
data/index.html ADDED
@@ -0,0 +1,479 @@
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>&nbsp;</h3>
121
+ <pre> <div class="property-wrapper">
122
+ <div class="property">
123
+ <div class="property-container">
124
+
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </pre>
129
+ </div>
130
+ </div>
131
+
132
+ <hr />
133
+
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
+ </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>
226
+ </div>
227
+
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>
258
+
259
+ </div>
260
+ <div class="col-sm-6">
261
+ <pre> <%= form_tag "#", :class => "table-form" do %>
262
+ <div class="field-table">
263
+ <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>
267
+ </div>
268
+ <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>
272
+ </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>
277
+ </div>
278
+ </div>
279
+ <div class="submit">
280
+ <%= submit_tag "Contact Us", {class: "btn outline white large"} %>
281
+ </div>
282
+ <% end %>
283
+
284
+ </pre>
285
+ </div>
286
+
287
+ </div>
288
+
289
+ <hr>
290
+
291
+ <h1 id="loaders">Loaders</h1>
292
+
293
+ <h3>Dots</h3>
294
+ <div class="loader-dots">
295
+ <div class="loader-dots-container">
296
+ <span>&bull;</span>
297
+ <span>&bull;</span>
298
+ <span>&bull;</span>
299
+ </div>
300
+ </div>
301
+ <pre> <div class="loader-dots">
302
+ <div class="loader-dots-container">
303
+ <span>&bull;</span>
304
+ <span>&bull;</span>
305
+ <span>&bull;</span>
306
+ </div>
307
+ </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">
321
+ <span>&bull;</span>
322
+ <span>&bull;</span>
323
+ <span>&bull;</span>
324
+ </div>
325
+ </div>
326
+ </pre>
327
+
328
+
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
+ </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>
344
+ </div>
345
+ </div>
346
+ </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>
367
+ </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
+ </div>
386
+ </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>
408
+ </div>
409
+ </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>
426
+ </div>
427
+ </div>
428
+
429
+ </pre>
430
+
431
+
432
+
433
+ <h4>Optional Class: <code>cover</code></h4>
434
+
435
+
436
+
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>
473
+ </div>
474
+ </div>
475
+ </div>
476
+
477
+ </pre>
478
+ </div>
479
+ </body>