Skip to content
This repository was archived by the owner on Jul 18, 2024. It is now read-only.

Commit e916fea

Browse files
author
Jen Downs
committed
feat(utilities): Added util functions to find fixed and fluid sizing. Updated examples & sketch files to reflect changes.
1 parent 808a657 commit e916fea

File tree

11 files changed

+256
-0
lines changed

11 files changed

+256
-0
lines changed

‎bin/src/scss/_utilities.scss

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
@import "variables";
2+
@import "values";
3+
4+
/// Traverse maps and retrieve deeply nested values.
5+
/// @author Hugo Giraudel
6+
/// @param {map} A sass map.
7+
/// @param {arglist} Any number of keys.
8+
/// @return {*} Nested values or nested map.
9+
@function map-deep-get($map, $keys...) {
10+
@each $key in $keys {
11+
$map: map-get($map, $key);
12+
}
13+
@return $map;
14+
}
15+
16+
/// Function returns the rem value of a given breakpoint.
17+
/// @param {string} An existing breakpoint name (sm, md, lg, amd so on).
18+
/// @return {length} The breakpoint value in rems.
19+
@function getBreakpointValue($breakpointName) {
20+
$breakpointValue: map-deep-get($grid-values, 'breakpoints', $breakpointName, 'breakpoint');
21+
@return $breakpointValue * 1rem;
22+
}
23+
24+
/// Returns a calc() expression that represents a fluid width at a given breakpoint.
25+
/// @param {string} A valid breakpoint (sm, md, lg, xlg, or max)
26+
/// @param {number} The number of columns to span across.
27+
/// @return {length} A calc() expression representing fluid width.
28+
@function getFluidSize($breakpointName, $columns) {
29+
$fluidWidth: 0; // default
30+
31+
$breakpoint: map-deep-get($grid-values, 'breakpoints', $breakpointName);
32+
33+
@if (map-get($breakpoint, columns) != null) {
34+
$columnQuantity: map-get($breakpoint, columns);
35+
$fluidWidth: 100vw / $columnQuantity;
36+
37+
$totalMargin: 0;
38+
@if (map-get($breakpoint, margin) != null) {
39+
$totalMargin: map-get($breakpoint, margin) * 2;
40+
}
41+
42+
$fluidWidth: calc((100vw - #{$totalMargin}) * #{$columns} / #{$columnQuantity});
43+
}
44+
45+
@return $fluidWidth;
46+
}
47+
48+
/// Gets a calculated rem value for a fixed nondimensional unit size.
49+
/// @param {number} Fixed nondimensional units.
50+
/// @return {length} A calculated rem value.
51+
@function getFixedSize($fixedUnit) {
52+
53+
$remValue: 0; // default
54+
55+
@if $fixedUnit != null and $fixedUnit > 0 {
56+
$remValue: $fixedUnit * map-get($grid-values, 'rowHeight') * 1rem;
57+
}
58+
@else {
59+
@error 'The provided value #{$fixedUnit} to getFixedSize() is not a number.'
60+
}
61+
62+
@return $remValue;
63+
}

‎examples/bootstrap/css-gridish/bootstrap-grid.sketch

-3.09 KB
Binary file not shown.

‎examples/bootstrap/css-gridish/scss/_core.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import "functions.scss";
22
@import "mixins.scss";
33
@import "variables.scss";
4+
@import "utilities.scss";
45

56
html {
67
font-size: map-get($grid-values, "rem") * 1px;

‎examples/bootstrap/css-gridish/scss/_utilities.scss

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
@import "variables";
2+
@import "values";
3+
4+
/// Traverse maps and retrieve deeply nested values.
5+
/// @author Hugo Giraudel
6+
/// @param {map} A sass map.
7+
/// @param {arglist} Any number of keys.
8+
/// @return {*} Nested values or nested map.
9+
@function map-deep-get($map, $keys...) {
10+
@each $key in $keys {
11+
$map: map-get($map, $key);
12+
}
13+
@return $map;
14+
}
15+
16+
/// Function returns the rem value of a given breakpoint.
17+
/// @param {string} An existing breakpoint name (sm, md, lg, amd so on).
18+
/// @return {length} The breakpoint value in rems.
19+
@function getBreakpointValue($breakpointName) {
20+
$breakpointValue: map-deep-get($grid-values, 'breakpoints', $breakpointName, 'breakpoint');
21+
@return $breakpointValue * 1rem;
22+
}
23+
24+
/// Returns a calc() expression that represents a fluid width at a given breakpoint.
25+
/// @param {string} A valid breakpoint (sm, md, lg, xlg, or max)
26+
/// @param {number} The number of columns to span across.
27+
/// @return {length} A calc() expression representing fluid width.
28+
@function getFluidSize($breakpointName, $columns) {
29+
$fluidWidth: 0; // default
30+
31+
$breakpoint: map-deep-get($grid-values, 'breakpoints', $breakpointName);
32+
33+
@if (map-get($breakpoint, columns) != null) {
34+
$columnQuantity: map-get($breakpoint, columns);
35+
$fluidWidth: 100vw / $columnQuantity;
36+
37+
$totalMargin: 0;
38+
@if (map-get($breakpoint, margin) != null) {
39+
$totalMargin: map-get($breakpoint, margin) * 2;
40+
}
41+
42+
$fluidWidth: calc((100vw - #{$totalMargin}) * #{$columns} / #{$columnQuantity});
43+
}
44+
45+
@return $fluidWidth;
46+
}
47+
48+
/// Gets a calculated rem value for a fixed nondimensional unit size.
49+
/// @param {number} Fixed nondimensional units.
50+
/// @return {length} A calculated rem value.
51+
@function getFixedSize($fixedUnit) {
52+
53+
$remValue: 0; // default
54+
55+
@if $fixedUnit != null and $fixedUnit > 0 {
56+
$remValue: $fixedUnit * map-get($grid-values, 'rowHeight') * 1rem;
57+
}
58+
@else {
59+
@error 'The provided value #{$fixedUnit} to getFixedSize() is not a number.'
60+
}
61+
62+
@return $remValue;
63+
}

‎examples/carbon/css-gridish/bx-grid.sketch

-3.16 KB
Binary file not shown.

‎examples/carbon/css-gridish/scss/_core.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import "functions.scss";
22
@import "mixins.scss";
33
@import "variables.scss";
4+
@import "utilities.scss";
45

56
html {
67
font-size: map-get($grid-values, "rem") * 1px;

‎examples/carbon/css-gridish/scss/_utilities.scss

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
@import "variables";
2+
@import "values";
3+
4+
/// Traverse maps and retrieve deeply nested values.
5+
/// @author Hugo Giraudel
6+
/// @param {map} A sass map.
7+
/// @param {arglist} Any number of keys.
8+
/// @return {*} Nested values or nested map.
9+
@function map-deep-get($map, $keys...) {
10+
@each $key in $keys {
11+
$map: map-get($map, $key);
12+
}
13+
@return $map;
14+
}
15+
16+
/// Function returns the rem value of a given breakpoint.
17+
/// @param {string} An existing breakpoint name (sm, md, lg, amd so on).
18+
/// @return {length} The breakpoint value in rems.
19+
@function getBreakpointValue($breakpointName) {
20+
$breakpointValue: map-deep-get($grid-values, 'breakpoints', $breakpointName, 'breakpoint');
21+
@return $breakpointValue * 1rem;
22+
}
23+
24+
/// Returns a calc() expression that represents a fluid width at a given breakpoint.
25+
/// @param {string} A valid breakpoint (sm, md, lg, xlg, or max)
26+
/// @param {number} The number of columns to span across.
27+
/// @return {length} A calc() expression representing fluid width.
28+
@function getFluidSize($breakpointName, $columns) {
29+
$fluidWidth: 0; // default
30+
31+
$breakpoint: map-deep-get($grid-values, 'breakpoints', $breakpointName);
32+
33+
@if (map-get($breakpoint, columns) != null) {
34+
$columnQuantity: map-get($breakpoint, columns);
35+
$fluidWidth: 100vw / $columnQuantity;
36+
37+
$totalMargin: 0;
38+
@if (map-get($breakpoint, margin) != null) {
39+
$totalMargin: map-get($breakpoint, margin) * 2;
40+
}
41+
42+
$fluidWidth: calc((100vw - #{$totalMargin}) * #{$columns} / #{$columnQuantity});
43+
}
44+
45+
@return $fluidWidth;
46+
}
47+
48+
/// Gets a calculated rem value for a fixed nondimensional unit size.
49+
/// @param {number} Fixed nondimensional units.
50+
/// @return {length} A calculated rem value.
51+
@function getFixedSize($fixedUnit) {
52+
53+
$remValue: 0; // default
54+
55+
@if $fixedUnit != null and $fixedUnit > 0 {
56+
$remValue: $fixedUnit * map-get($grid-values, 'rowHeight') * 1rem;
57+
}
58+
@else {
59+
@error 'The provided value #{$fixedUnit} to getFixedSize() is not a number.'
60+
}
61+
62+
@return $remValue;
63+
}

‎examples/material/css-gridish/material-grid.sketch

-3.16 KB
Binary file not shown.

‎examples/material/css-gridish/scss/_core.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import "functions.scss";
22
@import "mixins.scss";
33
@import "variables.scss";
4+
@import "utilities.scss";
45

56
html {
67
font-size: map-get($grid-values, "rem") * 1px;

‎examples/material/css-gridish/scss/_utilities.scss

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
@import "variables";
2+
@import "values";
3+
4+
/// Traverse maps and retrieve deeply nested values.
5+
/// @author Hugo Giraudel
6+
/// @param {map} A sass map.
7+
/// @param {arglist} Any number of keys.
8+
/// @return {*} Nested values or nested map.
9+
@function map-deep-get($map, $keys...) {
10+
@each $key in $keys {
11+
$map: map-get($map, $key);
12+
}
13+
@return $map;
14+
}
15+
16+
/// Function returns the rem value of a given breakpoint.
17+
/// @param {string} An existing breakpoint name (sm, md, lg, amd so on).
18+
/// @return {length} The breakpoint value in rems.
19+
@function getBreakpointValue($breakpointName) {
20+
$breakpointValue: map-deep-get($grid-values, 'breakpoints', $breakpointName, 'breakpoint');
21+
@return $breakpointValue * 1rem;
22+
}
23+
24+
/// Returns a calc() expression that represents a fluid width at a given breakpoint.
25+
/// @param {string} A valid breakpoint (sm, md, lg, xlg, or max)
26+
/// @param {number} The number of columns to span across.
27+
/// @return {length} A calc() expression representing fluid width.
28+
@function getFluidSize($breakpointName, $columns) {
29+
$fluidWidth: 0; // default
30+
31+
$breakpoint: map-deep-get($grid-values, 'breakpoints', $breakpointName);
32+
33+
@if (map-get($breakpoint, columns) != null) {
34+
$columnQuantity: map-get($breakpoint, columns);
35+
$fluidWidth: 100vw / $columnQuantity;
36+
37+
$totalMargin: 0;
38+
@if (map-get($breakpoint, margin) != null) {
39+
$totalMargin: map-get($breakpoint, margin) * 2;
40+
}
41+
42+
$fluidWidth: calc((100vw - #{$totalMargin}) * #{$columns} / #{$columnQuantity});
43+
}
44+
45+
@return $fluidWidth;
46+
}
47+
48+
/// Gets a calculated rem value for a fixed nondimensional unit size.
49+
/// @param {number} Fixed nondimensional units.
50+
/// @return {length} A calculated rem value.
51+
@function getFixedSize($fixedUnit) {
52+
53+
$remValue: 0; // default
54+
55+
@if $fixedUnit != null and $fixedUnit > 0 {
56+
$remValue: $fixedUnit * map-get($grid-values, 'rowHeight') * 1rem;
57+
}
58+
@else {
59+
@error 'The provided value #{$fixedUnit} to getFixedSize() is not a number.'
60+
}
61+
62+
@return $remValue;
63+
}

0 commit comments

Comments
 (0)