uniform-ui 0.5

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