modular-scale 0.0.5 → 1.0.rc.1
Sign up to get free protection for your applications and to get access to all the features.
- data/README.mdown +72 -42
- data/lib/modular-scale.rb +110 -4
- data/stylesheets/_modular-scale.sass +67 -167
- metadata +66 -37
data/README.mdown
CHANGED
@@ -12,47 +12,69 @@ Usage requires Sass. Visit [sass-lang.com](http://sass-lang.com) to learn more a
|
|
12
12
|
|
13
13
|
`gem install modular-scale`
|
14
14
|
|
15
|
-
|
15
|
+
Add `require 'modular-scale'` to your Compass config file.
|
16
16
|
|
17
|
-
|
17
|
+
Import the file into your stylesheets: `@import 'modular-scale';`
|
18
18
|
|
19
|
-
|
19
|
+
## Usage
|
20
20
|
|
21
|
-
|
22
|
-
* Import the file into your Sass stylesheet to access the mixins and functions. For example, `@import vendor/modular-scale`
|
21
|
+
Modular-scale is used as a function. Simply pass it through in place of any value to generate a value based on a modular scale.
|
23
22
|
|
24
|
-
|
23
|
+
```scss
|
24
|
+
width: modular-scale(2); // two up the modular scale
|
25
|
+
width: ms(2); // Shorthand for the line above
|
26
|
+
width: modular-scale(2, 1em); // two up the modular scale with a base size of 1em
|
27
|
+
width: modular-scale(2, 1em, $octave); // Same as above but on an octave scale
|
28
|
+
```
|
29
|
+
|
30
|
+
You can output a list to your terminal to help you find out what values are on your scale.
|
31
|
+
|
32
|
+
```scss
|
33
|
+
@include modular-scale-list($start, $end, $base-size, $ratio);
|
34
|
+
```
|
35
|
+
|
36
|
+
By default, it writes 0-20 on the scale. You can also use shorthand to make things more efficient.
|
37
|
+
|
38
|
+
```scss
|
39
|
+
@include ms-list; // shorthand without attributes
|
40
|
+
@include ms-list($start, $end, $base-size, $ratio); // shorthand with attributes
|
41
|
+
```
|
42
|
+
|
43
|
+
As a side effect of the modular-scale functions a `exponent` function is also available.
|
44
|
+
|
45
|
+
```scss
|
46
|
+
@include exponent($base, $exponent);
|
47
|
+
```
|
25
48
|
|
26
|
-
Sassy Modular Scale can be used as a function,
|
49
|
+
Sassy Modular Scale can be used as a function, like so:
|
27
50
|
|
28
51
|
```scss
|
29
52
|
// Use as a function. Fill in the multiple, base-size, and ratio
|
30
53
|
height: modular-scale(7, 16px, $golden);
|
54
|
+
```
|
31
55
|
|
32
|
-
// Use as a mixin. Fill in the property, multiple, base-size, and ratio
|
33
|
-
@include modular-scale(line-height, 1, 16px, $golden);
|
34
56
|
|
35
|
-
// This method will generate a range of classes to `@extend`
|
36
|
-
@include modular-scale-classes(6);
|
37
57
|
|
38
|
-
|
39
|
-
h2 { @extend .ms-1; }
|
40
|
-
h3 { @extend .ms-0; }
|
58
|
+
You can also 'lace' multiple ratios together by passing them in as a list (space-separated)
|
41
59
|
|
42
|
-
|
43
|
-
// passing them in as a list (space-separated)
|
60
|
+
```scss
|
44
61
|
.lace {
|
45
62
|
width: ms(7, 16px, $golden $fourth);
|
46
63
|
}
|
64
|
+
```
|
65
|
+
|
66
|
+
You can also set the $base-size variable to a list to interrelate two significant known sizes in your design
|
67
|
+
*note:* the starting point of the scale will always be the *lowest* value in this list
|
47
68
|
|
48
|
-
|
49
|
-
// to interrelate two significant known sizes in your design
|
50
|
-
// note: the starting point of the scale will always be the *lowest* value in this list
|
69
|
+
```scss
|
51
70
|
.multibases {
|
52
71
|
width: ms(7, 16px 300px, $golden);
|
53
72
|
}
|
54
|
-
|
55
|
-
|
73
|
+
```
|
74
|
+
|
75
|
+
You can use multiple $base-sizes and multiple $ratios together
|
76
|
+
|
77
|
+
```scss
|
56
78
|
.multibase-multiratio {
|
57
79
|
width: ms(7, 16px 300px, $golden $fourth);
|
58
80
|
}
|
@@ -61,25 +83,33 @@ h3 { @extend .ms-0; }
|
|
61
83
|
|
62
84
|
## Ratios
|
63
85
|
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
*
|
69
|
-
*
|
70
|
-
*
|
71
|
-
*
|
72
|
-
*
|
73
|
-
*
|
74
|
-
*
|
75
|
-
*
|
76
|
-
*
|
77
|
-
*
|
78
|
-
*
|
79
|
-
*
|
80
|
-
*
|
81
|
-
*
|
82
|
-
*
|
86
|
+
The included ratios are called by functions. You can add your own ratios as well.
|
87
|
+
|
88
|
+
Below is a list of ratios to choose from. By default, the variable `$ratio` is set to `golden()`.
|
89
|
+
|
90
|
+
* golden()
|
91
|
+
* double-octave()
|
92
|
+
* major-twelfth()
|
93
|
+
* major-eleventh()
|
94
|
+
* major-tenth()
|
95
|
+
* octave()
|
96
|
+
* major-seventh()
|
97
|
+
* minor-seventh()
|
98
|
+
* major-sixth()
|
99
|
+
* minor-sixth()
|
100
|
+
* fifth()
|
101
|
+
* augfourth()
|
102
|
+
* fourth()
|
103
|
+
* major-third()
|
104
|
+
* minor-third()
|
105
|
+
* major-second()
|
106
|
+
* minor-second()
|
107
|
+
|
108
|
+
Add your own ratio in Sass by setting a variable and passing that to modular-scale.
|
109
|
+
|
110
|
+
```scss
|
111
|
+
$my-variable: 1 / 3.14159265;
|
112
|
+
```
|
83
113
|
|
84
114
|
## Inspiration
|
85
115
|
|
@@ -87,10 +117,10 @@ Sassy Modular Scale was adapted from [modularscale.com](http://modularscale.com/
|
|
87
117
|
|
88
118
|
## License
|
89
119
|
|
90
|
-
Copyright (c) 2011 [Scott Kellum](http://www.scottkellum.com/) ([@scottkellum](http://twitter.com/scottkellum)), [Adam Stacoviak](http://adamstacoviak.com/) ([@adamstac](http://twitter.com/adamstac)) and [Mason Wendell](http://thecodingdesigner.com/) ([@
|
120
|
+
Copyright (c) 2011 [Scott Kellum](http://www.scottkellum.com/) ([@scottkellum](http://twitter.com/scottkellum)), [Adam Stacoviak](http://adamstacoviak.com/) ([@adamstac](http://twitter.com/adamstac)) and [Mason Wendell](http://thecodingdesigner.com/) ([@codingdesigner](http://twitter.com/codingdesigner))
|
91
121
|
|
92
122
|
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
93
123
|
|
94
124
|
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
95
125
|
|
96
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
126
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/lib/modular-scale.rb
CHANGED
@@ -1,9 +1,115 @@
|
|
1
1
|
require 'compass'
|
2
|
+
require 'sassy-math'
|
2
3
|
Compass::Frameworks.register("modular-scale", :path => "#{File.dirname(__FILE__)}/..")
|
3
4
|
|
5
|
+
|
4
6
|
module ModularScale
|
5
|
-
|
6
|
-
|
7
|
-
|
7
|
+
VERSION = "1.0.rc.1"
|
8
|
+
DATE = "2012-08-08"
|
9
|
+
end
|
10
|
+
|
11
|
+
|
12
|
+
# Modular Scale Sass Script
|
13
|
+
module Sass::Script
|
14
|
+
class Number < Literal
|
15
|
+
# Comparison
|
16
|
+
def <=>(other)
|
17
|
+
value <=> other.value
|
18
|
+
end
|
19
|
+
end
|
20
|
+
end
|
21
|
+
|
22
|
+
module Sass::Script::Functions
|
23
|
+
# Modular Scale
|
24
|
+
def double_octave
|
25
|
+
value = 4 / 1.0
|
26
|
+
Sass::Script::Number.new(value)
|
27
|
+
end
|
28
|
+
def major_twelfth
|
29
|
+
value = 3 / 1.0
|
30
|
+
Sass::Script::Number.new(value)
|
31
|
+
end
|
32
|
+
def major_eleventh
|
33
|
+
value = 8 / 3.0
|
34
|
+
Sass::Script::Number.new(value)
|
35
|
+
end
|
36
|
+
def major_tenth
|
37
|
+
value = 5 / 2.0
|
38
|
+
Sass::Script::Number.new(value)
|
39
|
+
end
|
40
|
+
def octave
|
41
|
+
value = 2 / 1.0
|
42
|
+
Sass::Script::Number.new(value)
|
43
|
+
end
|
44
|
+
def major_seventh
|
45
|
+
value = 15 / 8.0
|
46
|
+
Sass::Script::Number.new(value)
|
47
|
+
end
|
48
|
+
def minor_seventh
|
49
|
+
value = 16 /9.0
|
50
|
+
Sass::Script::Number.new(value)
|
51
|
+
end
|
52
|
+
def major_sixth
|
53
|
+
value = 5 / 3.0
|
54
|
+
Sass::Script::Number.new(value)
|
55
|
+
end
|
56
|
+
def minor_sixth
|
57
|
+
value = 8 / 5.0
|
58
|
+
Sass::Script::Number.new(value)
|
59
|
+
end
|
60
|
+
def fifth
|
61
|
+
value = 3 / 2.0
|
62
|
+
Sass::Script::Number.new(value)
|
63
|
+
end
|
64
|
+
def augmented_forth
|
65
|
+
value = Math.sqrt(2) / 1.0
|
66
|
+
Sass::Script::Number.new(value)
|
67
|
+
end
|
68
|
+
def fourth
|
69
|
+
value = 4 / 3.0
|
70
|
+
Sass::Script::Number.new(value)
|
71
|
+
end
|
72
|
+
def major_third
|
73
|
+
value = 5 / 4.0
|
74
|
+
Sass::Script::Number.new(value)
|
75
|
+
end
|
76
|
+
def minor_third
|
77
|
+
value = 6 / 5.0
|
78
|
+
Sass::Script::Number.new(value)
|
79
|
+
end
|
80
|
+
def major_second
|
81
|
+
value = 9 / 8.0
|
82
|
+
Sass::Script::Number.new(value)
|
83
|
+
end
|
84
|
+
def minor_second
|
85
|
+
value = 16 / 15.0
|
86
|
+
Sass::Script::Number.new(value)
|
87
|
+
end
|
8
88
|
|
9
|
-
|
89
|
+
# Lists
|
90
|
+
def sort_list(list)
|
91
|
+
sep = list.separator if list.is_a?(Sass::Script::List)
|
92
|
+
list = list.to_a.sort
|
93
|
+
Sass::Script::List.new(list, sep)
|
94
|
+
end
|
95
|
+
def reverse_list(list)
|
96
|
+
sep = list.separator if list.is_a?(Sass::Script::List)
|
97
|
+
list = list.to_a.reverse
|
98
|
+
Sass::Script::List.new(list, sep)
|
99
|
+
end
|
100
|
+
def trim_list(list, threshold, ascending)
|
101
|
+
# remove list items above or below a threshold
|
102
|
+
sep = list.separator if list.is_a?(Sass::Script::List)
|
103
|
+
list = list.to_a
|
104
|
+
if ascending.value
|
105
|
+
list = list.delete_if {
|
106
|
+
|x| x.value <= threshold.value
|
107
|
+
}
|
108
|
+
else
|
109
|
+
list = list.delete_if {
|
110
|
+
|x| x.value >= threshold.value
|
111
|
+
}
|
112
|
+
end
|
113
|
+
Sass::Script::List.new(list, sep)
|
114
|
+
end
|
115
|
+
end
|
@@ -1,40 +1,17 @@
|
|
1
1
|
// SASSY MODULAR-SCALE
|
2
2
|
// https://github.com/scottkellum/modular-scale
|
3
3
|
|
4
|
-
@charset "UTF-8"
|
5
|
-
|
6
|
-
// Ratios
|
7
|
-
$golden: 1.618
|
8
|
-
$gold: $golden
|
9
|
-
$double-octave: (4 / 1)
|
10
|
-
$major-twelfth: (3 / 1)
|
11
|
-
$major-eleventh: (8 / 3)
|
12
|
-
$major-tenth: (5 / 2)
|
13
|
-
$octave: (2 / 1)
|
14
|
-
$major-seventh: (15 / 8)
|
15
|
-
$minor-seventh: (16 / 9)
|
16
|
-
$major-sixth: (5 / 3)
|
17
|
-
$minor-sixth: (8 / 5)
|
18
|
-
$fifth: (3 / 2)
|
19
|
-
$augfourth: (1 / 1.4142135623730950488) // (1 / √2)
|
20
|
-
$fourth: (4 / 3)
|
21
|
-
$major-third: (5 / 4)
|
22
|
-
$minor-third: (6 / 5)
|
23
|
-
$major-second: (9 / 8)
|
24
|
-
$minor-second: (16 / 15)
|
25
|
-
|
26
4
|
// Defaults
|
27
|
-
$ratio:
|
5
|
+
$ratio: golden_ratio() !default
|
28
6
|
$base-size: 16px !default
|
29
|
-
$
|
30
|
-
$class-slug: ms !default
|
7
|
+
$round_pixels: true !default
|
31
8
|
|
32
9
|
// Modular Scale function
|
33
|
-
@function modular-scale($multiple, $base-size, $ratio)
|
10
|
+
@function modular-scale($multiple, $base-size, $ratio, $round_pixels)
|
34
11
|
// return the $base-size if $multiple is zero
|
35
12
|
@if $multiple == 0
|
36
13
|
@if type-of($base-size) == 'list'
|
37
|
-
$base-size:
|
14
|
+
$base-size: sort_list($base-size)
|
38
15
|
@return nth($base-size, 1)
|
39
16
|
// return just the simple $base-size value if it's not a list
|
40
17
|
@return $base-size
|
@@ -43,36 +20,36 @@ $class-slug: ms !default
|
|
43
20
|
// and multiple ratios are passed in as a list
|
44
21
|
// calculate values in using each base-size / ratio combination
|
45
22
|
@if type-of($base-size) == 'list' and type-of($ratio) == 'list'
|
46
|
-
@if unit(ms-multibase-multiratio($multiple, $base-size, $ratio)) == 'px'
|
23
|
+
@if unit(ms-multibase-multiratio($multiple, $base-size, $ratio)) == 'px' and $round_pixels == true
|
47
24
|
@return round(ms-multibase-multiratio($multiple, $base-size, $ratio))
|
48
25
|
@return ms-multibase-multiratio($multiple, $base-size, $ratio)
|
49
|
-
|
26
|
+
|
50
27
|
// if multiple base-sizes are passed in as a list
|
51
28
|
// calculate values in using each base-size
|
52
29
|
@if type-of($base-size) == 'list' and type-of($ratio) == 'number'
|
53
|
-
@if unit(ms-multibase($multiple, $base-size, $ratio)) == 'px'
|
30
|
+
@if unit(ms-multibase($multiple, $base-size, $ratio)) == 'px' and $round_pixels == true
|
54
31
|
@return round(ms-multibase($multiple, $base-size, $ratio))
|
55
32
|
@return ms-multibase($multiple, $base-size, $ratio)
|
56
|
-
|
33
|
+
|
57
34
|
// if multiple ratios are passed in as a list
|
58
35
|
// calculate values in using each ratio
|
59
36
|
@if type-of($base-size) == 'number' and type-of($ratio) == 'list'
|
60
|
-
@if unit(ms-multiratio($multiple, $base-size, $ratio)) == 'px'
|
37
|
+
@if unit(ms-multiratio($multiple, $base-size, $ratio)) == 'px' and $round_pixels == true
|
61
38
|
@return round(ms-multiratio($multiple, $base-size, $ratio))
|
62
39
|
@return ms-multiratio($multiple, $base-size, $ratio)
|
63
|
-
|
40
|
+
|
64
41
|
// If there are no lists just run the simple function
|
65
|
-
@if unit(
|
66
|
-
@return round(
|
67
|
-
@return
|
68
|
-
|
69
|
-
|
42
|
+
@if unit(power($ratio, $multiple) * $base-size) == 'px' and $round_pixels == true
|
43
|
+
@return round(power($ratio, $multiple) * $base-size)
|
44
|
+
@return power($ratio, $multiple) * $base-size
|
45
|
+
|
46
|
+
|
70
47
|
// calculate values in using each base-size / ratio combination
|
71
48
|
@function ms-multibase-multiratio($multiple, $base-size, $ratio)
|
72
49
|
// start with an empty list to place all values in
|
73
50
|
$scale-values: ()
|
74
51
|
// make sure base sizes are in ascending order
|
75
|
-
$base-size:
|
52
|
+
$base-size: sort_list($base-size)
|
76
53
|
// take each base-size in turn
|
77
54
|
$k: 1
|
78
55
|
@while $k <= length($base-size)
|
@@ -84,41 +61,41 @@ $class-slug: ms !default
|
|
84
61
|
@while $j <= length($ratio)
|
85
62
|
// reset $modular-scale for each set
|
86
63
|
$modular-scale: nth($base-size, $k)
|
87
|
-
// do the scale for each base-size using this ratio
|
64
|
+
// do the scale for each base-size using this ratio
|
88
65
|
@if $multiple > 0
|
89
66
|
// up $multiple times
|
90
|
-
// and add the result to $scale-values
|
67
|
+
// and add the result to $scale-values
|
91
68
|
@for $i from 1 through $multiple
|
92
|
-
$modular-scale:
|
69
|
+
$modular-scale: power(nth($ratio, $j), $i) * nth($base-size, $k)
|
93
70
|
$scale-values: append($scale-values, $modular-scale)
|
94
71
|
// and down until the value is lower than the lowest $base-size
|
95
72
|
// and add the result to $scale-values
|
96
73
|
$i: -1
|
97
74
|
$modular-scale: nth($base-size, $k)
|
98
75
|
@while $modular-scale >= nth($base-size, 1)
|
99
|
-
$modular-scale:
|
76
|
+
$modular-scale: power(nth($ratio, $j), $i) * nth($base-size, $k)
|
100
77
|
$scale-values: append($scale-values, $modular-scale)
|
101
78
|
$i: $i - 1
|
102
79
|
@if $multiple < 0
|
103
80
|
// do the scale down for each set to below 1px
|
104
|
-
$i:
|
81
|
+
$i: 0
|
105
82
|
$modular-scale: nth($base-size, $k)
|
106
|
-
@while $
|
107
|
-
$modular-scale:
|
83
|
+
@while $i >= $multiple
|
84
|
+
$modular-scale: power(nth($ratio, $j), $i) * nth($base-size, $k)
|
108
85
|
$scale-values: append($scale-values, $modular-scale)
|
109
86
|
$i: $i - 1
|
110
87
|
$j: $j + 1
|
111
88
|
$k: $k + 1
|
112
89
|
// return trimmed and sorted final list
|
113
90
|
@return trim-sort($multiple, $scale-values, $base-size)
|
114
|
-
|
115
|
-
|
91
|
+
|
92
|
+
|
116
93
|
// calculate values in using each base-size
|
117
94
|
@function ms-multibase($multiple, $base-size, $ratio)
|
118
95
|
// start with an empty list to place all values in
|
119
96
|
$scale-values: ()
|
120
97
|
// make sure base sizes are in ascending order
|
121
|
-
$base-size:
|
98
|
+
$base-size: sort_list($base-size)
|
122
99
|
// take each base-size in turn
|
123
100
|
$k: 1
|
124
101
|
@while $k <= length($base-size)
|
@@ -127,34 +104,34 @@ $class-slug: ms !default
|
|
127
104
|
$scale-values: append($scale-values, nth($base-size, $k))
|
128
105
|
// reset $modular-scale for each set
|
129
106
|
$modular-scale: nth($base-size, $k)
|
130
|
-
// do the scale for each base-size using this ratio
|
107
|
+
// do the scale for each base-size using this ratio
|
131
108
|
@if $multiple > 0
|
132
109
|
// up $multiple times
|
133
|
-
// and add the result to $scale-values
|
110
|
+
// and add the result to $scale-values
|
134
111
|
@for $i from 1 through $multiple
|
135
|
-
$modular-scale:
|
112
|
+
$modular-scale: power($ratio, $i) * nth($base-size, $k)
|
136
113
|
$scale-values: append($scale-values, $modular-scale)
|
137
114
|
// and down until the value is lower than the lowest $base-size
|
138
115
|
// and add the result to $scale-values
|
139
116
|
$i: -1
|
140
117
|
$modular-scale: nth($base-size, $k)
|
141
118
|
@while $modular-scale >= nth($base-size, 1)
|
142
|
-
$modular-scale:
|
119
|
+
$modular-scale: power($ratio, $i) * nth($base-size, $k)
|
143
120
|
$scale-values: append($scale-values, $modular-scale)
|
144
121
|
$i: $i - 1
|
145
122
|
@if $multiple < 0
|
146
123
|
// do the scale down for each set to below 1px
|
147
|
-
$i:
|
124
|
+
$i: 0
|
148
125
|
$modular-scale: nth($base-size, $k)
|
149
|
-
@while $
|
150
|
-
$modular-scale:
|
126
|
+
@while $i >= $multiple
|
127
|
+
$modular-scale: power($ratio, $i) * nth($base-size, $k)
|
151
128
|
$scale-values: append($scale-values, $modular-scale)
|
152
129
|
$i: $i - 1
|
153
130
|
$k: $k + 1
|
154
131
|
// return trimmed and sorted final list
|
155
132
|
@return trim-sort($multiple, $scale-values, $base-size)
|
156
133
|
|
157
|
-
|
134
|
+
|
158
135
|
// calculate values in using each ratio
|
159
136
|
@function ms-multiratio($multiple, $base-size, $ratio)
|
160
137
|
// start with an empty list to place all values in
|
@@ -168,11 +145,11 @@ $class-slug: ms !default
|
|
168
145
|
$modular-scale: $base-size
|
169
146
|
// do the scale using this ratio thru the multiple, and add the result to $scale-values
|
170
147
|
@for $i from 1 through $multiple
|
171
|
-
$modular-scale:
|
148
|
+
$modular-scale: power(nth($ratio, $j), $i) * $base-size
|
172
149
|
$scale-values: append($scale-values, $modular-scale)
|
173
150
|
$j: $j + 1
|
174
|
-
// sort acsending
|
175
|
-
$scale-values:
|
151
|
+
// sort acsending
|
152
|
+
$scale-values: sort_list($scale-values)
|
176
153
|
// return the final value using the laced list
|
177
154
|
@return nth($scale-values, $multiple)
|
178
155
|
// If $multiple is a negative integer (down the scale)
|
@@ -184,137 +161,60 @@ $class-slug: ms !default
|
|
184
161
|
$modular-scale: $base-size
|
185
162
|
// do the scale using this ratio thru the multiple, and add the result to $scale-values
|
186
163
|
@for $i from 1 through ($multiple * -1)
|
187
|
-
$modular-scale:
|
164
|
+
$modular-scale: power(nth($ratio, $j), -$i) * $base-size
|
188
165
|
$scale-values: append($scale-values, $modular-scale)
|
189
166
|
$j: $j + 1
|
190
167
|
// sort decending
|
191
|
-
$scale-values:
|
168
|
+
$scale-values: reverse_list(sort_list($scale-values))
|
192
169
|
// return the final value using the laced list
|
193
170
|
@return nth($scale-values, $multiple * -1)
|
194
|
-
|
195
|
-
|
171
|
+
|
172
|
+
|
196
173
|
// trim and sort the final list
|
197
174
|
@function trim-sort($multiple, $scale-values, $base-size)
|
198
175
|
@if $multiple > 0
|
199
176
|
// trim list so we can count from the lowest $base-size
|
200
|
-
$scale-values:
|
201
|
-
// sort acsending
|
202
|
-
$scale-values:
|
177
|
+
$scale-values: trim_list($scale-values, nth($base-size, 1), true)
|
178
|
+
// sort acsending
|
179
|
+
$scale-values: sort_list($scale-values)
|
203
180
|
// return the final value using the laced list
|
204
181
|
@return nth($scale-values, $multiple)
|
205
182
|
@else
|
206
183
|
// trim list so we can count from the lowest $base-size
|
207
|
-
$scale-values:
|
208
|
-
// sort acsending
|
209
|
-
$scale-values:
|
184
|
+
$scale-values: trim_list($scale-values, nth($base-size, 1), false)
|
185
|
+
// sort acsending
|
186
|
+
$scale-values: reverse_list(sort_list($scale-values))
|
210
187
|
// return the final value using the laced list
|
211
188
|
@return nth($scale-values, -$multiple)
|
212
|
-
|
213
|
-
|
189
|
+
|
190
|
+
|
214
191
|
/////////////////////////////////////////////////////////////////////////
|
215
|
-
|
192
|
+
|
193
|
+
// alias for golden_ratio()
|
194
|
+
@function golden()
|
195
|
+
@return golden_ratio()
|
196
|
+
|
216
197
|
// Shortcut
|
217
198
|
@function ms($multiple, $base-size, $ratio)
|
218
199
|
// Return the value from the Modular Scale function
|
219
200
|
@return modular-scale($multiple, $base-size, $ratio)
|
220
201
|
|
221
|
-
//
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
// Classes Mixin
|
229
|
-
=modular-scale-classes($multiple, $property, $class-slug, $base-size, $ratio)
|
230
|
-
// Loop from 0 through the value of $multiple and generate a range of classes
|
231
|
-
@for $i from 0 through $multiple
|
232
|
-
.#{$class-slug}-#{$i}
|
233
|
-
// Print the $property and return the value from the Modular Scale function
|
234
|
-
#{$property}: modular-scale($i, $base-size, $ratio)
|
235
|
-
|
236
|
-
|
237
|
-
/////////////////////////////////////////////////////////////////////////
|
202
|
+
// Write Modular Scale List
|
203
|
+
@function modular-scale-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio)
|
204
|
+
$ms-list: unquote("MS-LIST:")
|
205
|
+
@for $i from $start through $finish
|
206
|
+
$ms-list: append($ms-list, ms($i, $base-size, $ratio))
|
207
|
+
@return $ms-list
|
238
208
|
|
209
|
+
@function ms-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio)
|
210
|
+
@return modular-scale-list($start, $finish, $base-size, $ratio)
|
239
211
|
|
240
|
-
|
241
|
-
@
|
242
|
-
// reset value
|
243
|
-
$value: $base
|
244
|
-
// positive intergers get multiplied
|
245
|
-
@if $exponent > 1
|
246
|
-
@for $i from 2 through $exponent
|
247
|
-
$value: $value * $base
|
248
|
-
// negitive intergers get divided. A number divided by itself is 1
|
249
|
-
@if $exponent < 1
|
250
|
-
@for $i from 0 through -$exponent
|
251
|
-
$value: $value / $base
|
252
|
-
// return the last value written
|
253
|
-
@return $value
|
212
|
+
=modular-scale-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio)
|
213
|
+
@debug modular-scale-list($start, $finish, $base-size, $ratio)
|
254
214
|
|
215
|
+
=ms-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio)
|
216
|
+
@debug modular-scale-list($start, $finish, $base-size, $ratio)
|
255
217
|
|
256
|
-
// Sass list sorting support
|
257
|
-
@function sort-list($list, $dir: 'asc')
|
258
|
-
// built-in list sorting in Sass would make this go away.
|
259
|
-
// declare some empty lists to put our new order and temporary values
|
260
|
-
$new-order: ()
|
261
|
-
$temp: ()
|
262
|
-
// fill $temp with the contents of $list
|
263
|
-
$temp: join($temp, $list)
|
264
|
-
// if sorting ascending
|
265
|
-
@if $dir == 'asc'
|
266
|
-
// loop through all values in $list
|
267
|
-
@for $i from 1 through length($list)
|
268
|
-
// impossibly high starter value to compare
|
269
|
-
$low: 1000000
|
270
|
-
// check for lowest value in $temp
|
271
|
-
@for $j from 1 through length($temp)
|
272
|
-
@if nth($temp, $j) < $low
|
273
|
-
$low: nth($temp, $j)
|
274
|
-
// add lowest value to $new-order
|
275
|
-
$new-order: append($new-order, $low)
|
276
|
-
// empty $temp for the next comparison
|
277
|
-
$temp: ()
|
278
|
-
// re-populate $temp with remaining values to sort
|
279
|
-
@for $k from 1 through length($list)
|
280
|
-
@if nth($list, $k) > $low
|
281
|
-
$temp: append($temp, nth($list, $k))
|
282
|
-
@if $dir == 'dec'
|
283
|
-
// loop through all values in $list
|
284
|
-
@for $i from 1 through length($list)
|
285
|
-
// 0 starter value
|
286
|
-
$high: 0
|
287
|
-
// check for highest value in $temp
|
288
|
-
@for $j from 1 through length($temp)
|
289
|
-
@if nth($temp, $j) > $high
|
290
|
-
$high: nth($temp, $j)
|
291
|
-
$new-order: append($new-order, $high)
|
292
|
-
// empty $temp for the next comparison
|
293
|
-
$temp: ()
|
294
|
-
// re-populate $temp with remaining values to sort
|
295
|
-
@for $k from 1 through length($list)
|
296
|
-
@if nth($list, $k) < $high
|
297
|
-
$temp: append($temp, nth($list, $k))
|
298
|
-
@return $new-order
|
299
|
-
|
300
|
-
|
301
|
-
// Sass list trimming support
|
302
|
-
@function trim-list($list, $start, $dir: 'asc')
|
303
|
-
// built-in list trimming in Sass would make this go away.
|
304
|
-
// declare some empty lists to put our trimmed values
|
305
|
-
$trimmed: ()
|
306
|
-
// if sorting ascending
|
307
|
-
@if $dir == 'asc'
|
308
|
-
// loop through all values in $list
|
309
|
-
@for $i from 1 through length($list)
|
310
|
-
@if nth($list, $i) >= $start
|
311
|
-
$trimmed: append($trimmed, nth($list, $i))
|
312
|
-
@if $dir == 'dec'
|
313
|
-
// loop through all values in $list
|
314
|
-
@for $i from 1 through length($list)
|
315
|
-
@if nth($list, $i) <= $start
|
316
|
-
$trimmed: append($trimmed, nth($list, $i))
|
317
|
-
@return $trimmed
|
318
218
|
|
319
219
|
// Other libraries can easily query if this function is avalible
|
320
|
-
$modular-scale-loaded: true
|
220
|
+
$modular-scale-loaded: true
|
metadata
CHANGED
@@ -1,69 +1,98 @@
|
|
1
|
-
--- !ruby/object:Gem::Specification
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
2
|
name: modular-scale
|
3
|
-
version: !ruby/object:Gem::Version
|
4
|
-
|
5
|
-
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
prerelease: true
|
5
|
+
segments:
|
6
|
+
- 1
|
7
|
+
- 0
|
8
|
+
- rc
|
9
|
+
- 1
|
10
|
+
version: 1.0.rc.1
|
6
11
|
platform: ruby
|
7
|
-
authors:
|
12
|
+
authors:
|
8
13
|
- Scott Kellum
|
9
14
|
- Adam Stacoviak
|
10
15
|
- Mason Wendell
|
11
16
|
autorequire:
|
12
17
|
bindir: bin
|
13
18
|
cert_chain: []
|
14
|
-
|
15
|
-
|
16
|
-
|
19
|
+
|
20
|
+
date: 2012-08-08 00:00:00 -04:00
|
21
|
+
default_executable:
|
22
|
+
dependencies:
|
23
|
+
- !ruby/object:Gem::Dependency
|
17
24
|
name: compass
|
18
|
-
|
19
|
-
|
20
|
-
requirements:
|
21
|
-
- -
|
22
|
-
- !ruby/object:Gem::Version
|
25
|
+
prerelease: false
|
26
|
+
requirement: &id001 !ruby/object:Gem::Requirement
|
27
|
+
requirements:
|
28
|
+
- - ">="
|
29
|
+
- !ruby/object:Gem::Version
|
30
|
+
segments:
|
31
|
+
- 0
|
32
|
+
- 11
|
33
|
+
- 5
|
23
34
|
version: 0.11.5
|
24
35
|
type: :runtime
|
36
|
+
version_requirements: *id001
|
37
|
+
- !ruby/object:Gem::Dependency
|
38
|
+
name: sassy-math
|
25
39
|
prerelease: false
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
40
|
+
requirement: &id002 !ruby/object:Gem::Requirement
|
41
|
+
requirements:
|
42
|
+
- - ">="
|
43
|
+
- !ruby/object:Gem::Version
|
44
|
+
segments:
|
45
|
+
- 1
|
46
|
+
- 2
|
47
|
+
version: "1.2"
|
48
|
+
type: :runtime
|
49
|
+
version_requirements: *id002
|
50
|
+
description: Sassy Modular Scale calculates the incremental values of the modular scale.
|
51
|
+
email:
|
30
52
|
- scott@scottkellum.com
|
31
53
|
- adam@stacoviak.com
|
32
|
-
- mason@
|
54
|
+
- mason@canarypromo.com
|
33
55
|
executables: []
|
56
|
+
|
34
57
|
extensions: []
|
58
|
+
|
35
59
|
extra_rdoc_files: []
|
36
|
-
|
60
|
+
|
61
|
+
files:
|
37
62
|
- README.mdown
|
38
63
|
- lib/modular-scale.rb
|
39
64
|
- stylesheets/_modular-scale.sass
|
65
|
+
has_rdoc: true
|
40
66
|
homepage: https://github.com/scottkellum/modular-scale
|
41
67
|
licenses: []
|
68
|
+
|
42
69
|
post_install_message:
|
43
70
|
rdoc_options: []
|
44
|
-
|
71
|
+
|
72
|
+
require_paths:
|
45
73
|
- lib
|
46
|
-
required_ruby_version: !ruby/object:Gem::Requirement
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
version: '0'
|
52
|
-
segments:
|
74
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
75
|
+
requirements:
|
76
|
+
- - ">="
|
77
|
+
- !ruby/object:Gem::Version
|
78
|
+
segments:
|
53
79
|
- 0
|
54
|
-
|
55
|
-
required_rubygems_version: !ruby/object:Gem::Requirement
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
80
|
+
version: "0"
|
81
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
82
|
+
requirements:
|
83
|
+
- - ">="
|
84
|
+
- !ruby/object:Gem::Version
|
85
|
+
segments:
|
86
|
+
- 1
|
87
|
+
- 3
|
88
|
+
- 6
|
60
89
|
version: 1.3.6
|
61
90
|
requirements: []
|
91
|
+
|
62
92
|
rubyforge_project:
|
63
|
-
rubygems_version: 1.
|
93
|
+
rubygems_version: 1.3.6
|
64
94
|
signing_key:
|
65
95
|
specification_version: 3
|
66
|
-
summary: Sassy Modular Scale calculates the incremental values of the modular scale
|
67
|
-
in proportion to a set size and ratio. Inspired by and adapted from Tim Brown's
|
68
|
-
modularscale.com.
|
96
|
+
summary: Sassy Modular Scale calculates the incremental values of the modular scale in proportion to a set size and ratio. Inspired by and adapted from Tim Brown's modularscale.com.
|
69
97
|
test_files: []
|
98
|
+
|