aboutsummaryrefslogtreecommitdiffstats
path: root/src/_harmony.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/_harmony.scss')
-rw-r--r--src/_harmony.scss94
1 files changed, 94 insertions, 0 deletions
diff --git a/src/_harmony.scss b/src/_harmony.scss
new file mode 100644
index 0000000..c3c8633
--- /dev/null
+++ b/src/_harmony.scss
@@ -0,0 +1,94 @@
1////
2/// Harmony.
3///
4/// Contains functions to make a design appear more harmonic.
5///
6/// @group Harmony
7///
8/// @access public
9////
10
11///
12/// Adjust a value to a modular scale.
13///
14/// For a more sophisticated solution, check out [modularscale-sass](https://github.com/modularscale/modularscale-sass).
15///
16/// @link http://alistapart.com/article/more-meaningful-typography An article about modular scales by Tim Brown
17///
18/// @param {number} $times - Number of iterations. If positive, $base will be multiplied with $ratio. If negative, $base will be divided by $ratio.
19/// @param {number | list} $base - Single base value or, for a multi-stranded modular scale, a list of base values
20/// @param {number} $ratio - Ratio
21///
22/// @return {number}
23///
24@function iro-harmony-modular-scale($times, $base, $ratio) {
25 @if type-of($base) == number {
26 @return $base * iro-math-pow($ratio, $times);
27 }
28
29 $main-base: nth($base, 1);
30 $norm-bases: ();
31
32 @each $b in iro-list-slice($base, 2) {
33 @if $b > $main-base {
34 @while $b > $main-base {
35 $b: $b / $ratio;
36 }
37 $b: $b * $ratio;
38 } @else if $b < $main-base {
39 @while $b < $main-base {
40 $b: $b * $ratio;
41 }
42 }
43
44 $norm-bases: append($norm-bases, $b);
45 }
46
47 $all-bases: append($norm-bases, $main-base);
48 $all-bases: iro-quicksort($all-bases);
49
50 $base-index: $times % length($all-bases) + 1;
51 $exp: floor($times / length($all-bases));
52
53 @return nth($all-bases, $base-index) * iro-math-pow($ratio, $exp);
54}
55
56///
57/// Combine responsive properties with modular scales to achieve responsive modular scales.
58///
59/// @param {string | list} $props - Property or list of properties to set
60/// @param {number} $times - Number of iterations. See iro-harmony-modular-scale for more information.
61/// @param {number} $responsive-map - A map with keys = viewports and values = modular scales
62/// @param {bool} $fluid [true] - If enabled, property values will smoothly transition from one viewport to the next
63///
64/// @see {function} iro-harmony-modular-scale
65///
66/// @example scss - Responsive font sizes between 2 viewports based on modular scales
67/// $ms: (
68/// 320px: (1rem 2rem, 1.1),
69/// 640px: (1rem 2rem, 1.2)
70/// );
71///
72/// h1 {
73/// @include iro-responsive-modular-scale(font-size, 3, $ms);
74/// }
75///
76/// h2 {
77/// @include iro-responsive-modular-scale(font-size, 2, $ms);
78/// }
79///
80/// h3 {
81/// @include iro-responsive-modular-scale(font-size, 1, $ms);
82/// }
83///
84@mixin iro-responsive-modular-scale($props, $times, $responsive-map, $fluid: true) {
85 $new-map: ();
86
87 @each $key, $value in $responsive-map {
88 $new-map: map-merge($new-map, (
89 $key: iro-harmony-modular-scale($times, $value...)
90 ));
91 }
92
93 @include iro-responsive-property($props, $new-map, $fluid);
94}