-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (122 loc) · 3.96 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>initstyle | CSS Grid</title>
<meta name="description" content="Simplest CSS Grid System Based on Flexbox." />
<link rel="stylesheet" href="build/styles.css" />
<link rel="stylesheet" href="css/prism.css" />
<link rel="stylesheet" href="css/theme.css" />
</head>
<body>
<nav>
<div class="container">
<div class="row">
<div class="col">
<img src="./images/logo-violet.png" alt="initstyle" class="logo" />
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col xs-12 sm-12 md-7 lg-5">
<h1>Responsive and lightweight grid for your sites with initstyle</h1>
<p>
For now, initstyle is a simplest grid system based on Flexbox. Coming soon will be a css framework with components and classes.
</p>
</div>
<div class="col xs-12 sm-12 md-5 lg-7"></div>
</div>
<div class="row">
<div class="col">
<h3>Basic example</h3>
<pre><code class="language-html"><div class="row">
<div class="col xs-12 sm-4 md-3 lg-4">
<div class="block"></div>
</div>
<div class="col xs-12 sm-8 md-4 lg-4">
<div class="block"></div>
</div>
<div class="col xs-12 sm-12 md-5 lg-4">
<div class="block"></div>
</div>
<div class="col xs-12 sm-7 md-4 lg-2">
<div class="block"></div>
</div>
<div class="col xs-12 sm-5 md-5 lg-5">
<div class="block"></div>
</div>
<div class="col xs-12 sm-12 md-3 lg-5">
<div class="block"></div>
</div>
</div></code></pre>
</div>
<div class="col xs-12 sm-4 md-3 lg-4">
<div class="block"></div>
</div>
<div class="col xs-12 sm-8 md-4 lg-4">
<div class="block"></div>
</div>
<div class="col xs-12 sm-12 md-5 lg-4">
<div class="block"></div>
</div>
<div class="col xs-12 sm-7 md-4 lg-2">
<div class="block"></div>
</div>
<div class="col xs-12 sm-5 md-5 lg-5">
<div class="block"></div>
</div>
<div class="col xs-12 sm-12 md-3 lg-5">
<div class="block"></div>
</div>
</div>
<div class="row">
<div class="col">
<h3>Documentation</h3>
<p>
You must specify the four available sizes (<i>lg > 992px, md <= 992px, sm <= 768px, xs <= 576px</i>)
</p>
<p>
<b>Example:</b> <i>xs-12 sm-12 md-5 lg-4</i>
</p>
<p>
There should always be an element with class '<b>row</b>' that surrounds the columns, which will always contain the '<b>col</b>' class.
</p>
<pre><code class="language-html"><div class="row">
<div class="col">
col with full width
</div>
<div class="col xs-12 sm-6 md-7 lg-8">
<div class="block"></div>
</div>
<div class="col xs-12 sm-6 md-5 lg-4">
<div class="block"></div>
</div>
</div></code></pre>
<p class="t30">
<b>Note:</b> The grid system allows up to 12 columns across the page.
</p>
</div>
</div>
<div class="row wrapper-download">
<div class="col">
<h3>How to use</h3>
To use, just <a href="https://raw.githubusercontent.com/Mathiew82/initstyle/master/build/styles.css">download</a> and add the file to your project
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col">
<strong>initstyle <span id="year"></span></strong> - Simplest CSS Grid System Based on Flexbox.
</div>
</div>
</div>
</footer>
<script src="js/app.js"></script>
<script src="js/prism.js"></script>
</body>
</html>