Skip to content

Commit 895deba

Browse files
dariusrosendahldariusrosendahl
committed
Added $b6 spacers. Max-width images, default links, added and corrected comments
1 parent 78b5f78 commit 895deba

File tree

5 files changed

+115
-70
lines changed

5 files changed

+115
-70
lines changed

‎sass/base/defaults.scss‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
/*
2+
Default site settings
3+
Setting the font-size to 62.5% so we can easily calculate with REM
4+
1REM = 10px (relative pixels)
5+
*/
6+
17
html {
28
background: $color01;
39
font-size: 62.5%;
@@ -7,9 +13,24 @@ html {
713
body {
814
font-size: $font-size-default;
915
line-height: $line-height-default;
10-
}
16+
}
1117

1218
html, button, input, select, textarea {
1319
font-family: $font-pri;
1420
font-weight: normal;
21+
}
22+
23+
/* Max width of images 100% */
24+
img, embed, object {
25+
max-width: 100%;
26+
}
27+
28+
/* Default Links */
29+
a {
30+
text-decoration: underline;
31+
color: $theme01;
32+
}
33+
a:hover {
34+
color: $theme03;
35+
text-decoration: none;
1536
}

‎sass/base/mixins.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
/*========== MIXINS ==========*/
22

33
/*
4-
* Text-overflow: ellipsis
4+
Text-overflow: ellipsis
55
*/
66
@mixin ellipsis(){
77
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
88
}
99

1010
/*
11-
* Ul-reset
12-
* Set margin, padding and list-style to zero/none
11+
Ul-reset
12+
Set margin, padding and list-style to zero/none
1313
*/
1414
@mixin ulreset() {
1515
margin: 0; padding: 0; list-style: none;
@@ -38,7 +38,7 @@
3838
* Generic transform
3939
*/
4040
@mixin transform($transforms) {
41-
transform: $transforms;
41+
transform: $transforms;
4242
}
4343
/*
4444
* Rotate
@@ -51,7 +51,7 @@
5151
* Scale
5252
*/
5353
@mixin scale($scale) {
54-
@include transform(scale($scale));
54+
@include transform(scale($scale));
5555
}
5656

5757
/*
@@ -65,14 +65,14 @@
6565
* translateX
6666
*/
6767
@mixin translateX ($x) {
68-
@include transform(translateX($x));
68+
@include transform(translateX($x));
6969
}
7070

7171
/*
7272
* translateY
7373
*/
7474
@mixin translateY ($y) {
75-
@include transform(translateY($y));
75+
@include transform(translateY($y));
7676
}
7777

7878
/*

‎sass/base/utility_spacers.scss‎

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
/*
2-
Padding
3-
*/
1+
/* Padding */
42

53
.p { padding: $padding-default; }
64
.pt { padding-top: $padding-default; }
@@ -26,9 +24,7 @@
2624
.pl-0 { padding-left: 0; }
2725
.pr-0 { padding-right: 0; }
2826

29-
/*
30-
Margin
31-
*/
27+
/* Margin */
3228
.m { margin: $margin-default; }
3329
.mt { margin-top: $margin-default; }
3430
.mb { margin-bottom: $margin-default; }
@@ -55,9 +51,7 @@
5551

5652
@media only screen and (min-width: $b1) {
5753

58-
/*
59-
Padding
60-
*/
54+
/* Padding */
6155
.p-b1 { padding: $padding-default; }
6256
.pt-b1 { padding-top: $padding-default; }
6357
.pb-b1 { padding-bottom: $padding-default; }
@@ -82,9 +76,7 @@
8276
.pl-b1-0 { padding-left: 0; }
8377
.pr-b1-0 { padding-right: 0; }
8478

85-
/*
86-
Margin
87-
*/
79+
/* Margin */
8880
.m-b1 { margin: $margin-default; }
8981
.mt-b1 { margin-top: $margin-default; }
9082
.mb-b1 { margin-bottom: $margin-default; }
@@ -112,9 +104,7 @@
112104

113105
@media only screen and (min-width: $b2) {
114106

115-
/*
116-
Padding
117-
*/
107+
/* Padding */
118108
.p-b2 { padding: $padding-default; }
119109
.pt-b2 { padding-top: $padding-default; }
120110
.pb-b2 { padding-bottom: $padding-default; }
@@ -139,9 +129,7 @@
139129
.pl-b2-0 { padding-left: 0; }
140130
.pr-b2-0 { padding-right: 0; }
141131

142-
/*
143-
Margin
144-
*/
132+
/* Margin */
145133
.m-b2 { margin: $margin-default; }
146134
.mt-b2 { margin-top: $margin-default; }
147135
.mb-b2 { margin-bottom: $margin-default; }
@@ -169,9 +157,7 @@
169157

170158
@media only screen and (min-width: $b3) {
171159

172-
/*
173-
Padding
174-
*/
160+
/* Padding */
175161
.p-b3 { padding: $padding-default; }
176162
.pt-b3 { padding-top: $padding-default; }
177163
.pb-b3 { padding-bottom: $padding-default; }
@@ -196,9 +182,7 @@
196182
.pl-b3-0 { padding-left: 0; }
197183
.pr-b3-0 { padding-right: 0; }
198184

199-
/*
200-
Margin
201-
*/
185+
/* Margin */
202186
.m-b3 { margin: $margin-default; }
203187

204188
.mt-b3 { margin-top: $margin-default; }
@@ -225,9 +209,7 @@
225209

226210
@media only screen and (min-width: $b4) {
227211

228-
/*
229-
Padding
230-
*/
212+
/* Padding */
231213
.p-b4 { padding: $padding-default; }
232214

233215
.pt-b4 { padding-top: $padding-default; }
@@ -253,9 +235,7 @@
253235
.pl-b4-0 { padding-left: 0; }
254236
.pr-b4-0 { padding-right: 0; }
255237

256-
/*
257-
Margin
258-
*/
238+
/* Margin */
259239
.m-b4 { margin: $margin-default; }
260240

261241
.mt-b4 { margin-top: $margin-default; }
@@ -285,9 +265,7 @@
285265

286266
@media only screen and (min-width: $b5) {
287267

288-
/*
289-
Padding
290-
*/
268+
/* Padding */
291269
.p-b5 { padding: $padding-default; }
292270
.pt-b5 { padding-top: $padding-default; }
293271
.pb-b5 { padding-bottom: $padding-default; }
@@ -312,9 +290,7 @@
312290
.pl-b5-0 { padding-left: 0; }
313291
.pr-b5-0 { padding-right: 0; }
314292

315-
/*
316-
Margin
317-
*/
293+
/* Margin */
318294
.m-b5 { margin: $margin-default; }
319295

320296
.mt-b5 { margin-top: $margin-default; }
@@ -343,9 +319,7 @@
343319

344320
@media only screen and (min-width: $b6) {
345321

346-
/*
347-
Padding
348-
*/
322+
/* Padding */
349323
.p-b6 { padding: $padding-default; }
350324
.pt-b6 { padding-top: $padding-default; }
351325
.pb-b6 { padding-bottom: $padding-default; }
@@ -370,4 +344,30 @@
370344
.pl-b6-0 { padding-left: 0; }
371345
.pr-b6-0 { padding-right: 0; }
372346

347+
/* Margin */
348+
.m-b6 { margin: $margin-default; }
349+
350+
.mt-b6 { margin-top: $margin-default; }
351+
.mb-b6 { margin-bottom: $margin-default; }
352+
.ml-b6 { margin-left: $margin-default; }
353+
.mr-b6 { margin-right: $margin-default; }
354+
355+
.m-b6-2x { margin: $margin-default*2; }
356+
.mt-b6-2x { margin-top: $margin-default*2; }
357+
.mb-b6-2x { margin-bottom: $margin-default*2; }
358+
.ml-b6-2x { margin-left: $margin-default*2; }
359+
.mr-b6-2x { margin-right: $margin-default*2; }
360+
361+
.m-b6-3x { margin: $margin-default*3; }
362+
.mt-b6-3x { margin-top: $margin-default*3; }
363+
.mb-b6-3x { margin-bottom: $margin-default*3; }
364+
.ml-b6-3x { margin-left: $margin-default*3; }
365+
.mr-b6-3x { margin-right: $margin-default*3; }
366+
367+
.m-b6-0 { margin: 0; }
368+
.mt-b6-0 { margin-top: 0; }
369+
.mb-b6-0 { margin-bottom: 0; }
370+
.ml-b6-0 { margin-left: 0; }
371+
.mr-b6-0 { margin-right: 0; }
372+
373373
}

‎sass/base/variables.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
/* Variables
2-
* Add or replace variables in your OWN variables file
2+
Add or replace variables in your OWN variables file
33
*/
44

55
/*
6-
* Base colors
7-
* Color 01 and 02 reservered for white and black
6+
Base colors
7+
Color 01 and 02 reservered for white and black
88
*/
99
$color01: #fff;
1010
$color02: #000;

‎sass/layout/grid.scss‎

Lines changed: 44 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
/*
2-
* Flexbox grid
3-
* Fully Responsive
4-
* Based on understandable breakpoint variables
5-
* Doesn't use columns, but proportions
6-
* Fully fluid with fixed-width gutters
7-
* Fully nestable
8-
* Will fall back to floating for IE9 and below
9-
* Will not work in IE7 and below.
10-
*
2+
Flexbox grid
3+
Fully Responsive
4+
Based on understandable breakpoint variables
5+
Doesn't use columns, but proportions
6+
Fully fluid with fixed-width gutters
7+
Fully nestable
8+
Will fall back to floating for IE9 and below
9+
Will not work in IE7 and below.
1110
*/
1211

1312
$flexbox: true;
@@ -18,7 +17,7 @@ $grid-gutter-b3: $grid-gutter;
1817
$grid-gutter-b4: $grid-gutter;
1918
$grid-gutter-b5: $grid-gutter;
2019

21-
/*========== Grid basis ==========*/
20+
/* Grid basis */
2221

2322
.g {
2423
/* You can turn off flexbox by setting $flex: 0; in the variables; */
@@ -49,8 +48,8 @@ $grid-gutter-b5: $grid-gutter;
4948
&.wrap { flex-wrap: wrap; }
5049
&.nowrap { flex-wrap: nowrap; }
5150

52-
/* ===== Alignment ===== */
53-
51+
/* Alignment */
52+
5453
/* Justify content */
5554
&.jc-flex-start { justify-content: flex-start; }
5655
&.jc-flex-end { justify-content: flex-end; }
@@ -72,10 +71,10 @@ $grid-gutter-b5: $grid-gutter;
7271
&.ac-space-around { align-content: space-around; }
7372
&.ac-space-between { align-content: space-between; }
7473

75-
/* ===== Grid Items =====
76-
* Every direct child within .g is a grid item
77-
* Used to be .gi, the new method is less susceptible to errors
78-
* Every grid item has the standard gutter spacing from $grid-gutter
74+
/* Grid items
75+
Every direct child within .g is a grid item
76+
Used to be .gi, the new method is less susceptible to errors
77+
Every grid item has the standard gutter spacing from $grid-gutter
7978
*/
8079

8180
> * {
@@ -139,7 +138,7 @@ $grid-gutter-b5: $grid-gutter;
139138

140139
}
141140

142-
/*========== Grid widths ==========*/
141+
/* Grid widths */
143142

144143
@for $i from 1 through 12 {
145144
$width: ($i/12) * 100%;
@@ -164,9 +163,6 @@ $grid-gutter-b5: $grid-gutter;
164163
.b0_hide { display: none; }
165164
.b0_show { display: block; }
166165

167-
/*========== /GRID WIDTHS ==========*/
168-
169-
/*========== BREAKPOINTS ==========*/
170166

171167
// $b1
172168
@media only screen and (min-width: $b1) {
@@ -311,6 +307,34 @@ $grid-gutter-b5: $grid-gutter;
311307

312308
.b5_push_none { margin-left: 0; }
313309

310+
.b5_hide { display: none; }
311+
.b5_show {
312+
display: block;
313+
}
314+
}
315+
// $b6
316+
@media only screen and (min-width: $b6) {
317+
318+
@for $i from 1 through 24 {
319+
$width: ($i/24) * 100%;
320+
321+
@if $i < 10 {
322+
.b6_0#{ $i } { width: $width; }
323+
324+
.b6_push_0#{ $i } { margin-left: $width; }
325+
} @else {
326+
327+
.b6_#{ $i } { width: $width; }
328+
329+
.b6_push_#{ $i } { margin-left: $width; }
330+
}
331+
}
332+
333+
.b5_x5 { width: 20%; }
334+
.b5_x7 { width: 14.28571428571429%; }
335+
336+
.b5_push_none { margin-left: 0; }
337+
314338
.b5_hide { display: none; }
315339
.b5_show {
316340
display: block;

0 commit comments

Comments
 (0)