diff options
Diffstat (limited to 'src/_harmony.scss')
-rw-r--r-- | src/_harmony.scss | 94 |
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 | } | ||