forked from PavelLaptev/tiny-flexbox-grid-system
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
157 lines (157 loc) · 7.9 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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Tiny Flexbox Grid System</title>
<meta name="description" content="Flexbox Grid System">
<meta name="author" content="Pavel Laptev">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="apple-touch-icon" sizes="180x180" href="fav/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="fav/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="fav/favicon-16x16.png">
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/prism.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="wrap">
<div class="header grid">
<div class="header__title col-desk-6 col-tab-10 col-mob-4"><span style="font-size: 3.4rem;">Tiny </span><span style="font-size: 2.7rem;">percentage </span><span style="font-size: 2.5rem;">SCSS </span><span style="font-size: 2.3rem;">flexbox </span><span style="font-size: 2rem;">grid </span><span style="font-size: 1rem;">system</span></div>
<div class="header__menu col-desk-6 col-tab-12">
<ul class="header__menu__item">
<li><a href="#how-to">How To Use</a></li>
<li><a href="grid.scss.zip">Download</a></li>
<li><a href="https://github.com/PavelLaptev/tiny-flexbox-grid-system" target="_blank">Github</a></li>
</ul>
<div class="switcher-wrap"><span class="switcher-wrap__text">Show HTML Layout</span>
<div class="switcher">
<div class="switcher__thumb"></div>
</div>
</div>
</div>
</div>
<div class="grid">
<div class="html-preview col-desk-12">
<pre class="language-html"><code class="language-html"><div class="grid">
<div class="col-desk-12 col-tab-4 col-mob-2"></div>
<div class="col-desk-4 col-tab-5 col-mob-2"></div>
<div class="col-desk-3 col-tab-3 col-mob-4"></div>
<div class="col-desk-2 col-mob-2"></div>
<div class="col-desk-3 col-mob-2"></div>
<div class="col-desk-1 col-mob-2"></div>
<div class="col-desk-4 col-desk-shift-1 col-tab-shift-0 col-tab-6 col-mob-2"></div>
<div class="col-desk-4 col-mob-3"></div>
<div class="col-desk-2 col-mob-1"></div>
<div class="col-desk-1 col-mob-1"></div>
<div class="col-desk-1 col-mob-3"></div>
<div class="col-desk-1 col-mob-1"></div>
<div class="col-desk-2 col-mob-1"></div>
<div class="col-desk-2 col-desk-shift-1 col-tab-shift-0 col-tab-1 col-mob-1"></div>
<div class="col-desk-1 col-tab-7 col-mob-1"></div>
<div class="col-desk-3 col-tab-5 col-mob-4"></div>
</div></code></pre>
</div>
</div>
<div class="grid-preview grid">
<div class="col-desk-12 col-tab-4 col-mob-2">
<div class="g-c" style="background: #8FECF2"></div>
</div>
<div class="col-desk-4 col-tab-5 col-mob-2">
<div class="g-c" style="background: #CCF28F"></div>
</div>
<div class="col-desk-3 col-tab-3 col-mob-4">
<div class="g-c" style="background: #FF6464"></div>
</div>
<div class="col-desk-2 col-mob-2">
<div class="g-c" style="background: #2D42FF"></div>
</div>
<div class="col-desk-3 col-mob-2">
<div class="g-c" style="background: #F2E88F"></div>
</div>
<div class="col-desk-1 col-mob-2">
<div class="g-c" style="background: #FF93C7"></div>
</div>
<div class="col-desk-4 col-desk-shift-1 col-tab-shift-0 col-tab-6 col-mob-2">
<div class="g-c" style="background: #F9F7C5"></div>
</div>
<div class="col-desk-4 col-mob-3">
<div class="g-c" style="background: #4D4D4D"></div>
</div>
<div class="col-desk-2 col-mob-1">
<div class="g-c" style="background: #4FFFD5"></div>
</div>
<div class="col-desk-1 col-mob-1">
<div class="g-c" style="background: #FF93C7"></div>
</div>
<div class="col-desk-1 col-mob-3">
<div class="g-c" style="background: #93EBFF"></div>
</div>
<div class="col-desk-1 col-mob-1">
<div class="g-c" style="background: #FF6464"></div>
</div>
<div class="col-desk-2 col-mob-1">
<div class="g-c" style="background: #FFE81A"></div>
</div>
<div class="col-desk-2 col-desk-shift-1 col-tab-shift-0 col-tab-1 col-mob-1">
<div class="g-c" style="background: #D0C5F9"></div>
</div>
<div class="col-desk-1 col-tab-7 col-mob-1">
<div class="g-c" style="background: #F9F7C5"></div>
</div>
<div class="col-desk-3 col-tab-5 col-mob-4">
<div class="g-c" style="background: #000"></div>
</div>
</div>
<div class="about-section grid">
<h1 class="col-desk-12">Options</h1>
<div class="about-section__option col-desk-4 col-tab-6 col-mob-4">
<h3>Properties in variables</h3>
<p>Adjust any grid props, whatever you like from column size to gutters and columns amount.</p>
</div>
<div class="about-section__option col-desk-4 col-tab-6 col-mob-4">
<h3>Flexible units</h3>
<p>You don't need to thing about the grid or columns flexibility. Grid contains functions that automaticly will translate PX units into `%`.</p>
</div>
<div class="about-section__option col-desk-4 col-tab-6 col-mob-4">
<h3>Shift column option</h3>
<p>If you need to pass one or more columns, shift it, you can use a special class — for instance if you want to pass 2 columns `col-desk-shift-2`.</p>
</div>
<div class="about-section__option col-desk-4 col-tab-6 col-mob-4">
<h3>Nesting Option</h3>
<p>There is two ways for nesting grids. The first option — you can use regular `grid` class for a wrapper and your wrapper will have side margins or you can ise `grid-0` class, this class has all props of the regular `grid` class but with 100% width without side margins.</p>
</div>
<div class="about-section__option col-desk-4 col-tab-6 col-mob-4">
<h3>3 breakpoint</h3>
<p>The grid has 3 breakpoints — for desktop, tablet and mobile. Because all props written as variables you can adjust or even add aditional.</p>
</div>
</div>
<hr>
<div class="about-section grid" id="how-to">
<div class="about-section__option col-desk-6 col-tab-6 col-mob-4">
<h2>Instalation</h2>
<p>Download the grid.css and add it to your HTML.</p><code class="inline-code language-html"><link rel="stylesheet" href="css/grid.css"></code>
</div>
<div class="about-section__option col-desk-6 col-tab-6 col-mob-4">
<h2>Usage</h2>
<p>There are three types of classes to controll your layout. Desktop breakpoint <code class="language-css">class="col-desk-12"</code> Tablet breakpoint <code class="language-css">class="col-tab-12"</code> Mobile breakpoint <code class="language-css">class="col-tab-4"</code>. By default max columnt amount for desktop and tablet is 12 and for mobile is 4, but you can change them in variables.</p>
</div>
<div class="about-section__option col-desk-6 col-tab-6 col-mob-4">
<h2>Avalible variables</h2>
<p>There are also three types of variables, for desktop, tablet and mobile breakpoint.</p>
<pre class="language-css"><code class="language-css">$grid-columns: #px;
$grid-sideMargin: #px;
$grid-gutter: #px;
$grid-breakpoint: #px;</code></pre>
</div>
</div>
<hr>
<div class="grid">
<footer class="col-desk-12 footer">
<p>@2019 <a href="https://pavellaptev.github.io" target="_blank">Laptev Pavel</a></p>
</footer>
</div>
</div>
<script src="js/general.js"></script>
<script src="js/prism.js"></script>
</body>