-
Notifications
You must be signed in to change notification settings - Fork 13
/
index.html
159 lines (131 loc) · 5.86 KB
/
index.html
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
---
layout: default
---
<div class="header header--secondary">
<div class="o-container o-container--xlarge">
<div class="o-grid o-grid--wrap o-grid--small-full o-grid--medium-full">
<div class="o-grid__cell o-grid__cell--width-100">
<h2 class="c-heading c-heading--large">What makes Blaze different?</h2>
<p class="c-paragraph">
Blaze fills the gap between monolithic frameworks like Bootstrap, UIKit and Semantic, and "micro" ones
such as Skeleton, Milligram and Min.
</p>
</div>
<div class="o-grid__cell o-grid__cell--width-25 u-window-box--super">
<i class="fa fa-hand-paper-o fa-5x" style="color:#8bc8f9"></i>
<h3 class="c-heading c-heading--medium">Opt-in</h3>
<p class="c-paragraph">
Blaze won't automatically take control of any of your design unless you want it to
</p>
</div>
<div class="o-grid__cell o-grid__cell--width-25 u-letter-box--super">
<i class="fa fa-table fa-5x" style="color:#d3eafd"></i>
<h3 class="c-heading c-heading--medium">More than just a grid</h3>
<p class="c-paragraph">
Mirco-frameworks tend to sacrifice a lot of usefulness for the file size, leaving the developer wanting more
</p>
</div>
<div class="o-grid__cell o-grid__cell--width-25 u-letter-box--super">
<i class="fa fa-hand-peace-o fa-5x" style="color:#0c80df"></i>
<h3 class="c-heading c-heading--medium">Un-opinionated</h3>
<p class="c-paragraph">
Large frameworks usually give you more than you even need, and with the added weight comes an opinionated solution
</p>
</div>
<div class="o-grid__cell o-grid__cell--width-25 u-window-box--super">
<i class="fa fa-play fa-5x" style="color:#085796;transform:rotate(90deg)"></i>
<h3 class="c-heading c-heading--medium">BEM and ITCSS</h3>
<p class="c-paragraph">
Blaze follows <span class="c-text--loud">BEM</span> and <span class="c-text--loud">Inverted Triangle</span> naming conventions to give meaning and context to our selectors
</p>
</div>
<div class="o-grid__cell o-grid__cell--width-100">
<p class="c-paragraph">
It all depends on your situation and what problem you're trying to solve but we think Blaze can provide you
with the best of both worlds.
</p>
</div>
</div>
</div>
</div>
<div class="header header--secondary header--white">
<div class="o-container o-container--xlarge">
<div class="o-grid o-grid--wrap o-grid--small-full o-grid--medium-full">
<div class="o-grid__cell o-grid__cell--width-100">
<h2 class="c-heading c-heading--large">
Components<br>
<i class="fa fa-sliders" style="color:#0c80df"></i>
<i class="fa fa-toggle-on pillar-box--small" style="color:#8bc8f9"></i>
<i class="fa fa-calendar" style="color:#085796"></i>
</h2>
<p class="c-paragraph">
Blaze is a comprehensive starting point for any website. Our components provide great structure, designed to help you
improve your development speed it has a shallow learning curve and intuitive naming conventions.
</p>
</div>
<div class="o-grid__cell o-grid__cell--width-25 u-window-box--super">
<i class="fa fa-tablet fa-2x" style="color:#d3eafd"></i>
<i class="fa fa-laptop fa-3x" style="color:#8bc8f9"></i>
<i class="fa fa-desktop fa-5x" style="color:#085796"></i>
<h3 class="c-heading c-heading--medium">Responsive</h3>
<p class="c-paragraph">
Built with a mobile first approach Blaze is fully responsive
</p>
</div>
<div class="o-grid__cell o-grid__cell--width-25 u-letter-box--super">
<i class="fa fa-sitemap fa-5x" style="color:#d3eafd"></i>
<h3 class="c-heading c-heading--medium">Modular</h3>
<p class="c-paragraph">
You can use any part of Blaze in isolation to make your payload small and focused
</p>
</div>
<div class="o-grid__cell o-grid__cell--width-25 u-letter-box--super">
<i class="fa fa-gears fa-5x" style="color:#0c80df"></i>
<h3 class="c-heading c-heading--medium">Custom builds</h3>
<p class="c-paragraph">
In 3 easy steps you can have a custom build with easy to use variables and mixins
</p>
</div>
<div class="o-grid__cell o-grid__cell--width-25 u-letter-box--super">
<i class="fa fa-balance-scale fa-5x" style="color:#085796"></i>
<h3 class="c-heading c-heading--medium">Small size</h3>
<p class="o-paragraph">
It might only be {{ site.size }} but its complete and easy to use
</p>
</div>
</div>
</div>
</div>
<div class="header header--secondary header--inverted">
<div class="o-container o-container--xlarge">
<div class="o-grid o-grid--wrap o-grid--small-full o-grid--medium-full">
<div class="o-grid__cell o-grid__cell--width-100">
<h2 class="c-heading c-heading--large">Open Source</h2>
<p class="c-paragraph">
Blaze is open source, free and always will be. Pull Requests, suggestions or comments are all welcome and valued.
</p>
</div>
<div class="o-grid__cell o-grid__cell--width-33 u-letter-box--super">
<i class="fa fa-github-alt fa-5x" style="color:#8bc8f9"></i>
<h3 class="c-heading c-heading--medium">Hosted on Github</h3>
<p class="c-paragraph">
Our project (and this website) is hosted on Github. Blaze <i class="fa fa-heart" style="color:#ef4f52"></i> Github!
</p>
</div>
<div class="o-grid__cell o-grid__cell--width-33 u-letter-box--super">
<i class="fa fa-gavel fa-5x" style="color:#d3eafd"></i>
<h3 class="c-heading c-heading--medium">MIT Licence</h3>
<p class="c-paragraph">
You can benefit from using Blaze in your own way
</p>
</div>
<div class="o-grid__cell o-grid__cell--width-33 u-letter-box--super">
<i class="fa fa-code-fork fa-5x" style="color:#0c80df"></i>
<h3 class="c-heading c-heading--medium">Contributing</h3>
<p class="c-paragraph">
Blaze will thrive on contributions from the open source community, so get forking!
</p>
</div>
</div>
</div>
</div>