-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathbest-css-based-framework-in-2018.html
More file actions
491 lines (464 loc) · 43.3 KB
/
best-css-based-framework-in-2018.html
File metadata and controls
491 lines (464 loc) · 43.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
<!DOCTYPE html>
<html lang="en">
<head>
<title>Aione Framework | Responsive CSS Framework</title>
<!-- Aione framework website, 3D websites, Grid system -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="identifier-url" content="https://aioneframework.com/" />
<meta name="title" content="Aione Framework | Responsive CSS Framework" />
<meta name="description" content="Aione framework is responsive css framework to make responsive websites, web applications and mobile applications using 100 coulmn grid system" />
<meta name="abstract" content="all in one Responsive CSS Framework" />
<meta name="keywords" content="aione framework, Mobile first css framework, Web application framework, mobile application framework, editor, code, live, css, framework, css4, layout, playground, help" />
<meta name="author" content="OXO IT SOLUTIONS PRIVATE LIMITED" />
<meta name="revisit-after" content="10" />
<meta name="language" content="EN" />
<meta name="copyright" content="©2018 OXO IT SOLUTIONS PRIVATE LIMITED" />
<meta name="robots" content="All" />
<meta name="theme-color" content="#1570a6"/>
<meta name="application-name" content="Aione Framework">
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="https://aioneframework.com/assets/images/mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="https://aioneframework.com/assets/images/mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="https://aioneframework.com/assets/images/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="https://aioneframework.com/assets/images/mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="https://aioneframework.com/assets/images/mstile-310x310.png" />
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="https://aioneframework.com/assets/images/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://aioneframework.com/assets/images/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://aioneframework.com/assets/images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://aioneframework.com/assets/images/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="https://aioneframework.com/assets/images/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="https://aioneframework.com/assets/images/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="https://aioneframework.com/assets/images/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="https://aioneframework.com/assets/images/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="https://aioneframework.com/assets/images/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="https://aioneframework.com/assets/images/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="https://aioneframework.com/assets/images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="https://aioneframework.com/assets/images/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="https://aioneframework.com/assets/images/favicon-128.png" sizes="128x128" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:100,300,400">
<link rel="manifest" href="/manifest.json">
<link rel="stylesheet" type="text/css" href="https://cdn.aioneframework.com/assets/css/aione.min.css" >
<!-- <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:100,300,400"> -->
<!-- Theme Styles and Scripts-->
<!-- <link rel="stylesheet" type="text/css" href="assets/css/style.min.css"> -->
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name": "Aione Framework",
"url": "https://aioneframework.com/",
"logo": "https://cdn.aioneframework.com/assets/images/aione-framework-logo-small.png",
"contactPoint": [
{
"@type": "ContactPoint",
"telephone": "+91-183-2401000",
"contactType": "customer service"
}
],
"sameAs": [
"https://www.facebook.com/AioneFramework",
"https://twitter.com/AioneFramework"
],
"potentialAction": {
"@type": "SearchAction",
"target": "https://aioneframework.com/?q={search}",
"query-input": "required name=search"
}
}
</script>
<style>
.border-radius
{
border-radius: 4px;
}
</style>
<div id="aione_wrapper" class="aione-wrapper page-home layout-header-top aione-layout-wide aione-theme-arcane ">
<div class="wrapper">
<div id="aione_header" class="aione-header light load-template">
</div>
<!-- #aione-header -->
<div id="aione_main" class="aione-main fullwidth">
<div class="wrapper">
<div id="aione_content" class="aione-content">
<div class="wrapper">
<div id="aione_page_content" class="aione-page-content">
<div class="wrapper">
<!-- <section>
<div class="ar pt-50">
<div class="ac l100 p-0">
<div class="center-align">
<img src="" style="width: 100%;/">
</div>
</div>
</div>
</section> -->
<section>
<div class="ar mt-4p" style="position: relative;">
<div class="ac l100 p-0">
<img src="image/workspace-01.jpg">
</div>
<div class="ac l100" style="position: absolute;background-color:black;opacity: 0.7;top: 0;bottom: 0;left: 0;right: 0;">
<h1 class="white aione-align-center mt-13p font-weight-300">CSS Framework</h1>
</div>
</div>
</section>
<section>
<div class="ar ph-10p pv-30">
<div class="center-align">
<h3 class="font-weight-300 light-blue darken-3">Best CSS frameworks</h3>
</div>
<div class="pt-15">
<p class="font-size-17 line-height-27 font-weight-300 blue-grey aione-align-justify">The CSS frameworks are gaining a lot of popularity in recent days. Andit is even more difficult to imagine a website without the use of CSSframeworks. With the advanced development, the CSS frameworks havecome up with advanced tools and revolutions. The basic concept behindCSS is to describe HTML as a structural format. And is a format thateven provides style and design of the structure. It has even become oneof the major components in all sorts of web development and webcreations. In simple words, the CSS can be described as the style and the design of a particular website that definitely makes it more unique.In fact, there are wide varieties of CSS frames available for the webdevelopers so that they can utilize them in a more advanced way. Eachand every CSS frame has its own specialty and designing capabilities.One of the main reasons why they have become popular is due to theeasy accessibility and user-friendly interface. You will never find any website without the implementation of CSS or either CSS frameworks.It not only benefits the developers but also saves a lot of time while designing any website. They also have built-in facilities along with the mobile-friendly interface. Some of the CSS frameworks are given below so that you will have a basic idea of them.
</p>
</div>
</div>
</section>
<!--end of row-->
<!--Bootstrap CSS framework-->
<section class="bg-grey bg-lighten-4">
<div class="ar ph-10p pv-40">
<div class="pl-10">
<h3 class="font-weight-300 light-blue darken-3 "><span class="bg-light-blue bg-darken-3 white ph-10 border-radius">#1</span> Bootstrap CSS framework</h3>
</div>
<div class="ac l50">
<div class="pt-15">
<p class="font-weight-300 font-size-17 line-height-27 blue-grey aione-align-justify">Bootstrap is one of the most popularly used CSS frameworks by the webdevelopers. It is too good to be true that Bootstrap has the greater standardized platform. Along with the implementation of unique style patterns, it also has most desired components in it. The Framework is easily supported in any type of browser and easily supports any sort of issues. The excellent user interface makes everyone to be found about it.The Framework is easily available for mobile users as well.</p>
</div>
<div class="pt-3p">
<h3 class="font-weight-300 light-blue darken-3">Pros</h3>
<ol class="pt-5 font-weight-300 font-size-17 line-height-27 aione-align-justify" style="list-style: disc;">
<li>It is very easy to use the framework.</li>
<li>Available with lots of built-in features.</li>
<li>It does not any adjustments in terms of pixels.</li>
<li>Easily supported on any type of platform and Browser.</li>
</ol>
</div>
</div>
<div class="ac l50">
<div class="pl-20 pt-25">
<img src="assets/images/Bootstrap-css.png">
</div>
<div class="pl-20">
<h3 class="font-weight-300 light-blue darken-3">Cons</h3>
<ol class="pt-5 font-weight-300 font-size-17 line-height-27 aione-align-justify" style="list-style: disc;">
<li>The JavaScript is tied up with jQuery</li>
<li>Is not compatible with HTML.</li>
<li>It has many restrictions due to the standard set of selectors and grids.</li>
</ol>
</div>
</div>
</div>
</section>
<!--Foundation CSS frameworks-->
<section>
<div class="ar ph-10p pv-40">
<div class="pl-10">
<h3 class="font-weight-300 light-blue darken-3"><span class="white ph-10 border-radius bg-light-blue bg-darken-3">#2</span> Foundation CSS framework</h3>
</div>
<div class="ac l50">
<div class="pt-15">
<p class="font-weight-300 font-size-17 line-height-27 blue-grey aione-align-justify">Basically, Foundation is considered as one of the extraordinary frontend CSS framework. Apart from that, it is one of the professional frameworks along with creative designs. It is easily compatible with any types of websites which can also handle multiple devices. SASS-stylesheet are much more compatible with foundation CSS frameworks.</p>
</div>
<div class="pt-76">
<h3 class="font-weight-300 light-blue darken-3">Pros</h3>
<ol class="pt-5 font-weight-300 font-size-17 line-height-27 aione-align-justify" style="list-style: disc;">
<li>The finest customization framework available for the developers.</li>
<li>It is uploaded with lots of templates and easily available codes.</li>
<li>It does not require much time to download the templates.</li>
<li>Easily supports the rapid development of a website.</li>
<li>A robust development Framework with superior activities.</li>
</ol>
</div>
</div>
<div class="ac l50">
<div class="pl-20 pt-25">
<img src="assets/images/Foundation-css.png">
</div>
<div class="pl-20">
<h3 class="font-weight-300 light-blue darken-3">Cons</h3>
<ol class="pt-5 font-weight-300 font-size-17 line-height-27 aione-align-justify" style="list-style: disc;">
<li>Less complicated with the outstanding grid system.</li>
<li>The codes available in the framework are difficult to modify.</li>
</ol>
</div>
</div>
</div>
</section>
<!--UIkit CSS frameworks-->
<section class="bg-grey bg-lighten-4">
<div class="ar ph-10p pv-40">
<div class="pl-10">
<h3 class="font-weight-300 light-blue darken-3"><span class="bg-light-blue bg-darken-3 white ph-10 border-radius">#3</span> UIkit CSS framework</h3>
</div>
<div class="ac l50">
<div class="pt-15">
<p class="font-weight-300 font-size-17 line-height-27 blue-grey aione-align-justify">This is most popularly known for its lightweight version. This is the main reason why most of the developers choose UIkit while developing their website. Additionally, it is also known for its modularity that is well organized. With the different varieties of styles available in the CSS Framework, it provides different options for the users. The customized,as well as build in animations, make the framework to be unique and outstanding. All these features made it be one of the most flexible frameworks.
</p>
</div>
<div class="pt-55">
<h3 class="font-weight-300 light-blue darken-3">Pros</h3>
<ol class="pt-5 font-weight-300 font-size-17 line-height-27 aione-align-justify" style="list-style: disc;">
<li>Completely a lightweight version with front end Framework.</li>
<li>Compatible with inbuilt features.</li>
<li>It has the powerful web interface and the fast developing facility.</li>
<li>It is very easy to learn and has different functionalities.</li>
</ul>
</div>
</div>
<div class="ac l50">
<div class="pl-20 pt-25">
<img src="assets/images/UIkit-css.png">
</div>
<div class="pl-20 pt-54">
<h3 class="font-weight-300 light-blue darken-3">Cons</h3>
<ol class="pt-5 font-weight-300 font-size-17 line-height-27 aione-align-justify" style="list-style: disc;">
<li>Complicated with huge varieties of inbuilt features.</li>
<li>The modification is one of the top jobs.</li>
<li>Can be easily handled only by the professionals.</li>
</ol>
</div>
</div>
</div>
</section>
<!--Semantic UI CSS framework-->
<section>
<div class="ar ph-10p pv-40">
<div class="pl-10">
<h3 class="font-weight-300 light-blue darken-3"><span class="bg-light-blue bg-darken-3 white ph-10 border-radius">#4</span> Semantic UI CSS framework</h3>
</div>
<div class="ac l50">
<div class="pt-15">
<p class="font-weight-300 font-size-17 line-height-27 blue-grey aione-align-justify">A well-known CSS framework for Its easy user interface. Semantic UI also provides the developers with a vast range of customized options. The CSS Framework resembles Bootstrap that is officially supported by some of the external libraries like WordPress and angular. The main Principle behind the Semantic UI is to tag ambivalence, semantic and responsive. And is considered as an excellent framework to build any platforms.</p>
</div>
<div class="pt-8p">
<h3 class="font-weight-300 light-blue darken-3">Pros</h3>
<ol class="pt-5 font-weight-300 font-size-17 line-height-27 aione-align-justify" style="list-style: disc;">
<li>Elements of the huge amount of customizations available.</li>
<li>It is very easy to load the components that you need.</li>
<li>Completely well documented and beautifully designed.</li>
<li>Very easy to use.</li>
</ol>
</div>
</div>
<div class="ac l50">
<div class="pl-20 pt-25">
<img src="assets/images/Semantic-css.png">
</div>
<div class="pl-20">
<h3 class="font-weight-300 light-blue darken-3">Cons</h3>
<ol class="pt-5 font-weight-300 font-size-17 line-height-27 aione-align-justify" style="list-style: disc;">
<li>It does not have the number of classes.</li>
<li>The file size is extremely large.</li>
<li>It is not suitable for beginners.</li>
</ol>
</div>
</div>
</div>
</section>
<!--Pure CSS framework-->
<section class="bg-grey bg-lighten-4">
<div class="ar ph-10p pv-40">
<div class="pl-10">
<h3 class="font-weight-300 light-blue darken-3"><span class="bg-light-blue bg-darken-3 white ph-10 border-radius">#5</span> Pure CSS framework</h3>
</div>
<div class="ac l50">
<div class="pt-15">
<p class="font-weight-300 font-size-17 line-height-27 blue-grey aione-align-justify">Pure is a simple CSS framework that is optimized and modular as well.Being a lightweight CSS frame it also provides a flexible variety of CSS modulus. It is an Ultimate CSS Framework, which cannot be replaced by any other. The amazing features include menu grids, responsive buttons and so on. It is completely based on CSS, which does not support any other extensions.</p>
</div>
<div class="pt-30">
<h3 class="font-weight-300 light-blue darken-3">Pros</h3>
<ol class="pt-5 font-weight-300 font-size-17 line-height-27 aione-align-justify" style="list-style: disc;">
<li>It is a lightweight version with modular facilities.</li>
<li>Facilitated with different features.</li>
<li>Very simple and responsive as well.</li>
</ol>
</div>
</div>
<div class="ac l50">
<div class="pl-10">
<img src="assets/images/Pure-css.png">
</div>
<div class="pl-20">
<h3 class="font-weight-300 light-blue darken-3">Cons</h3>
<ol class="pt-5 font-weight-300 font-size-17 line-height-27 aione-align-justify" style="list-style: disc;">
<li>Javascript or Jquery are not supported.</li>
<li>Difficult to understand for the beginners.</li>
</ol>
</div>
</div>
</div>
</section>
<!--Skeleton CSS framework-->
<section>
<div class="ar ph-10p pv-40">
<div class="pl-10">
<h3 class="font-weight-300 light-blue darken-3"><span class="bg-light-blue bg-darken-3 white ph-10 border-radius">#6</span> Skeleton CSS framework</h3>
</div>
<div class="ac l50">
<div class="pt-15">
<p class="font-weight-300 font-size-17 line-height-27 blue-grey aione-align-justify">Being one of the lightweight versions it is also well known for its responsive frame building factors. The basic HTML can be easily supported by The Skeleton CSS framework. Ultimately, it provides a large number of templates and is badly designed for the developers concerning the purity of CSS frameworks. It can easily organize the file structure and the basic concerned to provide user interface configurations.</p>
</div>
<div class="pt-80">
<h3 class="font-weight-300 light-blue darken-3">Pros</h3>
<ol class="pt-5 font-weight-300 font-size-17 line-height-27 aione-align-justify" style="list-style: disc;">
<li>Skeleton is very fast, easy to use.</li>
<li>It has more specifications and web designs for the developers.</li>
<li>Very light in weight and has the responsive grid.</li>
</ol>
</div>
</div>
<div class="ac l50">
<div class="pl-10">
<img src="assets/images/skeleton.png">
</div>
<div class="pl-20">
<h3 class="font-weight-300 light-blue darken-3">Cons</h3>
<ol class="pt-5 font-weight-300 font-size-17 line-height-27 aione-align-justify" style="list-style: disc;">
<li>Consumes more time while dealing with new projects.</li>
<li>Maintenance is the least bit difficult.</li>
</ol>
</div>
</div>
</div>
</section>
<!--Bulma CSS framework-->
<section class="bg-grey bg-lighten-4">
<div class="ar ph-10p pv-40">
<div class="pl-10">
<h3 class="font-weight-300 light-blue darken-3"><span class="bg-light-blue bg-darken-3 white ph-10 border-radius">#7</span> Bulma CSS framework</h3>
</div>
<div class="ac l50">
<div class="pt-15">
<p class="font-weight-300 font-size-17 line-height-27 blue-grey aione-align-justify">An ultra-modern CSS framework that is even easier to understand for the new users. Recently it has gained popularity due to its multiple designing skills and developing communities. And is also one of the lightweight version that has customized options for the developers.Bulma is available with an integrated flexbox so that the users can design in a more fancy way. The features are not much interesting, but still, it has been used by many people.</p>
</div>
<div class="pt-35">
<h3 class="font-weight-300 light-blue darken-3">Pros</h3>
<ol class="pt-5 font-weight-300 font-size-17 line-height-27 aione-align-justify" style="list-style: disc;">
<li>It is very light in weight.</li>
<li>Completely featured with flexbox and interesting configuration</li>
</ol>
</div>
</div>
<div class="ac l50">
<div class="pl-20">
<img src="assets/images/Bulma-css.png">
</div>
<div class="pl-20">
<h3 class="font-weight-300 light-blue darken-3">Cons</h3>
<ol class="pt-5 font-weight-300 font-size-17 line-height-27 aione-align-justify" style="list-style: disc;">
<li>Complicated for the beginners.</li>
<li>The features are lagging behind other CSS frameworks.</li>
</ol>
</div>
</div>
</div>
</section>
<!--Cascade CSS Framework-->
<section>
<div class="ar ph-10p pv-40">
<div class="pl-10">
<h3 class="font-weight-300 light-blue darken-3"><span class="bg-light-blue bg-darken-3 white ph-10 border-radius">#8</span> Cascade CSS Framework</h3>
</div>
<div class="ac l50">
<div class="pt-15">
<p class="font-weight-300 font-size-17 line-height-27 aione-align-justify blue-grey">It is one of the free CSS Framework that is used to create websites as well as web applications.Cascade CSS Framework is similar to that of bootstrap and foundation frameworks. The basic concept behind cascade is that it contains the wide range of HTML and CSS based interfaces. JavaScript is an exclusive extension available in cascade CSS framework. The supportive feature of the Framework in provided with responsive design. </p>
</div>
<div class="pt-2p">
<h3 class="font-weight-300 light-blue darken-3">Pros</h3>
<ol class="pt-5 font-weight-300 font-size-17 line-height-27 aione-align-justify" style="list-style: disc;">
<li>Easily understandable and very interactive.</li>
<li>Easy for the beginners.</li>
<li>Has supportive features.</li>
<li>Constructive features include HTML and JavaScript supporting.</li>
</ol>
</div>
</div>
<div class="ac l50">
<div class="pl-20">
<img src="assets/images/Cascade-css.png">
</div>
<div class="pl-20 pt-32">
<h3 class="font-weight-300 light-blue darken-3">Cons</h3>
<ol class="pt-5 font-weight-300 font-size-17 line-height-27 aione-align-justify" style="list-style: disc;">
<li>Restrict the freedom of using templates.</li>
<li>It requires extra time for coding.</li>
</ol>
</div>
</div>
</div>
</section>
<!--Layer CSS framework -->
<section class="bg-grey bg-lighten-4">
<div class="ar ph-10p pv-40">
<div class="pl-10">
<h3 class="font-weight-300 light-blue darken-3"><span class="bg-light-blue bg-darken-3 white ph-10 border-radius">#9</span> Layer CSS framework</h3>
</div>
<div class="ac l50">
<div class="pt-15">
<p class="font-weight-300 font-size-17 line-height-27 aione-align-justify blue-grey">This is a Framework that is mainly used for practical use cases. The Framework is available with small footprints as well as compatible. A lightweight and style oriented Framework that is specially designed for professional web developers. It is a mobile-first and full responsive grid system that is easily adapted for mobile devices. </p>
</div>
<div class="pt-10p">
<h3 class="font-weight-300 light-blue darken-3">Pros</h3>
<ol class="pt-5 font-weight-300 font-size-17 line-height-27 aione-align-justify" style="list-style: disc;">
<li> Professionally designed to use and easy.</li>
<li>Preserves the native styles by default.</li>
</ol>
</div>
</div>
<div class="ac l50">
<div class="pl-20">
<img src="assets/images/Layer-css.png">
</div>
<div class="pl-20">
<h3 class="font-weight-300 light-blue darken-3">Cons</h3>
<ol class="pt-5 font-weight-300 font-size-17 line-height-27 aione-align-justify" style="list-style: disc;">
<li>It is a sensible by default. </li>
<li> Recommended especially for mobile users only.</li>
</ol>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<!-- .wrapper -->
</div>
<!-- .aione-content -->
</div>
<!-- .wrapper -->
</div>
<div id="aione_footer" class="aione-footer dark load-template ">
</div>
<!-- .aione-footer -->
<div id="aione_copyright" class="aione-copyright dark load-template">
</div>
<!-- .aione-copyright -->
</div>
</div>
<!-- Core-->
<script type="text/javascript" src="https://cdn.aioneframework.com/assets/js/vendor.min.js"></script>
<script type="text/javascript" src="https://cdn.aioneframework.com/assets/js/aione.min.js"></script>
<!-- Google Analytics-->
<script type="text/javascript" src="assets/js/ga.min.js"></script>
<style type="text/css">
.tabs.tabs-transparent .tab a{color:#333}.page-home .aione-header{position:absolute;top:0;width:100%;z-index:9999;background-color:transparent}.aione-nav.horizontal{border-bottom:none}.aione-nav ul li a{padding:0 12px;font-size:18px}.aione-main{padding-top:0}.aione-page-content{margin:0;min-height:200px}.aione-footer{margin:0;border-top:none}.aione-footer.dark{background-color:#23282d}.aione-copyright{margin:0;border-top:none}.aione-copyright.dark{background-color:#121519}.intro{min-height:450px;height:100vh;background-color:#e6e6f2;background-image:url(https://cdn.aioneframework.com/assets/images/aione-framework-website-background.jpg);background-position:right bottom;background-size:contain;background-repeat:no-repeat}.intro-content{position:absolute;top:34%;left:5%;width:60%;z-index:9999;background-color:transparent}.oxo-color{color:#168dc5}.oxo-color:hover{color:#1570a6}.primary-color{color:#1570a6}.secondary-color{color:#414043}.section-ilivedesign{background-image:url(https://cdn.aioneframework.com/assets/images/oxo_bg.svg);background-repeat:repeat;background-position:0 0;background-color:#fff}.section-ilivedesign .aione-icon.animated{display:inline-block;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;animation-iteration-count:infinite}
}
</style>
<script type="text/javascript">
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/serviceworker.js', { scope: '/' }).then(function(reg) {
if(reg.installing) {
//console.log('Service worker installing');
} else if(reg.waiting) {
//console.log('Service worker installed');
} else if(reg.active) {
//console.log('Service worker active');
}
}).catch(function(error) {
//console.log('Registration failed with ' + error);
});
}
</script>
</body>
</html>