-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathREADME.html
132 lines (87 loc) · 3.65 KB
/
README.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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1 id="gugus-grid">gugus-grid</h1>
<p>Minimal grid</p>
<p>This is a bare-bones approach for a css-only forntend grid without the fuss and overhead of current frameworks.</p>
<h2 id="customisation">Customisation</h2>
<p>For customisation adjust the following variables:</p>
<pre><code>// all classes are generated from this numer
$baseGrid: 12;
// the gap between the flexbox elements
// (the outer gap is reset by negative margins)
$gridGap: 10px;
</code></pre>
<h2 id="fleboxgrid">Flebox Grid</h2>
<h3 id="basicgrid:">Basic Grid:</h3>
<p>The Basic flexbox grid markup</p>
<pre><code><div class="flexGrid">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</code></pre>
<h3 id="standardisedsizing">Standardised Sizing</h3>
<p>If you want to control the width of the grid elements add classes with a number like so: <code>col{x}</code></p>
<pre><code><div class="flexGrid">
<div class="col1">Column with full width</div>
<div class="col4">Column with 1/4 width</div>
<div class="col">fills the rest of the row</div>
</div>
</code></pre>
<h4 id="responsivegrid">Responsive grid</h4>
<p>Just add media query based classes to your grid:</p>
<pre><code><div class="flexGrid">
<div class="col1 colMd4 colLg6">Column with full width. 1/4 on Md size and 1/6 on Lg size</div>
<div class="col">fills the rest of the row</div>
</div>
</code></pre>
<h3 id="rowcolumns">Row Columns</h3>
<p>You can also define the grid size on the parent element with <code>flexGrid rowCol{x}</code></p>
<pre><code><div class="flexGrid rowCol4">
<div class="col">1/4 column</div>
<div class="col">1/4 column</div>
<div class="col col2">overrides the parent directive/div>
</div>
</code></pre>
<h4 id="responsiverowcolumns">Responsive Row Columns</h4>
<p>You can also add repsonsive row Columns: <code><div class="flexGrid rowCol4 rowColLg4"></code></p>
<h2 id="utilityfirstvs.cssabstraction">Utility first vs. css abstraction</h2>
<p>You can also write the whole thing in scss and use your own classes in the html markup:</p>
<h3 id="columnrow">Column Row</h3>
<pre><code>.yourOwnClass {
@include rowCol(x);
@include rowColSm(x);
@include rowColMd(x);
}
</code></pre>
<h3 id="childelement">Child element</h3>
<pre><code>.yourOwnClass {
@include col(x);
@include colSm(x);
@include coLg(x);
}
</code></pre>
<h2 id="positioning">Positioning</h2>
<p>There are helper classes if you want to position your stuff:</p>
<p>Naming: <code>.{orientation}-{css-directive}</code></p>
<p>Example: <code>x-space-between</code>or <code>y-center</code></p>
<p>Responsive Positioning: <code>.{orientation}-{breakpoint}-{css-directive}</code></p>
<p>Example: <code>x-md-space-between</code>or <code>y-sm-center</code></p>
<pre><code><div class="flexGrid rowCol3 x-space-between">
<div class="col"><p>blabla</p></div>
<div class="col">blabla blabla blabla blabla blabla blabla blabla blabla</div>
</div>
</code></pre>
<p>And as always you can also use your own classes like so:</p>
<pre><code>.yourOwnClass {
@include x(space-between);
@include x-sm(space-evenly);
@include x-lg(center);
}
</code></pre>
</body>
</html>