Skip to content
This repository was archived by the owner on Nov 20, 2020. It is now read-only.

Commit 966ab71

Browse files
mzdrmzdr
committed
Split up code into smaller files and add support for responsive values
1 parent 1c5c9e6 commit 966ab71

6 files changed

+171
-80
lines changed

‎grid.scss

+17-80
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,41 @@
11
/*! {{ name }} v{{ version }} */
22

3-
// Set the number of columns you want to use on your layout.
4-
$grid-columns: 12 !default;
5-
6-
// Set the gutter size between columns.
7-
$grid-gutter-width: 1rem !default;
8-
9-
// Set a margin for the container sides.
10-
$grid-outer-margin: 2rem !default;
11-
12-
// Set the breakpoints for the grid.
13-
$grid-breakpoints: (
14-
xs: null,
15-
sm: 576px,
16-
md: 768px,
17-
lg: 992px,
18-
xl: 1200px
19-
) !default;
20-
21-
// Set the maximum width for the container.
22-
$grid-max-width: 1440px !default;
23-
24-
// Set the prefix for all grid related classes.
25-
$grid-classes-prefix: "grid-" !default;
26-
27-
$half-gutter-width: $grid-gutter-width / 2;
28-
$gutter-compensation: $half-gutter-width * -1;
29-
30-
@mixin grid-breakpoint($name, $size) {
31-
@if $size {
32-
.#{$grid-classes-prefix}container {
33-
&.-#{$name}-fix {
34-
width: $size;
35-
}
36-
}
37-
}
38-
39-
.#{$grid-classes-prefix}row {
40-
&.-#{$name} {
41-
&-start, &-left { justify-content: flex-start; }
42-
&-center { justify-content: center; }
43-
&-end, &-right { justify-content: flex-end; }
44-
&-top { align-items: flex-start; }
45-
&-middle { align-items: center; }
46-
&-bottom { align-items: flex-end; }
47-
&-around { justify-content: space-around; }
48-
&-between { justify-content: space-between; }
49-
}
50-
51-
> .column.-#{$name} {
52-
flex: 1 0 0;
53-
54-
&-first { order: -1; }
55-
&-last { order: 1; }
56-
57-
@for $i from 1 through $grid-columns {
58-
$width: 100% / $grid-columns * $i;
59-
60-
&-#{$i} {
61-
flex-basis: $width;
62-
max-width: $width;
63-
}
64-
}
65-
66-
@for $i from 0 through $grid-columns {
67-
&-offset-#{$i} {
68-
margin-left: if($i == 0, 0, 100% / $grid-columns * $i);
69-
}
70-
}
71-
}
72-
}
73-
}
3+
// Import grid functions/mixins.
4+
@import "src/functions";
5+
@import "src/variables";
6+
@import "src/grid-breakpoint";
7+
@import "src/grid-gutter-width";
8+
@import "src/grid-outer-margin";
749

7510
.#{$grid-classes-prefix}container {
11+
@include grid-outer-margin;
12+
7613
box-sizing: border-box;
7714
margin-left: auto;
7815
margin-right: auto;
7916
width: 100%;
8017

8118
@if $grid-max-width {
82-
&:not(.-no-limit) {
83-
max-width: $grid-max-width;
19+
max-width: $grid-max-width;
20+
21+
&.-no-limit {
22+
max-width: none;
8423
}
8524
}
8625

87-
&:not(.-no-outer) {
88-
padding-left: $grid-outer-margin;
89-
padding-right: $grid-outer-margin;
26+
&.-no-outer {
27+
padding-left: 0;
28+
padding-right: 0;
9029
}
9130
}
9231

9332
.#{$grid-classes-prefix}row {
33+
@include grid-gutter-width;
34+
9435
box-sizing: border-box;
9536
display: flex;
9637
flex: 0 1 auto;
9738
flex-flow: row wrap;
98-
margin-left: $gutter-compensation;
99-
margin-right: $gutter-compensation;
10039

10140
&.-reverse {
10241
flex-direction: row-reverse;
@@ -106,8 +45,6 @@ $gutter-compensation: $half-gutter-width * -1;
10645
box-sizing: border-box;
10746
flex: 0 0 auto;
10847
max-width: 100%;
109-
padding-left: $half-gutter-width;
110-
padding-right: $half-gutter-width;
11148

11249
&.-reverse {
11350
flex-direction: column-reverse;

‎src/_functions.scss

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/// Some of the grid configurations can be sets of values for responsive
2+
/// reasons. Therefore we need a function that returns either the appropriate
3+
/// value at a given breakpoint, or the same value for every call.
4+
///
5+
/// @author Gridonic
6+
/// @param {String} $breakpoint - Breakpoint to get value for.
7+
/// @param {List|Number} $option - Option to look for specific value.
8+
/// @param {Map} $breakpoints - Map of available breakpoints.
9+
/// @return {Number|null}
10+
@function grid-configuration-at($breakpoint, $option, $breakpoints) {
11+
12+
// The given option is not a list or map, return it.
13+
@if index(list map, type-of($option)) == null {
14+
@return $option;
15+
}
16+
17+
// Try to get the index of the requested breakpoint within the breakpoints map.
18+
$index: index(map-keys($grid-breakpoints), $breakpoint);
19+
20+
// No breakpoint found.
21+
@if $index == null {
22+
@return nth($option, 1);
23+
}
24+
25+
// If index is still within the range of the outer margin list,
26+
// return the requested value, otherwise null.
27+
@return if($index <= length($option), nth($option, $index), null);
28+
}
29+
30+
/// Returns the total width for a given column.
31+
@function grid-column-width($i) {
32+
@return 100% / $grid-columns * $i;
33+
}
34+
35+
/// Returns the appropriate outer margin for a given or not given breakpoint.
36+
@function grid-outer-margin($name: null) {
37+
@return grid-configuration-at(
38+
$name,
39+
$grid-outer-margin,
40+
$grid-breakpoints
41+
);
42+
}
43+
44+
/// Returns the appropriate gutter width for a given or not given breakpoint.
45+
@function grid-gutter-width($name: null) {
46+
@return grid-configuration-at(
47+
$name,
48+
$grid-gutter-width,
49+
$grid-breakpoints
50+
);
51+
}

‎src/_grid-breakpoint.scss

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
@mixin grid-breakpoint($name, $size) {
2+
.#{$grid-classes-prefix}container {
3+
@include grid-outer-margin($name);
4+
5+
@if $size {
6+
&.-#{$name}-fix {
7+
width: $size;
8+
}
9+
}
10+
}
11+
12+
.#{$grid-classes-prefix}row {
13+
@include grid-gutter-width($name);
14+
15+
&.-#{$name} {
16+
&-start, &-left { justify-content: flex-start; }
17+
&-center { justify-content: center; }
18+
&-end, &-right { justify-content: flex-end; }
19+
&-top { align-items: flex-start; }
20+
&-middle { align-items: center; }
21+
&-bottom { align-items: flex-end; }
22+
&-around { justify-content: space-around; }
23+
&-between { justify-content: space-between; }
24+
}
25+
26+
> .column.-#{$name} {
27+
flex: 1 0 0;
28+
29+
&-first { order: -1; }
30+
&-last { order: 1; }
31+
32+
@for $i from 1 through $grid-columns {
33+
$width: grid-column-width($i);
34+
35+
&-#{$i} {
36+
flex-basis: $width;
37+
max-width: $width;
38+
}
39+
}
40+
41+
@for $i from 0 to $grid-columns {
42+
&-offset-#{$i} {
43+
margin-left: grid-column-width($i);
44+
}
45+
}
46+
}
47+
}
48+
}

‎src/_grid-gutter-width.scss

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
@mixin grid-gutter-width($name: null) {
2+
$gutter-width: grid-gutter-width($name);
3+
$is-gutter-width-responsive: type-of($grid-gutter-width) != "number";
4+
5+
$is-always: $name == null and $is-gutter-width-responsive == false;
6+
$is-responsive: $name and $is-gutter-width-responsive == true;
7+
8+
@if ($is-always or $is-responsive) and $gutter-width {
9+
$half-gutter-width: $gutter-width / 2;
10+
$gutter-compensation: $half-gutter-width * -1;
11+
12+
margin-left: $gutter-compensation;
13+
margin-right: $gutter-compensation;
14+
15+
> .column {
16+
padding-left: $half-gutter-width;
17+
padding-right: $half-gutter-width;
18+
}
19+
}
20+
}

‎src/_grid-outer-margin.scss

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@mixin grid-outer-margin($name: null) {
2+
$outer-margin: grid-outer-margin($name);
3+
$is-outer-margin-responsive: type-of($grid-outer-margin) != "number";
4+
5+
$is-always: $name == null and $is-outer-margin-responsive == false;
6+
$is-responsive: $name and $is-outer-margin-responsive == true;
7+
8+
@if ($is-always or $is-responsive) and $outer-margin {
9+
padding-left: $outer-margin;
10+
padding-right: $outer-margin;
11+
}
12+
}

‎src/_variables.scss

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// Set the number of columns you want to use on your layout.
2+
$grid-columns: 12 !default;
3+
4+
// Set the gutter size between columns.
5+
$grid-gutter-width: 30px !default;
6+
7+
// Set a margin for the container sides.
8+
$grid-outer-margin: 15px !default;
9+
10+
// Set the breakpoints for the grid.
11+
$grid-breakpoints: (
12+
xs: null,
13+
sm: 576px,
14+
md: 768px,
15+
lg: 992px,
16+
xl: 1200px
17+
) !default;
18+
19+
// Set the maximum width for the container.
20+
$grid-max-width: 1440px !default;
21+
22+
// Set the prefix for all grid related classes.
23+
$grid-classes-prefix: "grid-" !default;

0 commit comments

Comments
 (0)