gluhu 0.0.7 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +2 -4
- data/lib/gluhu.rb +1 -1
- data/stylesheets/gluhu/_grid.scss +28 -35
- data/stylesheets/gluhu/_variables.scss +3 -11
- data/templates/project/gluhu-example.html +39 -6
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 12cb451c587ff8bac160a16a7d3b420211e37b07
|
|
4
|
+
data.tar.gz: 6fc04cdaef082830d5f4516916bbfdb513bef275
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 742ff81eefaaebf907b12f580086a423a171e72ed1fe40d723187c7a0157bf07f507e5fa6b3f2270b867f2d8076aabd1c6c6185b160136b4795eeca8d8c4b571
|
|
7
|
+
data.tar.gz: 83110ca75e8ca6bef817effca16561e384d81f7cfe9f9d36ead389ef2584e221e821f92e5a04acf7031ed210ba420ecfecad10a25f659ea41110b4076c521f48
|
data/README.md
CHANGED
|
@@ -8,11 +8,9 @@ Features
|
|
|
8
8
|
|
|
9
9
|
### Grid system
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
Responsive grid. You can define as many columns as you need, customize the breakpoint and define the container width.
|
|
12
12
|
|
|
13
|
-
Columns sit inside of a row.
|
|
14
|
-
|
|
15
|
-
Maximum 10 columns in a row.
|
|
13
|
+
Columns sit inside of a row.
|
|
16
14
|
|
|
17
15
|
``` HTML
|
|
18
16
|
|
data/lib/gluhu.rb
CHANGED
|
@@ -3,12 +3,10 @@
|
|
|
3
3
|
max-width: $max-width;
|
|
4
4
|
margin: 0 auto;
|
|
5
5
|
@include clearfix;
|
|
6
|
+
&:after {
|
|
7
|
+
@include clearfix;
|
|
8
|
+
}
|
|
6
9
|
}
|
|
7
|
-
|
|
8
|
-
.container:after {
|
|
9
|
-
@include clearfix;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
10
|
.row:after {
|
|
13
11
|
@include clearfix;
|
|
14
12
|
}
|
|
@@ -20,39 +18,34 @@
|
|
|
20
18
|
width:100%;
|
|
21
19
|
}
|
|
22
20
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}
|
|
42
|
-
.column-7 {
|
|
43
|
-
width: $column-7-width;
|
|
44
|
-
}
|
|
45
|
-
.column-8 {
|
|
46
|
-
width: $column-8-width;
|
|
47
|
-
}
|
|
48
|
-
.column-9 {
|
|
49
|
-
width: $column-9-width;
|
|
50
|
-
}
|
|
51
|
-
.column-10 {
|
|
52
|
-
width: $column-10-width;
|
|
21
|
+
[class*='column-offset'] {
|
|
22
|
+
display:none;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@mixin columns() {
|
|
26
|
+
@for $i from 1 through $column-count {
|
|
27
|
+
.column-#{$i} {
|
|
28
|
+
width: ($i / $column-count) * 100%;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@mixin column-offset() {
|
|
34
|
+
@for $i from 1 through $column-count {
|
|
35
|
+
.column-offset-#{$i} {
|
|
36
|
+
margin-left: ($i / $column-count) * 100%;
|
|
37
|
+
display:initial;
|
|
38
|
+
}
|
|
53
39
|
}
|
|
54
40
|
}
|
|
55
41
|
|
|
42
|
+
@media (min-width:$breakpoint-width) {
|
|
43
|
+
|
|
44
|
+
@include columns;
|
|
45
|
+
|
|
46
|
+
@include column-offset;
|
|
47
|
+
}
|
|
48
|
+
|
|
56
49
|
.example-block {
|
|
57
50
|
background-color: #000;
|
|
58
51
|
width:100%;
|
|
@@ -1,18 +1,10 @@
|
|
|
1
1
|
/* Grid ================ */
|
|
2
2
|
|
|
3
|
-
$max-width:
|
|
3
|
+
$max-width: 1200px !default;
|
|
4
4
|
$container-width:90% !default;
|
|
5
5
|
$breakpoint-width: 992px !default;
|
|
6
|
-
$column-
|
|
7
|
-
$column-
|
|
8
|
-
$column-3-width: 30% !default;
|
|
9
|
-
$column-4-width: 40% !default;
|
|
10
|
-
$column-5-width: 50% !default;
|
|
11
|
-
$column-6-width: 60% !default;
|
|
12
|
-
$column-7-width: 70% !default;
|
|
13
|
-
$column-8-width: 80% !default;
|
|
14
|
-
$column-9-width: 90% !default;
|
|
15
|
-
$column-10-width: 100% !default;
|
|
6
|
+
$column-width: 10% !default;
|
|
7
|
+
$column-count: 12 !default;
|
|
16
8
|
$column-padding: 10px !default;
|
|
17
9
|
|
|
18
10
|
/* typography =============== */
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html>
|
|
3
3
|
<head>
|
|
4
|
-
<title>Gluhu</title>
|
|
4
|
+
<title>Gluhu Test</title>
|
|
5
5
|
<!-- Add gluhu stylesheet here -->
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
7
|
+
<link rel="stylesheet" type="text/css" href="stylesheets/gluhu-test.css">
|
|
7
8
|
</head>
|
|
8
9
|
<body>
|
|
9
10
|
|
|
@@ -13,7 +14,7 @@
|
|
|
13
14
|
|
|
14
15
|
<div class="row">
|
|
15
16
|
|
|
16
|
-
<div class="column-
|
|
17
|
+
<div class="column-4">
|
|
17
18
|
|
|
18
19
|
<h2 class="h2-logo">Gluhu</h2>
|
|
19
20
|
|
|
@@ -22,6 +23,10 @@
|
|
|
22
23
|
<p class="sr-only">Menu</p>
|
|
23
24
|
</button>
|
|
24
25
|
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<div class="navigation-container">
|
|
29
|
+
|
|
25
30
|
<nav class="navigation">
|
|
26
31
|
|
|
27
32
|
<ul>
|
|
@@ -125,11 +130,11 @@
|
|
|
125
130
|
|
|
126
131
|
<div class="row">
|
|
127
132
|
|
|
128
|
-
<div class="column-6">
|
|
133
|
+
<div class="column-6 column-offset-2">
|
|
129
134
|
|
|
130
135
|
<div class="example-block">
|
|
131
136
|
|
|
132
|
-
<p class="vertical-center">col-6</p>
|
|
137
|
+
<p class="vertical-center">col-6 with 2 column offset</p>
|
|
133
138
|
|
|
134
139
|
</div>
|
|
135
140
|
|
|
@@ -181,11 +186,39 @@
|
|
|
181
186
|
|
|
182
187
|
<div class="row">
|
|
183
188
|
|
|
184
|
-
<div class="column-10">
|
|
189
|
+
<div class="column-10 column-offset-2">
|
|
190
|
+
|
|
191
|
+
<div class="example-block">
|
|
192
|
+
|
|
193
|
+
<p class="vertical-center">col-10 with 2 column offset</p>
|
|
194
|
+
|
|
195
|
+
</div>
|
|
196
|
+
|
|
197
|
+
</div><!--column-10-->
|
|
198
|
+
|
|
199
|
+
</div><!--row-->
|
|
200
|
+
|
|
201
|
+
<div class="row">
|
|
202
|
+
|
|
203
|
+
<div class="column-11">
|
|
204
|
+
|
|
205
|
+
<div class="example-block">
|
|
206
|
+
|
|
207
|
+
<p class="vertical-center">col-11</p>
|
|
208
|
+
|
|
209
|
+
</div>
|
|
210
|
+
|
|
211
|
+
</div><!--column-10-->
|
|
212
|
+
|
|
213
|
+
</div><!--row-->
|
|
214
|
+
|
|
215
|
+
<div class="row">
|
|
216
|
+
|
|
217
|
+
<div class="column-12">
|
|
185
218
|
|
|
186
219
|
<div class="example-block">
|
|
187
220
|
|
|
188
|
-
<p class="vertical-center">col-
|
|
221
|
+
<p class="vertical-center">col-12</p>
|
|
189
222
|
|
|
190
223
|
</div>
|
|
191
224
|
|