minimal-mistakes-jekyll 4.6.0 → 4.7.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +26 -0
- data/LICENSE.txt +59 -21
- data/README.md +217 -160
- data/_data/navigation.yml +11 -11
- data/_data/ui-text.yml +931 -888
- data/_includes/analytics-providers/custom.html +2 -2
- data/_includes/analytics-providers/google-universal.html +9 -9
- data/_includes/analytics-providers/google.html +10 -10
- data/_includes/analytics.html +11 -11
- data/_includes/archive-single.html +37 -37
- data/_includes/author-profile-custom-links.html +6 -6
- data/_includes/author-profile.html +249 -249
- data/_includes/base_path +4 -4
- data/_includes/breadcrumbs.html +39 -39
- data/_includes/browser-upgrade.html +2 -2
- data/_includes/category-list.html +25 -25
- data/_includes/comment.html +22 -22
- data/_includes/comments-providers/custom.html +2 -2
- data/_includes/comments-providers/discourse.html +13 -13
- data/_includes/comments-providers/facebook.html +7 -7
- data/_includes/comments-providers/google-plus.html +1 -1
- data/_includes/comments-providers/scripts.html +17 -15
- data/_includes/comments-providers/staticman.html +41 -41
- data/_includes/comments-providers/staticman_v2.html +42 -0
- data/_includes/comments.html +168 -96
- data/_includes/feature_row +49 -49
- data/_includes/figure +12 -12
- data/_includes/footer.html +25 -25
- data/_includes/footer/custom.html +2 -2
- data/_includes/gallery +46 -46
- data/_includes/group-by-array +46 -46
- data/_includes/head.html +42 -42
- data/_includes/head/custom.html +4 -4
- data/_includes/masthead.html +23 -20
- data/_includes/nav_list +46 -46
- data/_includes/page__hero_video.html +4 -4
- data/_includes/page__taxonomy.html +6 -6
- data/_includes/paginator.html +69 -69
- data/_includes/post_pagination.html +13 -13
- data/_includes/read-time.html +14 -14
- data/_includes/scripts.html +15 -15
- data/_includes/seo.html +162 -147
- data/_includes/sidebar.html +22 -22
- data/_includes/social-share.html +13 -13
- data/_includes/tag-list.html +25 -25
- data/_includes/toc +6 -6
- data/_includes/toc.html +75 -0
- data/_includes/video +11 -11
- data/_layouts/archive-taxonomy.html +14 -14
- data/_layouts/archive.html +25 -25
- data/_layouts/compress.html +10 -10
- data/_layouts/default.html +1 -1
- data/_layouts/home.html +11 -11
- data/_layouts/single.html +92 -84
- data/_layouts/splash.html +21 -21
- data/_sass/minimal-mistakes.scss +1 -1
- data/_sass/minimal-mistakes/_animations.scss +20 -20
- data/_sass/minimal-mistakes/_archive.scss +317 -317
- data/_sass/minimal-mistakes/_base.scss +315 -315
- data/_sass/minimal-mistakes/_buttons.scss +97 -97
- data/_sass/minimal-mistakes/_footer.scss +82 -82
- data/_sass/minimal-mistakes/_forms.scss +399 -389
- data/_sass/minimal-mistakes/_masthead.scss +82 -82
- data/_sass/minimal-mistakes/_mixins.scss +91 -91
- data/_sass/minimal-mistakes/_navigation.scss +552 -552
- data/_sass/minimal-mistakes/_notices.scss +99 -99
- data/_sass/minimal-mistakes/_page.scss +430 -430
- data/_sass/minimal-mistakes/_reset.scss +186 -186
- data/_sass/minimal-mistakes/_sidebar.scss +262 -262
- data/_sass/minimal-mistakes/_syntax.scss +286 -146
- data/_sass/minimal-mistakes/_tables.scss +36 -36
- data/_sass/minimal-mistakes/_utilities.scss +519 -519
- data/_sass/minimal-mistakes/_variables.scss +137 -137
- data/_sass/minimal-mistakes/skins/_air.scss +22 -22
- data/_sass/minimal-mistakes/skins/_aqua.scss +30 -0
- data/_sass/minimal-mistakes/skins/_contrast.scss +33 -33
- data/_sass/minimal-mistakes/skins/_dark.scss +23 -23
- data/_sass/minimal-mistakes/skins/_default.scss +5 -5
- data/_sass/minimal-mistakes/skins/_dirt.scss +14 -14
- data/_sass/minimal-mistakes/skins/_mint.scss +22 -22
- data/_sass/minimal-mistakes/skins/_neon.scss +35 -0
- data/_sass/minimal-mistakes/skins/_plum.scss +42 -0
- data/_sass/minimal-mistakes/skins/_sunrise.scss +25 -25
- data/_sass/minimal-mistakes/vendor/breakpoint/_breakpoint.scss +114 -114
- data/_sass/minimal-mistakes/vendor/breakpoint/_context.scss +94 -94
- data/_sass/minimal-mistakes/vendor/breakpoint/_helpers.scss +151 -151
- data/_sass/minimal-mistakes/vendor/breakpoint/_legacy-settings.scss +49 -49
- data/_sass/minimal-mistakes/vendor/breakpoint/_no-query.scss +15 -15
- data/_sass/minimal-mistakes/vendor/breakpoint/_parsers.scss +215 -215
- data/_sass/minimal-mistakes/vendor/breakpoint/_respond-to.scss +82 -82
- data/_sass/minimal-mistakes/vendor/breakpoint/_settings.scss +70 -70
- data/_sass/minimal-mistakes/vendor/breakpoint/parsers/_double.scss +33 -33
- data/_sass/minimal-mistakes/vendor/breakpoint/parsers/_query.scss +82 -82
- data/_sass/minimal-mistakes/vendor/breakpoint/parsers/_resolution.scss +31 -31
- data/_sass/minimal-mistakes/vendor/breakpoint/parsers/_single.scss +26 -26
- data/_sass/minimal-mistakes/vendor/breakpoint/parsers/_triple.scss +36 -36
- data/_sass/minimal-mistakes/vendor/breakpoint/parsers/double/_default-pair.scss +21 -21
- data/_sass/minimal-mistakes/vendor/breakpoint/parsers/double/_default.scss +22 -22
- data/_sass/minimal-mistakes/vendor/breakpoint/parsers/double/_double-string.scss +21 -21
- data/_sass/minimal-mistakes/vendor/breakpoint/parsers/resolution/_resolution.scss +60 -60
- data/_sass/minimal-mistakes/vendor/breakpoint/parsers/single/_default.scss +13 -13
- data/_sass/minimal-mistakes/vendor/breakpoint/parsers/triple/_default.scss +18 -18
- data/_sass/minimal-mistakes/vendor/font-awesome/_animated.scss +34 -34
- data/_sass/minimal-mistakes/vendor/font-awesome/_bordered-pulled.scss +25 -25
- data/_sass/minimal-mistakes/vendor/font-awesome/_core.scss +12 -12
- data/_sass/minimal-mistakes/vendor/font-awesome/_fixed-width.scss +6 -6
- data/_sass/minimal-mistakes/vendor/font-awesome/_font-awesome.scss +18 -18
- data/_sass/minimal-mistakes/vendor/font-awesome/_icons.scss +789 -789
- data/_sass/minimal-mistakes/vendor/font-awesome/_larger.scss +13 -13
- data/_sass/minimal-mistakes/vendor/font-awesome/_list.scss +19 -19
- data/_sass/minimal-mistakes/vendor/font-awesome/_mixins.scss +60 -60
- data/_sass/minimal-mistakes/vendor/font-awesome/_path.scss +15 -15
- data/_sass/minimal-mistakes/vendor/font-awesome/_rotated-flipped.scss +20 -20
- data/_sass/minimal-mistakes/vendor/font-awesome/_screen-reader.scss +5 -5
- data/_sass/minimal-mistakes/vendor/font-awesome/_stacked.scss +20 -20
- data/_sass/minimal-mistakes/vendor/font-awesome/_variables.scss +800 -800
- data/_sass/minimal-mistakes/vendor/magnific-popup/_magnific-popup.scss +649 -649
- data/_sass/minimal-mistakes/vendor/magnific-popup/_settings.scss +45 -45
- data/_sass/minimal-mistakes/vendor/susy/_susy-prefix.scss +13 -13
- data/_sass/minimal-mistakes/vendor/susy/_susy.scss +5 -5
- data/_sass/minimal-mistakes/vendor/susy/plugins/_svg-grid.scss +5 -5
- data/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_prefix.scss +7 -7
- data/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-api.scss +114 -114
- data/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-grid-math.scss +67 -67
- data/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-settings.scss +14 -14
- data/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-unprefix.scss +18 -18
- data/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-utilities.scss +133 -133
- data/_sass/minimal-mistakes/vendor/susy/susy/_api.scss +318 -318
- data/_sass/minimal-mistakes/vendor/susy/susy/_normalize.scss +261 -261
- data/_sass/minimal-mistakes/vendor/susy/susy/_parse.scss +163 -163
- data/_sass/minimal-mistakes/vendor/susy/susy/_settings.scss +329 -329
- data/_sass/minimal-mistakes/vendor/susy/susy/_su-math.scss +441 -441
- data/_sass/minimal-mistakes/vendor/susy/susy/_su-validate.scss +213 -213
- data/_sass/minimal-mistakes/vendor/susy/susy/_syntax-helpers.scss +191 -191
- data/_sass/minimal-mistakes/vendor/susy/susy/_unprefix.scss +56 -56
- data/_sass/minimal-mistakes/vendor/susy/susy/_utilities.scss +167 -167
- data/assets/css/main.scss +7 -7
- data/assets/fonts/fontawesome-webfont.svg +2671 -2671
- data/assets/js/_main.js +72 -72
- data/assets/js/main.min.js +1 -1
- data/assets/js/plugins/jquery.fitvids.js +81 -81
- data/assets/js/plugins/jquery.greedy-navigation.js +77 -77
- metadata +8 -3
@@ -1,163 +1,163 @@
|
|
1
|
-
/// Shorthand Syntax Parser
|
2
|
-
/// =======================
|
3
|
-
/// The syntax parser converts [shorthand syntax][short]
|
4
|
-
/// into a map of settings that can be compared/merged with
|
5
|
-
/// other config maps and global setting.
|
6
|
-
///
|
7
|
-
/// [short]: b-api.html
|
8
|
-
///
|
9
|
-
/// @group x-parser
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
// Parse
|
14
|
-
// -----
|
15
|
-
/// The `parse` function provides all the syntax-sugar in Susy,
|
16
|
-
/// converting user shorthand
|
17
|
-
/// into a usable map of keys and values
|
18
|
-
/// that can be normalized and passed to Su.
|
19
|
-
///
|
20
|
-
/// @group x-parser
|
21
|
-
/// @see $susy
|
22
|
-
///
|
23
|
-
/// @param {list} $shorthand -
|
24
|
-
/// Shorthand expression to define the width of the span,
|
25
|
-
/// optionally containing:
|
26
|
-
/// - a count, length, or column-list span;
|
27
|
-
/// - `at $n`, `first`, or `last` location on asymmetrical grids;
|
28
|
-
/// - `narrow`, `wide`, or `wider` for optionally spreading
|
29
|
-
/// across adjacent gutters;
|
30
|
-
/// - `of $n <spread>` for available grid columns
|
31
|
-
/// and spread of the container
|
32
|
-
/// (span counts like `of 6` are only valid
|
33
|
-
/// in the context of symmetrical grids);
|
34
|
-
/// - and `set-gutters $n` to override global gutter settings
|
35
|
-
/// @param {bool} $context-only [false] -
|
36
|
-
/// Allow the parser to ignore span and span-spread values,
|
37
|
-
/// only parsing context and container-spread.
|
38
|
-
/// This makes it possible to accept spanless values,
|
39
|
-
/// like the `gutters()` syntax.
|
40
|
-
/// When parsing context-only,
|
41
|
-
/// the `of` indicator is optional.
|
42
|
-
///
|
43
|
-
/// @return {map} -
|
44
|
-
/// Map of span and grid settings
|
45
|
-
/// parsed from shorthand input –
|
46
|
-
/// including all the properties available globally –
|
47
|
-
/// `columns`, `gutters`, `spread`, `container-spread` –
|
48
|
-
/// along with the span-specific properties
|
49
|
-
/// `span`, and `location`.
|
50
|
-
///
|
51
|
-
/// @throw
|
52
|
-
/// when a shorthand value is not recognized
|
53
|
-
@function susy-parse(
|
54
|
-
$shorthand,
|
55
|
-
$context-only: false
|
56
|
-
) {
|
57
|
-
$parse-error: 'Unknown shorthand property:';
|
58
|
-
$options: (
|
59
|
-
'first': 'location',
|
60
|
-
'last': 'location',
|
61
|
-
'alpha': 'location',
|
62
|
-
'omega': 'location',
|
63
|
-
'narrow': 'spread',
|
64
|
-
'wide': 'spread',
|
65
|
-
'wider': 'spread',
|
66
|
-
);
|
67
|
-
|
68
|
-
$return: ();
|
69
|
-
$span: null;
|
70
|
-
$columns: null;
|
71
|
-
|
72
|
-
$of: null;
|
73
|
-
$next: false;
|
74
|
-
|
75
|
-
// Allow context-only shorthand, without span
|
76
|
-
@if ($context-only) and (not index($shorthand, 'of')) {
|
77
|
-
@if su-valid-columns($shorthand, 'fail-silent') {
|
78
|
-
$shorthand: 'of' $shorthand;
|
79
|
-
} @else {
|
80
|
-
$shorthand: join('of', $shorthand);
|
81
|
-
}
|
82
|
-
}
|
83
|
-
|
84
|
-
// loop through the shorthand list
|
85
|
-
@for $i from 1 through length($shorthand) {
|
86
|
-
$item: nth($shorthand, $i);
|
87
|
-
$type: type-of($item);
|
88
|
-
$error: false;
|
89
|
-
$details: '[#{$type}] `#{$item}`';
|
90
|
-
|
91
|
-
// if we know what's supposed to be coming next…
|
92
|
-
@if $next {
|
93
|
-
|
94
|
-
// Add to the return map
|
95
|
-
$return: map-merge($return, ($next: $item));
|
96
|
-
|
97
|
-
// Reset next to `false`
|
98
|
-
$next: false;
|
99
|
-
|
100
|
-
} @else { // If we don't know what's supposed to be coming…
|
101
|
-
|
102
|
-
// Keywords…
|
103
|
-
@if ($type == 'string') {
|
104
|
-
// Check the map for keywords…
|
105
|
-
@if map-has-key($options, $item) {
|
106
|
-
$setting: map-get($options, $item);
|
107
|
-
|
108
|
-
// Spread could be on the span or the container…
|
109
|
-
@if ($setting == 'spread') and ($of) {
|
110
|
-
$return: map-merge($return, ('container-spread': $item));
|
111
|
-
} @else {
|
112
|
-
$return: map-merge($return, ($setting: $item));
|
113
|
-
}
|
114
|
-
|
115
|
-
} @else if ($item == 'all') {
|
116
|
-
// `All` is a span shortcut
|
117
|
-
$span: 'all';
|
118
|
-
} @else if ($item == 'at') {
|
119
|
-
// Some keywords setup what's next…
|
120
|
-
$next: 'location';
|
121
|
-
} @else if ($item == 'set-gutters') {
|
122
|
-
$next: 'gutters';
|
123
|
-
} @else if ($item == 'of') {
|
124
|
-
$of: true;
|
125
|
-
} @else {
|
126
|
-
$error: true;
|
127
|
-
}
|
128
|
-
|
129
|
-
} @else if ($type == 'number') or ($type == 'list') { // Numbers & lists…
|
130
|
-
|
131
|
-
@if not ($span or $of) {
|
132
|
-
// We don't have a span, and we're not expecting context…
|
133
|
-
$span: $item;
|
134
|
-
} @else if ($of) and (not $columns) {
|
135
|
-
// We are expecting context…
|
136
|
-
$columns: $item;
|
137
|
-
} @else {
|
138
|
-
$error: true;
|
139
|
-
}
|
140
|
-
|
141
|
-
} @else {
|
142
|
-
$error: true;
|
143
|
-
}
|
144
|
-
}
|
145
|
-
|
146
|
-
@if $error {
|
147
|
-
@return _susy-error('#{$parse-error} #{$details}', 'susy-parse');
|
148
|
-
}
|
149
|
-
}
|
150
|
-
|
151
|
-
// If we have span, merge it in
|
152
|
-
@if $span {
|
153
|
-
$return: map-merge($return, ('span': $span));
|
154
|
-
}
|
155
|
-
|
156
|
-
// If we have columns, merge them in
|
157
|
-
@if $columns {
|
158
|
-
$return: map-merge($return, ('columns': $columns));
|
159
|
-
}
|
160
|
-
|
161
|
-
// Return the map of settings…
|
162
|
-
@return $return;
|
163
|
-
}
|
1
|
+
/// Shorthand Syntax Parser
|
2
|
+
/// =======================
|
3
|
+
/// The syntax parser converts [shorthand syntax][short]
|
4
|
+
/// into a map of settings that can be compared/merged with
|
5
|
+
/// other config maps and global setting.
|
6
|
+
///
|
7
|
+
/// [short]: b-api.html
|
8
|
+
///
|
9
|
+
/// @group x-parser
|
10
|
+
|
11
|
+
|
12
|
+
|
13
|
+
// Parse
|
14
|
+
// -----
|
15
|
+
/// The `parse` function provides all the syntax-sugar in Susy,
|
16
|
+
/// converting user shorthand
|
17
|
+
/// into a usable map of keys and values
|
18
|
+
/// that can be normalized and passed to Su.
|
19
|
+
///
|
20
|
+
/// @group x-parser
|
21
|
+
/// @see $susy
|
22
|
+
///
|
23
|
+
/// @param {list} $shorthand -
|
24
|
+
/// Shorthand expression to define the width of the span,
|
25
|
+
/// optionally containing:
|
26
|
+
/// - a count, length, or column-list span;
|
27
|
+
/// - `at $n`, `first`, or `last` location on asymmetrical grids;
|
28
|
+
/// - `narrow`, `wide`, or `wider` for optionally spreading
|
29
|
+
/// across adjacent gutters;
|
30
|
+
/// - `of $n <spread>` for available grid columns
|
31
|
+
/// and spread of the container
|
32
|
+
/// (span counts like `of 6` are only valid
|
33
|
+
/// in the context of symmetrical grids);
|
34
|
+
/// - and `set-gutters $n` to override global gutter settings
|
35
|
+
/// @param {bool} $context-only [false] -
|
36
|
+
/// Allow the parser to ignore span and span-spread values,
|
37
|
+
/// only parsing context and container-spread.
|
38
|
+
/// This makes it possible to accept spanless values,
|
39
|
+
/// like the `gutters()` syntax.
|
40
|
+
/// When parsing context-only,
|
41
|
+
/// the `of` indicator is optional.
|
42
|
+
///
|
43
|
+
/// @return {map} -
|
44
|
+
/// Map of span and grid settings
|
45
|
+
/// parsed from shorthand input –
|
46
|
+
/// including all the properties available globally –
|
47
|
+
/// `columns`, `gutters`, `spread`, `container-spread` –
|
48
|
+
/// along with the span-specific properties
|
49
|
+
/// `span`, and `location`.
|
50
|
+
///
|
51
|
+
/// @throw
|
52
|
+
/// when a shorthand value is not recognized
|
53
|
+
@function susy-parse(
|
54
|
+
$shorthand,
|
55
|
+
$context-only: false
|
56
|
+
) {
|
57
|
+
$parse-error: 'Unknown shorthand property:';
|
58
|
+
$options: (
|
59
|
+
'first': 'location',
|
60
|
+
'last': 'location',
|
61
|
+
'alpha': 'location',
|
62
|
+
'omega': 'location',
|
63
|
+
'narrow': 'spread',
|
64
|
+
'wide': 'spread',
|
65
|
+
'wider': 'spread',
|
66
|
+
);
|
67
|
+
|
68
|
+
$return: ();
|
69
|
+
$span: null;
|
70
|
+
$columns: null;
|
71
|
+
|
72
|
+
$of: null;
|
73
|
+
$next: false;
|
74
|
+
|
75
|
+
// Allow context-only shorthand, without span
|
76
|
+
@if ($context-only) and (not index($shorthand, 'of')) {
|
77
|
+
@if su-valid-columns($shorthand, 'fail-silent') {
|
78
|
+
$shorthand: 'of' $shorthand;
|
79
|
+
} @else {
|
80
|
+
$shorthand: join('of', $shorthand);
|
81
|
+
}
|
82
|
+
}
|
83
|
+
|
84
|
+
// loop through the shorthand list
|
85
|
+
@for $i from 1 through length($shorthand) {
|
86
|
+
$item: nth($shorthand, $i);
|
87
|
+
$type: type-of($item);
|
88
|
+
$error: false;
|
89
|
+
$details: '[#{$type}] `#{$item}`';
|
90
|
+
|
91
|
+
// if we know what's supposed to be coming next…
|
92
|
+
@if $next {
|
93
|
+
|
94
|
+
// Add to the return map
|
95
|
+
$return: map-merge($return, ($next: $item));
|
96
|
+
|
97
|
+
// Reset next to `false`
|
98
|
+
$next: false;
|
99
|
+
|
100
|
+
} @else { // If we don't know what's supposed to be coming…
|
101
|
+
|
102
|
+
// Keywords…
|
103
|
+
@if ($type == 'string') {
|
104
|
+
// Check the map for keywords…
|
105
|
+
@if map-has-key($options, $item) {
|
106
|
+
$setting: map-get($options, $item);
|
107
|
+
|
108
|
+
// Spread could be on the span or the container…
|
109
|
+
@if ($setting == 'spread') and ($of) {
|
110
|
+
$return: map-merge($return, ('container-spread': $item));
|
111
|
+
} @else {
|
112
|
+
$return: map-merge($return, ($setting: $item));
|
113
|
+
}
|
114
|
+
|
115
|
+
} @else if ($item == 'all') {
|
116
|
+
// `All` is a span shortcut
|
117
|
+
$span: 'all';
|
118
|
+
} @else if ($item == 'at') {
|
119
|
+
// Some keywords setup what's next…
|
120
|
+
$next: 'location';
|
121
|
+
} @else if ($item == 'set-gutters') {
|
122
|
+
$next: 'gutters';
|
123
|
+
} @else if ($item == 'of') {
|
124
|
+
$of: true;
|
125
|
+
} @else {
|
126
|
+
$error: true;
|
127
|
+
}
|
128
|
+
|
129
|
+
} @else if ($type == 'number') or ($type == 'list') { // Numbers & lists…
|
130
|
+
|
131
|
+
@if not ($span or $of) {
|
132
|
+
// We don't have a span, and we're not expecting context…
|
133
|
+
$span: $item;
|
134
|
+
} @else if ($of) and (not $columns) {
|
135
|
+
// We are expecting context…
|
136
|
+
$columns: $item;
|
137
|
+
} @else {
|
138
|
+
$error: true;
|
139
|
+
}
|
140
|
+
|
141
|
+
} @else {
|
142
|
+
$error: true;
|
143
|
+
}
|
144
|
+
}
|
145
|
+
|
146
|
+
@if $error {
|
147
|
+
@return _susy-error('#{$parse-error} #{$details}', 'susy-parse');
|
148
|
+
}
|
149
|
+
}
|
150
|
+
|
151
|
+
// If we have span, merge it in
|
152
|
+
@if $span {
|
153
|
+
$return: map-merge($return, ('span': $span));
|
154
|
+
}
|
155
|
+
|
156
|
+
// If we have columns, merge them in
|
157
|
+
@if $columns {
|
158
|
+
$return: map-merge($return, ('columns': $columns));
|
159
|
+
}
|
160
|
+
|
161
|
+
// Return the map of settings…
|
162
|
+
@return $return;
|
163
|
+
}
|
@@ -1,329 +1,329 @@
|
|
1
|
-
/// Susy3 Configuration
|
2
|
-
/// ===================
|
3
|
-
/// Susy3 has 4 core settings, in a single settings map.
|
4
|
-
/// You'll notice a few differences from Susy2:
|
5
|
-
///
|
6
|
-
/// **Columns** no longer accept a single number, like `12`,
|
7
|
-
/// but use a syntax more similar to the new
|
8
|
-
/// CSS [grid-template-columns][columns] –
|
9
|
-
/// a list of relative sizes for each column on the grid.
|
10
|
-
/// Unitless numbers in Susy act very similar to `fr` units in CSS,
|
11
|
-
/// and the `susy-repeat()` function (similar to the css `repeat()`)
|
12
|
-
/// helps quickly establish equal-width columns.
|
13
|
-
///
|
14
|
-
/// [columns]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
|
15
|
-
///
|
16
|
-
/// - `susy-repeat(12)` will create 12 fluid, equal-width columns
|
17
|
-
/// - `susy-repeat(6, 120px)` will create 6 equal `120px`-wide columns
|
18
|
-
/// - `120px susy-repeat(4) 120px` will create 6 columns,
|
19
|
-
/// the first and last are `120px`,
|
20
|
-
/// while the middle 4 are equal fractions of the remainder.
|
21
|
-
/// Susy will output `calc()` values in order to achieve this.
|
22
|
-
///
|
23
|
-
/// **Gutters** haven't changed –
|
24
|
-
/// a single fraction or explicit width –
|
25
|
-
/// but the `calc()` output feature
|
26
|
-
/// means you can now use any combination of units and fractions
|
27
|
-
/// to create static-gutters on a fluid grid, etc.
|
28
|
-
///
|
29
|
-
/// **Spread** existed in the Susy2 API as a span option,
|
30
|
-
/// and was otherwise handled behind the scenes.
|
31
|
-
/// Now we're giving you full control over all spread issues.
|
32
|
-
/// You can find a more [detailed explanation of spread on the blog][spread].
|
33
|
-
///
|
34
|
-
/// [spread]: http://oddbird.net/2017/06/13/susy-spread/
|
35
|
-
///
|
36
|
-
/// You can access your global settings at any time
|
37
|
-
/// with the `susy-settings()` function,
|
38
|
-
/// or grab a single setting from the global scope
|
39
|
-
/// with `susy-get('columns')`, `susy-get('gutters')` etc.
|
40
|
-
///
|
41
|
-
/// @group a-config
|
42
|
-
/// @link http://oddbird.net/2017/06/13/susy-spread/
|
43
|
-
/// Article: Understanding Spread in Susy3
|
44
|
-
///
|
45
|
-
/// @see $susy
|
46
|
-
/// @see susy-settings
|
47
|
-
/// @see susy-get
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
// Susy
|
52
|
-
// ----
|
53
|
-
/// The grid is defined in a single map variable,
|
54
|
-
/// with four initial properties:
|
55
|
-
/// `columns`, `gutters`, `spread` and `container-spread`.
|
56
|
-
/// Anything you put in the root `$susy` variable map
|
57
|
-
/// will be treated as a global project default.
|
58
|
-
/// You can create similar configuration maps
|
59
|
-
/// under different variable names,
|
60
|
-
/// to override the defaults as-needed.
|
61
|
-
///
|
62
|
-
/// @group a-config
|
63
|
-
/// @type Map
|
64
|
-
///
|
65
|
-
/// @see $_susy-defaults
|
66
|
-
/// @see {function} susy-repeat
|
67
|
-
/// @link
|
68
|
-
/// https://codepen.io/mirisuzanne/pen/EgmJJp?editors=1100
|
69
|
-
/// Spread examples on CodePen
|
70
|
-
///
|
71
|
-
/// @prop {list} columns -
|
72
|
-
/// Columns are described by a list of numbers,
|
73
|
-
/// representing the relative width of each column.
|
74
|
-
/// The syntax is a simplified version of CSS native
|
75
|
-
/// `grid-template-columns`,
|
76
|
-
/// expecting a list of grid-column widths.
|
77
|
-
/// Unitless numbers create fractional fluid columns
|
78
|
-
/// (similar to the CSS-native `fr` unit),
|
79
|
-
/// while length values (united numbers)
|
80
|
-
/// are used to define static columns.
|
81
|
-
/// You can mix-and match units and fractions,
|
82
|
-
/// to create a mixed grid.
|
83
|
-
/// Susy will generate `calc()` values when necessary,
|
84
|
-
/// to make all your units work together.
|
85
|
-
///
|
86
|
-
/// Use the `susy-repeat($count, $value)` function
|
87
|
-
/// to more easily repetative columns,
|
88
|
-
/// similar to the CSS-native `repeat()`.
|
89
|
-
///
|
90
|
-
/// - `susy-repeat(8)`:
|
91
|
-
/// an 8-column, symmetrical, fluid grid.
|
92
|
-
/// <br />Identical to `(1 1 1 1 1 1 1 1)`.
|
93
|
-
/// - `susy-repeat(6, 8em)`:
|
94
|
-
/// a 6-column, symmetrical, em-based grid.
|
95
|
-
/// <br />Identical to `(8em 8em 8em 8em 8em 8em)`.
|
96
|
-
/// - `(300px susy-repeat(4) 300px)`:
|
97
|
-
/// a 6-column, asymmetrical, mixed fluid/static grid
|
98
|
-
/// using `calc()` output.
|
99
|
-
/// <br />Identical to `(300px 1 1 1 1 300px)`.
|
100
|
-
///
|
101
|
-
/// **NOTE** that `12` is no longer a valid 12-column grid definition,
|
102
|
-
/// and you must list all the columns individually
|
103
|
-
/// (or by using the `susy-repeat()` function).
|
104
|
-
///
|
105
|
-
/// @prop {number} gutters -
|
106
|
-
/// Gutters are defined as a single width,
|
107
|
-
/// or fluid ratio, similar to the native-CSS
|
108
|
-
/// `grid-column-gap` syntax.
|
109
|
-
/// Similar to columns,
|
110
|
-
/// gutters can use any valid CSS length unit,
|
111
|
-
/// or unitless numbers to define a relative fraction.
|
112
|
-
///
|
113
|
-
/// - `0.5`:
|
114
|
-
/// a fluid gutter, half the size of a single-fraction column.
|
115
|
-
/// - `1em`:
|
116
|
-
/// a static gutter, `1em` wide.
|
117
|
-
///
|
118
|
-
/// Mix static gutters with fluid columns, or vice versa,
|
119
|
-
/// and Susy will generate the required `calc()` to make it work.
|
120
|
-
///
|
121
|
-
/// @prop {string} spread [narrow] -
|
122
|
-
/// Spread of an element across adjacent gutters:
|
123
|
-
/// either `narrow` (none), `wide` (one), or `wider` (two)
|
124
|
-
///
|
125
|
-
/// - Both spread settings default to `narrow`,
|
126
|
-
/// the most common use-case.
|
127
|
-
/// A `narrow` spread only has gutters *between* columns
|
128
|
-
/// (one less gutter than columns).
|
129
|
-
/// This is how all css-native grids work,
|
130
|
-
/// and most margin-based grid systems.
|
131
|
-
/// - A `wide` spread includes the same number of gutters as columns,
|
132
|
-
/// spanning across a single side-gutter.
|
133
|
-
/// This is how most padding-based grid systems often work,
|
134
|
-
/// and is also useful for pushing and pulling elements into place.
|
135
|
-
/// - The rare `wider` spread includes gutters
|
136
|
-
/// on both sides of the column-span
|
137
|
-
/// (one more gutters than columns).
|
138
|
-
///
|
139
|
-
/// @prop {string} container-spread [narrow] -
|
140
|
-
/// Spread of a container around adjacent gutters:
|
141
|
-
/// either `narrow` (none), `wide` (one), or `wider` (two).
|
142
|
-
/// See `spread` property for details.
|
143
|
-
///
|
144
|
-
/// @since 3.0.0-beta.1 -
|
145
|
-
/// `columns` setting no longer accepts numbers
|
146
|
-
/// (e.g. `12`) for symmetrical fluid grids,
|
147
|
-
/// or the initial `12 x 120px` syntax for
|
148
|
-
/// symmetrical fixed-unit grids.
|
149
|
-
/// Use `susy-repeat(12)` or `susy-repeat(12, 120px)` instead.
|
150
|
-
///
|
151
|
-
/// @example scss - default values
|
152
|
-
/// // 4 symmetrical, fluid columns
|
153
|
-
/// // gutters are 1/4 the size of a column
|
154
|
-
/// // elements span 1 less gutter than columns
|
155
|
-
/// // containers span 1 less gutter as well
|
156
|
-
/// $susy: (
|
157
|
-
/// 'columns': susy-repeat(4),
|
158
|
-
/// 'gutters': 0.25,
|
159
|
-
/// 'spread': 'narrow',
|
160
|
-
/// 'container-spread': 'narrow',
|
161
|
-
/// );
|
162
|
-
///
|
163
|
-
/// @example scss - inside-static gutters
|
164
|
-
/// // 6 symmetrical, fluid columns…
|
165
|
-
/// // gutters are static, triggering calc()…
|
166
|
-
/// // elements span equal columns & gutters…
|
167
|
-
/// // containers span equal columns & gutters…
|
168
|
-
/// $susy: (
|
169
|
-
/// 'columns': susy-repeat(6),
|
170
|
-
/// 'gutters': 0.5em,
|
171
|
-
/// 'spread': 'wide',
|
172
|
-
/// 'container-spread': 'wide',
|
173
|
-
/// );
|
174
|
-
$susy: () !default;
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
// Susy Repeat
|
179
|
-
// -----------
|
180
|
-
/// Similar to the `repeat(<count>, <value>)` function
|
181
|
-
/// that is available in native CSS Grid templates,
|
182
|
-
/// the `susy-repeat()` function helps generate repetative layouts
|
183
|
-
/// by repeating any value a given number of times.
|
184
|
-
/// Where Susy previously allowed `8` as a column definition
|
185
|
-
/// for 8 equal columns, you should now use `susy-repeat(8)`.
|
186
|
-
///
|
187
|
-
/// @group a-config
|
188
|
-
///
|
189
|
-
/// @param {integer} $count -
|
190
|
-
/// The number of repetitions, e.g. `12` for a 12-column grid.
|
191
|
-
/// @param {*} $value [1] -
|
192
|
-
/// The value to be repeated.
|
193
|
-
/// Technically any value can be repeated here,
|
194
|
-
/// but the function exists to repeat column-width descriptions:
|
195
|
-
/// e.g. the default `1` for single-fraction fluid columns,
|
196
|
-
/// `5em` for a static column,
|
197
|
-
/// or even `5em 120px` if you are alternating column widths.
|
198
|
-
///
|
199
|
-
/// @return {list} -
|
200
|
-
/// List of repeated values
|
201
|
-
///
|
202
|
-
/// @example scss
|
203
|
-
/// // 12 column grid, with 5em columns
|
204
|
-
/// $susy: (
|
205
|
-
/// columns: susy-repeat(12, 5em),
|
206
|
-
/// );
|
207
|
-
///
|
208
|
-
/// @example scss
|
209
|
-
/// // asymmetrical 5-column grid
|
210
|
-
/// $susy: (
|
211
|
-
/// columns: 20px susy-repeat(3, 100px) 20px,
|
212
|
-
/// );
|
213
|
-
///
|
214
|
-
/// /* result: #{susy-get('columns')} */
|
215
|
-
@function susy-repeat(
|
216
|
-
$count,
|
217
|
-
$value: 1
|
218
|
-
) {
|
219
|
-
$return: ();
|
220
|
-
|
221
|
-
@for $i from 1 through $count {
|
222
|
-
$return: join($return, $value);
|
223
|
-
}
|
224
|
-
|
225
|
-
@return $return;
|
226
|
-
}
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
// Susy Defaults
|
231
|
-
// -------------
|
232
|
-
/// Configuration map of Susy factory defaults.
|
233
|
-
/// Do not override this map directly –
|
234
|
-
/// use `$susy` for user and project setting overrides.
|
235
|
-
///
|
236
|
-
/// @access private
|
237
|
-
/// @type Map
|
238
|
-
///
|
239
|
-
/// @see $susy
|
240
|
-
///
|
241
|
-
/// @prop {number | list} columns [susy-repeat(4)]
|
242
|
-
/// @prop {number} gutters [0.25]
|
243
|
-
/// @prop {string} spread ['narrow']
|
244
|
-
/// @prop {string} container-spread ['narrow']
|
245
|
-
$_susy-defaults: (
|
246
|
-
'columns': susy-repeat(4),
|
247
|
-
'gutters': 0.25,
|
248
|
-
'spread': 'narrow',
|
249
|
-
'container-spread': 'narrow',
|
250
|
-
);
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
// Susy Settings
|
255
|
-
// -------------
|
256
|
-
/// Return a combined map of Susy settings,
|
257
|
-
/// based on the factory defaults (`$_susy-defaults`),
|
258
|
-
/// user-defined project configuration (`$susy`),
|
259
|
-
/// and any local overrides required –
|
260
|
-
/// such as a configuration map passed into a function.
|
261
|
-
///
|
262
|
-
/// @group a-config
|
263
|
-
///
|
264
|
-
/// @param {maps} $overrides… -
|
265
|
-
/// Optional map override of global configuration settings.
|
266
|
-
/// See `$susy` above for properties.
|
267
|
-
///
|
268
|
-
/// @return {map} -
|
269
|
-
/// Combined map of Susy configuration settings,
|
270
|
-
/// in order of specificity:
|
271
|
-
/// any `$overrides...`,
|
272
|
-
/// then `$susy` project settings,
|
273
|
-
/// and finally the `$_susy-defaults`
|
274
|
-
///
|
275
|
-
/// @example scss - global settings
|
276
|
-
/// @each $key, $value in susy-settings() {
|
277
|
-
/// /* #{$key}: #{$value} */
|
278
|
-
/// }
|
279
|
-
///
|
280
|
-
/// @example scss - local settings
|
281
|
-
/// $local: ('columns': 1 2 3 5 8);
|
282
|
-
///
|
283
|
-
/// @each $key, $value in susy-settings($local) {
|
284
|
-
/// /* #{$key}: #{$value} */
|
285
|
-
/// }
|
286
|
-
@function susy-settings(
|
287
|
-
$overrides...
|
288
|
-
) {
|
289
|
-
$settings: map-merge($_susy-defaults, $susy);
|
290
|
-
|
291
|
-
@each $config in $overrides {
|
292
|
-
$settings: map-merge($settings, $config);
|
293
|
-
}
|
294
|
-
|
295
|
-
@return $settings;
|
296
|
-
}
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
// Susy Get
|
301
|
-
// --------
|
302
|
-
/// Return the current global value of any Susy setting
|
303
|
-
///
|
304
|
-
/// @group a-config
|
305
|
-
///
|
306
|
-
/// @param {string} $key -
|
307
|
-
/// Setting to retrieve from the configuration.
|
308
|
-
///
|
309
|
-
/// @return {*} -
|
310
|
-
/// Value mapped to `$key` in the configuration maps,
|
311
|
-
/// in order of specificity:
|
312
|
-
/// `$susy`, then `$_susy-defaults`
|
313
|
-
///
|
314
|
-
/// @example scss -
|
315
|
-
/// /* columns: #{susy-get('columns')} */
|
316
|
-
/// /* gutters: #{susy-get('gutters')} */
|
317
|
-
@function susy-get(
|
318
|
-
$key
|
319
|
-
) {
|
320
|
-
$settings: susy-settings();
|
321
|
-
|
322
|
-
@if not map-has-key($settings, $key) {
|
323
|
-
@return _susy-error(
|
324
|
-
'There is no Susy setting called `#{$key}`',
|
325
|
-
'susy-get');
|
326
|
-
}
|
327
|
-
|
328
|
-
@return map-get($settings, $key);
|
329
|
-
}
|
1
|
+
/// Susy3 Configuration
|
2
|
+
/// ===================
|
3
|
+
/// Susy3 has 4 core settings, in a single settings map.
|
4
|
+
/// You'll notice a few differences from Susy2:
|
5
|
+
///
|
6
|
+
/// **Columns** no longer accept a single number, like `12`,
|
7
|
+
/// but use a syntax more similar to the new
|
8
|
+
/// CSS [grid-template-columns][columns] –
|
9
|
+
/// a list of relative sizes for each column on the grid.
|
10
|
+
/// Unitless numbers in Susy act very similar to `fr` units in CSS,
|
11
|
+
/// and the `susy-repeat()` function (similar to the css `repeat()`)
|
12
|
+
/// helps quickly establish equal-width columns.
|
13
|
+
///
|
14
|
+
/// [columns]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
|
15
|
+
///
|
16
|
+
/// - `susy-repeat(12)` will create 12 fluid, equal-width columns
|
17
|
+
/// - `susy-repeat(6, 120px)` will create 6 equal `120px`-wide columns
|
18
|
+
/// - `120px susy-repeat(4) 120px` will create 6 columns,
|
19
|
+
/// the first and last are `120px`,
|
20
|
+
/// while the middle 4 are equal fractions of the remainder.
|
21
|
+
/// Susy will output `calc()` values in order to achieve this.
|
22
|
+
///
|
23
|
+
/// **Gutters** haven't changed –
|
24
|
+
/// a single fraction or explicit width –
|
25
|
+
/// but the `calc()` output feature
|
26
|
+
/// means you can now use any combination of units and fractions
|
27
|
+
/// to create static-gutters on a fluid grid, etc.
|
28
|
+
///
|
29
|
+
/// **Spread** existed in the Susy2 API as a span option,
|
30
|
+
/// and was otherwise handled behind the scenes.
|
31
|
+
/// Now we're giving you full control over all spread issues.
|
32
|
+
/// You can find a more [detailed explanation of spread on the blog][spread].
|
33
|
+
///
|
34
|
+
/// [spread]: http://oddbird.net/2017/06/13/susy-spread/
|
35
|
+
///
|
36
|
+
/// You can access your global settings at any time
|
37
|
+
/// with the `susy-settings()` function,
|
38
|
+
/// or grab a single setting from the global scope
|
39
|
+
/// with `susy-get('columns')`, `susy-get('gutters')` etc.
|
40
|
+
///
|
41
|
+
/// @group a-config
|
42
|
+
/// @link http://oddbird.net/2017/06/13/susy-spread/
|
43
|
+
/// Article: Understanding Spread in Susy3
|
44
|
+
///
|
45
|
+
/// @see $susy
|
46
|
+
/// @see susy-settings
|
47
|
+
/// @see susy-get
|
48
|
+
|
49
|
+
|
50
|
+
|
51
|
+
// Susy
|
52
|
+
// ----
|
53
|
+
/// The grid is defined in a single map variable,
|
54
|
+
/// with four initial properties:
|
55
|
+
/// `columns`, `gutters`, `spread` and `container-spread`.
|
56
|
+
/// Anything you put in the root `$susy` variable map
|
57
|
+
/// will be treated as a global project default.
|
58
|
+
/// You can create similar configuration maps
|
59
|
+
/// under different variable names,
|
60
|
+
/// to override the defaults as-needed.
|
61
|
+
///
|
62
|
+
/// @group a-config
|
63
|
+
/// @type Map
|
64
|
+
///
|
65
|
+
/// @see $_susy-defaults
|
66
|
+
/// @see {function} susy-repeat
|
67
|
+
/// @link
|
68
|
+
/// https://codepen.io/mirisuzanne/pen/EgmJJp?editors=1100
|
69
|
+
/// Spread examples on CodePen
|
70
|
+
///
|
71
|
+
/// @prop {list} columns -
|
72
|
+
/// Columns are described by a list of numbers,
|
73
|
+
/// representing the relative width of each column.
|
74
|
+
/// The syntax is a simplified version of CSS native
|
75
|
+
/// `grid-template-columns`,
|
76
|
+
/// expecting a list of grid-column widths.
|
77
|
+
/// Unitless numbers create fractional fluid columns
|
78
|
+
/// (similar to the CSS-native `fr` unit),
|
79
|
+
/// while length values (united numbers)
|
80
|
+
/// are used to define static columns.
|
81
|
+
/// You can mix-and match units and fractions,
|
82
|
+
/// to create a mixed grid.
|
83
|
+
/// Susy will generate `calc()` values when necessary,
|
84
|
+
/// to make all your units work together.
|
85
|
+
///
|
86
|
+
/// Use the `susy-repeat($count, $value)` function
|
87
|
+
/// to more easily repetative columns,
|
88
|
+
/// similar to the CSS-native `repeat()`.
|
89
|
+
///
|
90
|
+
/// - `susy-repeat(8)`:
|
91
|
+
/// an 8-column, symmetrical, fluid grid.
|
92
|
+
/// <br />Identical to `(1 1 1 1 1 1 1 1)`.
|
93
|
+
/// - `susy-repeat(6, 8em)`:
|
94
|
+
/// a 6-column, symmetrical, em-based grid.
|
95
|
+
/// <br />Identical to `(8em 8em 8em 8em 8em 8em)`.
|
96
|
+
/// - `(300px susy-repeat(4) 300px)`:
|
97
|
+
/// a 6-column, asymmetrical, mixed fluid/static grid
|
98
|
+
/// using `calc()` output.
|
99
|
+
/// <br />Identical to `(300px 1 1 1 1 300px)`.
|
100
|
+
///
|
101
|
+
/// **NOTE** that `12` is no longer a valid 12-column grid definition,
|
102
|
+
/// and you must list all the columns individually
|
103
|
+
/// (or by using the `susy-repeat()` function).
|
104
|
+
///
|
105
|
+
/// @prop {number} gutters -
|
106
|
+
/// Gutters are defined as a single width,
|
107
|
+
/// or fluid ratio, similar to the native-CSS
|
108
|
+
/// `grid-column-gap` syntax.
|
109
|
+
/// Similar to columns,
|
110
|
+
/// gutters can use any valid CSS length unit,
|
111
|
+
/// or unitless numbers to define a relative fraction.
|
112
|
+
///
|
113
|
+
/// - `0.5`:
|
114
|
+
/// a fluid gutter, half the size of a single-fraction column.
|
115
|
+
/// - `1em`:
|
116
|
+
/// a static gutter, `1em` wide.
|
117
|
+
///
|
118
|
+
/// Mix static gutters with fluid columns, or vice versa,
|
119
|
+
/// and Susy will generate the required `calc()` to make it work.
|
120
|
+
///
|
121
|
+
/// @prop {string} spread [narrow] -
|
122
|
+
/// Spread of an element across adjacent gutters:
|
123
|
+
/// either `narrow` (none), `wide` (one), or `wider` (two)
|
124
|
+
///
|
125
|
+
/// - Both spread settings default to `narrow`,
|
126
|
+
/// the most common use-case.
|
127
|
+
/// A `narrow` spread only has gutters *between* columns
|
128
|
+
/// (one less gutter than columns).
|
129
|
+
/// This is how all css-native grids work,
|
130
|
+
/// and most margin-based grid systems.
|
131
|
+
/// - A `wide` spread includes the same number of gutters as columns,
|
132
|
+
/// spanning across a single side-gutter.
|
133
|
+
/// This is how most padding-based grid systems often work,
|
134
|
+
/// and is also useful for pushing and pulling elements into place.
|
135
|
+
/// - The rare `wider` spread includes gutters
|
136
|
+
/// on both sides of the column-span
|
137
|
+
/// (one more gutters than columns).
|
138
|
+
///
|
139
|
+
/// @prop {string} container-spread [narrow] -
|
140
|
+
/// Spread of a container around adjacent gutters:
|
141
|
+
/// either `narrow` (none), `wide` (one), or `wider` (two).
|
142
|
+
/// See `spread` property for details.
|
143
|
+
///
|
144
|
+
/// @since 3.0.0-beta.1 -
|
145
|
+
/// `columns` setting no longer accepts numbers
|
146
|
+
/// (e.g. `12`) for symmetrical fluid grids,
|
147
|
+
/// or the initial `12 x 120px` syntax for
|
148
|
+
/// symmetrical fixed-unit grids.
|
149
|
+
/// Use `susy-repeat(12)` or `susy-repeat(12, 120px)` instead.
|
150
|
+
///
|
151
|
+
/// @example scss - default values
|
152
|
+
/// // 4 symmetrical, fluid columns
|
153
|
+
/// // gutters are 1/4 the size of a column
|
154
|
+
/// // elements span 1 less gutter than columns
|
155
|
+
/// // containers span 1 less gutter as well
|
156
|
+
/// $susy: (
|
157
|
+
/// 'columns': susy-repeat(4),
|
158
|
+
/// 'gutters': 0.25,
|
159
|
+
/// 'spread': 'narrow',
|
160
|
+
/// 'container-spread': 'narrow',
|
161
|
+
/// );
|
162
|
+
///
|
163
|
+
/// @example scss - inside-static gutters
|
164
|
+
/// // 6 symmetrical, fluid columns…
|
165
|
+
/// // gutters are static, triggering calc()…
|
166
|
+
/// // elements span equal columns & gutters…
|
167
|
+
/// // containers span equal columns & gutters…
|
168
|
+
/// $susy: (
|
169
|
+
/// 'columns': susy-repeat(6),
|
170
|
+
/// 'gutters': 0.5em,
|
171
|
+
/// 'spread': 'wide',
|
172
|
+
/// 'container-spread': 'wide',
|
173
|
+
/// );
|
174
|
+
$susy: () !default;
|
175
|
+
|
176
|
+
|
177
|
+
|
178
|
+
// Susy Repeat
|
179
|
+
// -----------
|
180
|
+
/// Similar to the `repeat(<count>, <value>)` function
|
181
|
+
/// that is available in native CSS Grid templates,
|
182
|
+
/// the `susy-repeat()` function helps generate repetative layouts
|
183
|
+
/// by repeating any value a given number of times.
|
184
|
+
/// Where Susy previously allowed `8` as a column definition
|
185
|
+
/// for 8 equal columns, you should now use `susy-repeat(8)`.
|
186
|
+
///
|
187
|
+
/// @group a-config
|
188
|
+
///
|
189
|
+
/// @param {integer} $count -
|
190
|
+
/// The number of repetitions, e.g. `12` for a 12-column grid.
|
191
|
+
/// @param {*} $value [1] -
|
192
|
+
/// The value to be repeated.
|
193
|
+
/// Technically any value can be repeated here,
|
194
|
+
/// but the function exists to repeat column-width descriptions:
|
195
|
+
/// e.g. the default `1` for single-fraction fluid columns,
|
196
|
+
/// `5em` for a static column,
|
197
|
+
/// or even `5em 120px` if you are alternating column widths.
|
198
|
+
///
|
199
|
+
/// @return {list} -
|
200
|
+
/// List of repeated values
|
201
|
+
///
|
202
|
+
/// @example scss
|
203
|
+
/// // 12 column grid, with 5em columns
|
204
|
+
/// $susy: (
|
205
|
+
/// columns: susy-repeat(12, 5em),
|
206
|
+
/// );
|
207
|
+
///
|
208
|
+
/// @example scss
|
209
|
+
/// // asymmetrical 5-column grid
|
210
|
+
/// $susy: (
|
211
|
+
/// columns: 20px susy-repeat(3, 100px) 20px,
|
212
|
+
/// );
|
213
|
+
///
|
214
|
+
/// /* result: #{susy-get('columns')} */
|
215
|
+
@function susy-repeat(
|
216
|
+
$count,
|
217
|
+
$value: 1
|
218
|
+
) {
|
219
|
+
$return: ();
|
220
|
+
|
221
|
+
@for $i from 1 through $count {
|
222
|
+
$return: join($return, $value);
|
223
|
+
}
|
224
|
+
|
225
|
+
@return $return;
|
226
|
+
}
|
227
|
+
|
228
|
+
|
229
|
+
|
230
|
+
// Susy Defaults
|
231
|
+
// -------------
|
232
|
+
/// Configuration map of Susy factory defaults.
|
233
|
+
/// Do not override this map directly –
|
234
|
+
/// use `$susy` for user and project setting overrides.
|
235
|
+
///
|
236
|
+
/// @access private
|
237
|
+
/// @type Map
|
238
|
+
///
|
239
|
+
/// @see $susy
|
240
|
+
///
|
241
|
+
/// @prop {number | list} columns [susy-repeat(4)]
|
242
|
+
/// @prop {number} gutters [0.25]
|
243
|
+
/// @prop {string} spread ['narrow']
|
244
|
+
/// @prop {string} container-spread ['narrow']
|
245
|
+
$_susy-defaults: (
|
246
|
+
'columns': susy-repeat(4),
|
247
|
+
'gutters': 0.25,
|
248
|
+
'spread': 'narrow',
|
249
|
+
'container-spread': 'narrow',
|
250
|
+
);
|
251
|
+
|
252
|
+
|
253
|
+
|
254
|
+
// Susy Settings
|
255
|
+
// -------------
|
256
|
+
/// Return a combined map of Susy settings,
|
257
|
+
/// based on the factory defaults (`$_susy-defaults`),
|
258
|
+
/// user-defined project configuration (`$susy`),
|
259
|
+
/// and any local overrides required –
|
260
|
+
/// such as a configuration map passed into a function.
|
261
|
+
///
|
262
|
+
/// @group a-config
|
263
|
+
///
|
264
|
+
/// @param {maps} $overrides… -
|
265
|
+
/// Optional map override of global configuration settings.
|
266
|
+
/// See `$susy` above for properties.
|
267
|
+
///
|
268
|
+
/// @return {map} -
|
269
|
+
/// Combined map of Susy configuration settings,
|
270
|
+
/// in order of specificity:
|
271
|
+
/// any `$overrides...`,
|
272
|
+
/// then `$susy` project settings,
|
273
|
+
/// and finally the `$_susy-defaults`
|
274
|
+
///
|
275
|
+
/// @example scss - global settings
|
276
|
+
/// @each $key, $value in susy-settings() {
|
277
|
+
/// /* #{$key}: #{$value} */
|
278
|
+
/// }
|
279
|
+
///
|
280
|
+
/// @example scss - local settings
|
281
|
+
/// $local: ('columns': 1 2 3 5 8);
|
282
|
+
///
|
283
|
+
/// @each $key, $value in susy-settings($local) {
|
284
|
+
/// /* #{$key}: #{$value} */
|
285
|
+
/// }
|
286
|
+
@function susy-settings(
|
287
|
+
$overrides...
|
288
|
+
) {
|
289
|
+
$settings: map-merge($_susy-defaults, $susy);
|
290
|
+
|
291
|
+
@each $config in $overrides {
|
292
|
+
$settings: map-merge($settings, $config);
|
293
|
+
}
|
294
|
+
|
295
|
+
@return $settings;
|
296
|
+
}
|
297
|
+
|
298
|
+
|
299
|
+
|
300
|
+
// Susy Get
|
301
|
+
// --------
|
302
|
+
/// Return the current global value of any Susy setting
|
303
|
+
///
|
304
|
+
/// @group a-config
|
305
|
+
///
|
306
|
+
/// @param {string} $key -
|
307
|
+
/// Setting to retrieve from the configuration.
|
308
|
+
///
|
309
|
+
/// @return {*} -
|
310
|
+
/// Value mapped to `$key` in the configuration maps,
|
311
|
+
/// in order of specificity:
|
312
|
+
/// `$susy`, then `$_susy-defaults`
|
313
|
+
///
|
314
|
+
/// @example scss -
|
315
|
+
/// /* columns: #{susy-get('columns')} */
|
316
|
+
/// /* gutters: #{susy-get('gutters')} */
|
317
|
+
@function susy-get(
|
318
|
+
$key
|
319
|
+
) {
|
320
|
+
$settings: susy-settings();
|
321
|
+
|
322
|
+
@if not map-has-key($settings, $key) {
|
323
|
+
@return _susy-error(
|
324
|
+
'There is no Susy setting called `#{$key}`',
|
325
|
+
'susy-get');
|
326
|
+
}
|
327
|
+
|
328
|
+
@return map-get($settings, $key);
|
329
|
+
}
|