modular-scale 1.0.6 → 2.0.0.alpha1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/lib/modular-scale.rb +10 -109
- data/license.md +36 -0
- data/stylesheets/_modular-scale.scss +11 -307
- data/stylesheets/modular-scale/_cache.scss +25 -0
- data/stylesheets/modular-scale/_calc.scss +17 -0
- data/stylesheets/modular-scale/_function-list.scss +60 -0
- data/stylesheets/modular-scale/_function.scss +62 -0
- data/stylesheets/modular-scale/_generate-list.scss +80 -0
- data/stylesheets/modular-scale/_pow.scss +39 -0
- data/stylesheets/modular-scale/_ratios.scss +20 -0
- data/stylesheets/modular-scale/_sort-list.scss +92 -0
- data/stylesheets/modular-scale/_tests.scss +28 -0
- metadata +29 -62
- data/readme.md +0 -138
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 11a5c866b76f13e5501ae74c55ab575528a56f86
|
4
|
+
data.tar.gz: e706db9fa0902a6595831c0ac4c4a7592b26bfd7
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: ee2c1d671e279b41c69858efd3d1e5db9514502ea2c1cfe618d4a60cb0f3fbbb6a456ffed5c3f14d666f76f22838fed872b35f7a16d9d1f38b9e6e0f9d262cc5
|
7
|
+
data.tar.gz: 447e0e020b7df1af562d6402bb5ba07bbb2b5bc8ad075915f42a5976182a38acb73f4279bd5d51dcc3079d59f5f928dc3adcaaeae5f4979d141e7640bc9e6804
|
data/lib/modular-scale.rb
CHANGED
@@ -1,128 +1,29 @@
|
|
1
|
+
# All gems that are required for this extension to work should go here.
|
2
|
+
# These are the requires you would normally put in your config.rb file
|
3
|
+
# By default, you should always included Compass. Do not include your
|
4
|
+
# extension.
|
1
5
|
require 'compass'
|
2
|
-
require 'sassy-math'
|
3
6
|
|
4
7
|
# This tells Compass what your Compass extension is called, and where to find
|
5
8
|
# its files
|
6
|
-
# Replace 'extension' with the name of your extension. Spaces allowed.
|
7
9
|
extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
|
8
10
|
Compass::Frameworks.register('modular-scale', :path => extension_path)
|
9
11
|
|
10
12
|
# Version and date of version for your Compass extension.
|
11
|
-
# Replace
|
13
|
+
# Replace ModularScale with the name of your extension
|
12
14
|
# Letters, numbers, and underscores only
|
13
15
|
# Version is a number. If a version contains alphas, it will be created as
|
14
16
|
# a prerelease version
|
15
17
|
# Date is in the form of YYYY-MM-DD
|
16
18
|
module ModularScale
|
17
|
-
VERSION = "
|
18
|
-
DATE = "
|
19
|
+
VERSION = "2.0.0.alpha1"
|
20
|
+
DATE = "2013-12-20"
|
19
21
|
end
|
20
22
|
|
21
23
|
# This is where any custom SassScript should be placed. The functions will be
|
22
24
|
# available on require of your extension without the need for users to import
|
23
25
|
# any partials. Uncomment below.
|
24
26
|
|
25
|
-
#
|
26
|
-
|
27
|
-
|
28
|
-
# Comparison
|
29
|
-
def <=>(other)
|
30
|
-
value <=> other.value
|
31
|
-
end
|
32
|
-
end
|
33
|
-
end
|
34
|
-
|
35
|
-
module Sass::Script::Functions
|
36
|
-
# Modular Scale
|
37
|
-
def double_octave
|
38
|
-
value = 4 / 1.0
|
39
|
-
Sass::Script::Number.new(value)
|
40
|
-
end
|
41
|
-
def major_twelfth
|
42
|
-
value = 3 / 1.0
|
43
|
-
Sass::Script::Number.new(value)
|
44
|
-
end
|
45
|
-
def major_eleventh
|
46
|
-
value = 8 / 3.0
|
47
|
-
Sass::Script::Number.new(value)
|
48
|
-
end
|
49
|
-
def major_tenth
|
50
|
-
value = 5 / 2.0
|
51
|
-
Sass::Script::Number.new(value)
|
52
|
-
end
|
53
|
-
def octave
|
54
|
-
value = 2 / 1.0
|
55
|
-
Sass::Script::Number.new(value)
|
56
|
-
end
|
57
|
-
def major_seventh
|
58
|
-
value = 15 / 8.0
|
59
|
-
Sass::Script::Number.new(value)
|
60
|
-
end
|
61
|
-
def minor_seventh
|
62
|
-
value = 16 /9.0
|
63
|
-
Sass::Script::Number.new(value)
|
64
|
-
end
|
65
|
-
def major_sixth
|
66
|
-
value = 5 / 3.0
|
67
|
-
Sass::Script::Number.new(value)
|
68
|
-
end
|
69
|
-
def minor_sixth
|
70
|
-
value = 8 / 5.0
|
71
|
-
Sass::Script::Number.new(value)
|
72
|
-
end
|
73
|
-
def fifth
|
74
|
-
value = 3 / 2.0
|
75
|
-
Sass::Script::Number.new(value)
|
76
|
-
end
|
77
|
-
def augmented_fourth
|
78
|
-
value = Math.sqrt(2) / 1.0
|
79
|
-
Sass::Script::Number.new(value)
|
80
|
-
end
|
81
|
-
def fourth
|
82
|
-
value = 4 / 3.0
|
83
|
-
Sass::Script::Number.new(value)
|
84
|
-
end
|
85
|
-
def major_third
|
86
|
-
value = 5 / 4.0
|
87
|
-
Sass::Script::Number.new(value)
|
88
|
-
end
|
89
|
-
def minor_third
|
90
|
-
value = 6 / 5.0
|
91
|
-
Sass::Script::Number.new(value)
|
92
|
-
end
|
93
|
-
def major_second
|
94
|
-
value = 9 / 8.0
|
95
|
-
Sass::Script::Number.new(value)
|
96
|
-
end
|
97
|
-
def minor_second
|
98
|
-
value = 16 / 15.0
|
99
|
-
Sass::Script::Number.new(value)
|
100
|
-
end
|
101
|
-
|
102
|
-
# Lists
|
103
|
-
def sort_list(list)
|
104
|
-
sep = list.separator if list.is_a?(Sass::Script::List)
|
105
|
-
list = list.to_a.sort
|
106
|
-
Sass::Script::List.new(list, sep)
|
107
|
-
end
|
108
|
-
def reverse_list(list)
|
109
|
-
sep = list.separator if list.is_a?(Sass::Script::List)
|
110
|
-
list = list.to_a.reverse
|
111
|
-
Sass::Script::List.new(list, sep)
|
112
|
-
end
|
113
|
-
def trim_list(list, threshold, ascending)
|
114
|
-
# remove list items above or below a threshold
|
115
|
-
sep = list.separator if list.is_a?(Sass::Script::List)
|
116
|
-
list = list.to_a
|
117
|
-
if ascending.value
|
118
|
-
list = list.delete_if {
|
119
|
-
|x| x.value <= threshold.value
|
120
|
-
}
|
121
|
-
else
|
122
|
-
list = list.delete_if {
|
123
|
-
|x| x.value >= threshold.value
|
124
|
-
}
|
125
|
-
end
|
126
|
-
Sass::Script::List.new(list, sep)
|
127
|
-
end
|
128
|
-
end
|
27
|
+
# module Sass::Script::Functions
|
28
|
+
#
|
29
|
+
# end
|
data/license.md
ADDED
@@ -0,0 +1,36 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2013 Scott Kellum, Mason Wendell
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
6
|
+
this software and associated documentation files (the "Software"), to deal in
|
7
|
+
the Software without restriction, including without limitation the rights to
|
8
|
+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
9
|
+
the Software, and to permit persons to whom the Software is furnished to do so,
|
10
|
+
subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
13
|
+
copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
17
|
+
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
18
|
+
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
19
|
+
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
20
|
+
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
21
|
+
|
22
|
+
Modular Scale
|
23
|
+
Copyright (C) 2013 Scott Kellum, Mason Wendell
|
24
|
+
|
25
|
+
This program is free software: you can redistribute it and/or modify
|
26
|
+
it under the terms of the GNU General Public License as published by
|
27
|
+
the Free Software Foundation, either version 3 of the License, or
|
28
|
+
(at your option) any later version.
|
29
|
+
|
30
|
+
This program is distributed in the hope that it will be useful,
|
31
|
+
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
32
|
+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
33
|
+
GNU General Public License for more details.
|
34
|
+
|
35
|
+
You should have received a copy of the GNU General Public License
|
36
|
+
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
@@ -1,310 +1,14 @@
|
|
1
|
-
|
2
|
-
// https://github.com/scottkellum/modular-scale
|
1
|
+
@import "modular-scale/ratios";
|
3
2
|
|
4
|
-
|
5
|
-
$ratio:
|
6
|
-
$base-size: 16px !default;
|
7
|
-
$round-pixels: true !default;
|
3
|
+
$ms-base: 1em !default;
|
4
|
+
$ms-ratio: $golden !default;
|
8
5
|
|
9
|
-
|
10
|
-
@function modular-scale($multiple, $base-size: $base-size, $ratio: $ratio, $round-pixels: $round-pixels) {
|
11
|
-
|
12
|
-
// return the $base-size if $multiple is zero
|
13
|
-
@if $multiple == 0 {
|
14
|
-
@if type-of($base-size) == "list" {
|
15
|
-
$base-size: sort_list($base-size);
|
16
|
-
@return nth($base-size, 1);
|
17
|
-
}
|
18
|
-
|
19
|
-
// return just the simple $base-size value if it's not a list
|
20
|
-
@return $base-size;
|
21
|
-
}
|
22
|
-
|
23
|
-
// if multiple base-sizes are passed in as a list
|
24
|
-
// and multiple ratios are passed in as a list
|
25
|
-
// calculate values in using each base-size / ratio combination
|
26
|
-
@if type-of($base-size) == "list" and type-of($ratio) == "list" {
|
27
|
-
@if unit(ms-multibase-multiratio($multiple, $base-size, $ratio)) == "px" and $round-pixels == true {
|
28
|
-
@return round(ms-multibase-multiratio($multiple, $base-size, $ratio));
|
29
|
-
}
|
30
|
-
@return ms-multibase-multiratio($multiple, $base-size, $ratio);
|
31
|
-
}
|
32
|
-
|
33
|
-
// if multiple base-sizes are passed in as a list
|
34
|
-
// calculate values in using each base-size
|
35
|
-
@if type-of($base-size) == "list" and type-of($ratio) == "number" {
|
36
|
-
@if unit(ms-multibase($multiple, $base-size, $ratio)) == "px" and $round-pixels == true {
|
37
|
-
@return round(ms-multibase($multiple, $base-size, $ratio));
|
38
|
-
}
|
39
|
-
@return ms-multibase($multiple, $base-size, $ratio);
|
40
|
-
}
|
41
|
-
|
42
|
-
// if multiple ratios are passed in as a list
|
43
|
-
// calculate values in using each ratio
|
44
|
-
@if type-of($base-size) == "number" and type-of($ratio) == "list" {
|
45
|
-
@if unit(ms-multiratio($multiple, $base-size, $ratio)) == "px" and $round-pixels == true {
|
46
|
-
@return round(ms-multiratio($multiple, $base-size, $ratio));
|
47
|
-
}
|
48
|
-
@return ms-multiratio($multiple, $base-size, $ratio);
|
49
|
-
}
|
50
|
-
|
51
|
-
// If there are no lists just run the simple function
|
52
|
-
@if unit(power($ratio, $multiple) * $base-size) == "px" and $round-pixels == true {
|
53
|
-
@return round(power($ratio, $multiple) * $base-size);
|
54
|
-
}
|
55
|
-
@return power($ratio, $multiple) * $base-size;
|
56
|
-
}
|
6
|
+
@import "modular-scale/tests";
|
57
7
|
|
58
|
-
|
59
|
-
@
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
$base-size: sort_list($base-size);
|
66
|
-
|
67
|
-
// take each base-size in turn
|
68
|
-
$k: 1;
|
69
|
-
@while $k <= length($base-size) {
|
70
|
-
|
71
|
-
// add each $base-size to the list except the first
|
72
|
-
@if $k > 1 {
|
73
|
-
$scale-values: append($scale-values, nth($base-size, $k));
|
74
|
-
}
|
75
|
-
|
76
|
-
// take each ratio in turn
|
77
|
-
$j: 1;
|
78
|
-
@while $j <= length($ratio) {
|
79
|
-
|
80
|
-
// reset $modular-scale for each set
|
81
|
-
$modular-scale: nth($base-size, $k);
|
82
|
-
|
83
|
-
// do the scale for each base-size using this ratio
|
84
|
-
@if $multiple > 0 {
|
85
|
-
|
86
|
-
// up $multiple times
|
87
|
-
// and add the result to $scale-values
|
88
|
-
@for $i from 1 through $multiple {
|
89
|
-
$modular-scale: power(nth($ratio, $j), $i) * nth($base-size, $k);
|
90
|
-
$scale-values: append($scale-values, $modular-scale);
|
91
|
-
}
|
92
|
-
|
93
|
-
// and down until the value is lower than the lowest $base-size
|
94
|
-
// and add the result to $scale-values
|
95
|
-
$i: -1;
|
96
|
-
$modular-scale: nth($base-size, $k);
|
97
|
-
@while $modular-scale >= nth($base-size, 1) {
|
98
|
-
$modular-scale: power(nth($ratio, $j), $i) * nth($base-size, $k);
|
99
|
-
$scale-values: append($scale-values, $modular-scale);
|
100
|
-
$i: $i - 1;
|
101
|
-
}
|
102
|
-
}
|
103
|
-
@if $multiple < 0 {
|
104
|
-
|
105
|
-
// do the scale down for each set to below 1px
|
106
|
-
$i: 0;
|
107
|
-
$modular-scale: nth($base-size, $k);
|
108
|
-
@while $i >= $multiple {
|
109
|
-
$modular-scale: power(nth($ratio, $j), $i) * nth($base-size, $k);
|
110
|
-
$scale-values: append($scale-values, $modular-scale);
|
111
|
-
$i: $i - 1;
|
112
|
-
}
|
113
|
-
}
|
114
|
-
$j: $j + 1;
|
115
|
-
}
|
116
|
-
$k: $k + 1;
|
117
|
-
}
|
118
|
-
|
119
|
-
// return trimmed and sorted final list
|
120
|
-
@return trim-sort($multiple, $scale-values, $base-size);
|
121
|
-
}
|
122
|
-
|
123
|
-
// calculate values in using each base-size
|
124
|
-
@function ms-multibase($multiple, $base-size: $base-size, $ratio: $ratio) {
|
125
|
-
|
126
|
-
// start with an empty list to place all values in
|
127
|
-
$scale-values: ();
|
128
|
-
|
129
|
-
// make sure base sizes are in ascending order
|
130
|
-
$base-size: sort_list($base-size);
|
131
|
-
|
132
|
-
// take each base-size in turn
|
133
|
-
$k: 1;
|
134
|
-
@while $k <= length($base-size) {
|
135
|
-
|
136
|
-
// add each $base-size to the list except the first
|
137
|
-
@if $k > 1 {
|
138
|
-
$scale-values: append($scale-values, nth($base-size, $k));
|
139
|
-
}
|
140
|
-
|
141
|
-
// reset $modular-scale for each set
|
142
|
-
$modular-scale: nth($base-size, $k);
|
143
|
-
|
144
|
-
// do the scale for each base-size using this ratio
|
145
|
-
@if $multiple > 0 {
|
146
|
-
|
147
|
-
// up $multiple times
|
148
|
-
// and add the result to $scale-values
|
149
|
-
@for $i from 1 through $multiple {
|
150
|
-
$modular-scale: power($ratio, $i) * nth($base-size, $k);
|
151
|
-
$scale-values: append($scale-values, $modular-scale);
|
152
|
-
}
|
153
|
-
|
154
|
-
// and down until the value is lower than the lowest $base-size
|
155
|
-
// and add the result to $scale-values
|
156
|
-
$i: -1;
|
157
|
-
$modular-scale: nth($base-size, $k);
|
158
|
-
@while $modular-scale >= nth($base-size, 1) {
|
159
|
-
$modular-scale: power($ratio, $i) * nth($base-size, $k);
|
160
|
-
$scale-values: append($scale-values, $modular-scale);
|
161
|
-
$i: $i - 1;
|
162
|
-
}
|
163
|
-
}
|
164
|
-
@if $multiple < 0 {
|
165
|
-
|
166
|
-
// do the scale down for each set to below 1px
|
167
|
-
$i: 0;
|
168
|
-
$modular-scale: nth($base-size, $k);
|
169
|
-
@while $i >= $multiple {
|
170
|
-
$modular-scale: power($ratio, $i) * nth($base-size, $k);
|
171
|
-
$scale-values: append($scale-values, $modular-scale);
|
172
|
-
$i: $i - 1;
|
173
|
-
}
|
174
|
-
}
|
175
|
-
$k: $k + 1;
|
176
|
-
}
|
177
|
-
|
178
|
-
// return trimmed and sorted final list
|
179
|
-
@return trim-sort($multiple, $scale-values, $base-size);
|
180
|
-
}
|
181
|
-
|
182
|
-
// calculate values in using each ratio
|
183
|
-
@function ms-multiratio($multiple, $base-size: $base-size, $ratio: $ratio) {
|
184
|
-
|
185
|
-
// start with an empty list to place all values in
|
186
|
-
$scale-values: ();
|
187
|
-
|
188
|
-
// If $multiple is a positive integer (up the scale)
|
189
|
-
@if $multiple > 0 {
|
190
|
-
|
191
|
-
// take each ratio in turn
|
192
|
-
$j: 1;
|
193
|
-
@while $j <= length($ratio) {
|
194
|
-
|
195
|
-
// reset $modular-scale for each set
|
196
|
-
$modular-scale: $base-size;
|
197
|
-
|
198
|
-
// do the scale using this ratio thru the multiple, and add the result to $scale-values
|
199
|
-
@for $i from 1 through $multiple {
|
200
|
-
$modular-scale: power(nth($ratio, $j), $i) * $base-size;
|
201
|
-
$scale-values: append($scale-values, $modular-scale);
|
202
|
-
}
|
203
|
-
$j: $j + 1;
|
204
|
-
}
|
205
|
-
|
206
|
-
// sort acsending
|
207
|
-
$scale-values: sort_list($scale-values);
|
208
|
-
|
209
|
-
// return the final value using the laced list
|
210
|
-
@return nth($scale-values, $multiple);
|
211
|
-
}
|
212
|
-
|
213
|
-
// If $multiple is a negative integer (down the scale)
|
214
|
-
@if $multiple < 0 {
|
215
|
-
|
216
|
-
// take each ratio in turn
|
217
|
-
$j: 1;
|
218
|
-
@while $j <= length($ratio) {
|
219
|
-
|
220
|
-
// reset $modular-scale for each set
|
221
|
-
$modular-scale: $base-size;
|
222
|
-
|
223
|
-
// do the scale using this ratio thru the multiple, and add the result to $scale-values
|
224
|
-
@for $i from 1 through $multiple * -1 {
|
225
|
-
$modular-scale: power(nth($ratio, $j), -$i) * $base-size;
|
226
|
-
$scale-values: append($scale-values, $modular-scale);
|
227
|
-
}
|
228
|
-
$j: $j + 1;
|
229
|
-
}
|
230
|
-
|
231
|
-
// sort decending
|
232
|
-
$scale-values: reverse_list(sort_list($scale-values));
|
233
|
-
|
234
|
-
// return the final value using the laced list
|
235
|
-
@return nth($scale-values, $multiple * -1);
|
236
|
-
}
|
237
|
-
}
|
238
|
-
|
239
|
-
// trim and sort the final list
|
240
|
-
@function trim-sort($multiple, $scale-values: $scale-values, $base-size: $base-size) {
|
241
|
-
@if $multiple > 0 {
|
242
|
-
|
243
|
-
// trim list so we can count from the lowest $base-size
|
244
|
-
$scale-values: trim_list($scale-values, nth($base-size, 1), true);
|
245
|
-
|
246
|
-
// sort acsending
|
247
|
-
$scale-values: sort_list($scale-values);
|
248
|
-
|
249
|
-
// return the final value using the laced list
|
250
|
-
@return nth($scale-values, $multiple);
|
251
|
-
}
|
252
|
-
@else {
|
253
|
-
|
254
|
-
// trim list so we can count from the lowest $base-size
|
255
|
-
$scale-values: trim_list($scale-values, nth($base-size, 1), false);
|
256
|
-
|
257
|
-
// sort acsending
|
258
|
-
$scale-values: reverse_list(sort_list($scale-values));
|
259
|
-
|
260
|
-
// return the final value using the laced list
|
261
|
-
@return nth($scale-values, -$multiple);
|
262
|
-
}
|
263
|
-
}
|
264
|
-
|
265
|
-
/////////////////////////////////////////////////////////////////////////
|
266
|
-
|
267
|
-
// alias for golden_ratio()
|
268
|
-
@function golden() {
|
269
|
-
@return golden_ratio();
|
270
|
-
}
|
271
|
-
|
272
|
-
// Shortcut
|
273
|
-
@function ms($multiple, $base-size: $base-size, $ratio: $ratio, $round-pixels: $round-pixels) {
|
274
|
-
// Return the value from the Modular Scale function
|
275
|
-
@return modular-scale($multiple, $base-size, $ratio, $round-pixels);
|
276
|
-
}
|
277
|
-
|
278
|
-
// Write Modular Scale List
|
279
|
-
@function modular-scale-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio, $round-pixels: $round-pixels) {
|
280
|
-
$ms-list: unquote("MS-LIST:");
|
281
|
-
@for $i from $start through $finish {
|
282
|
-
$ms-list: append($ms-list, ms($i, $base-size, $ratio, $round-pixels));
|
283
|
-
}
|
284
|
-
@return $ms-list;
|
285
|
-
}
|
286
|
-
|
287
|
-
@function ms-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio, $round-pixels: $round-pixels) {
|
288
|
-
@return modular-scale-list($start, $finish, $base-size, $ratio, $round-pixels);
|
289
|
-
}
|
290
|
-
|
291
|
-
@mixin modular-scale-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio, $round-pixels: $round-pixels) {
|
292
|
-
@debug modular-scale-list($start, $finish, $base-size, $ratio, $round-pixels);
|
293
|
-
}
|
294
|
-
|
295
|
-
@mixin ms-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio, $round-pixels: $round-pixels) {
|
296
|
-
@debug modular-scale-list($start, $finish, $base-size, $ratio, $round-pixels);
|
297
|
-
}
|
298
|
-
|
299
|
-
@mixin modular-scale-list-output($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio, $round-pixels: $round-pixels) {
|
300
|
-
MODULAR-SCALE-LIST {
|
301
|
-
ms-list: modular-scale-list($start, $finish, $base-size, $ratio, $round-pixels);
|
302
|
-
}
|
303
|
-
}
|
304
|
-
|
305
|
-
@mixin ms-list-output($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio, $round-pixels: $round-pixels) {
|
306
|
-
@include modular-scale-list-output($start, $finish, $base-size, $ratio, $round-pixels);
|
307
|
-
}
|
308
|
-
|
309
|
-
// Other libraries can easily query if this function is avalible
|
310
|
-
$modular-scale-loaded: true;
|
8
|
+
@import "modular-scale/cache";
|
9
|
+
@import "modular-scale/pow";
|
10
|
+
@import "modular-scale/calc";
|
11
|
+
@import "modular-scale/generate-list";
|
12
|
+
@import "modular-scale/sort-list";
|
13
|
+
@import "modular-scale/function";
|
14
|
+
@import "modular-scale/function-list";
|
@@ -0,0 +1,25 @@
|
|
1
|
+
// An empty cache map
|
2
|
+
$MS-cache: ();
|
3
|
+
|
4
|
+
@function ms-cache($Value, $Bases, $Ratios, $Return) {
|
5
|
+
|
6
|
+
$MS-new-map: ();
|
7
|
+
|
8
|
+
@if $Value >= 0 {
|
9
|
+
$MS-new-map: (
|
10
|
+
"#{$Bases} #{$Ratios}": (
|
11
|
+
pos: $Return,
|
12
|
+
),
|
13
|
+
);
|
14
|
+
}
|
15
|
+
|
16
|
+
@if $Value < 0 {
|
17
|
+
$MS-new-map: (
|
18
|
+
"#{$Bases} #{$Ratios}": (
|
19
|
+
neg: $Return,
|
20
|
+
),
|
21
|
+
);
|
22
|
+
}
|
23
|
+
|
24
|
+
@return map-merge($MS-cache, $MS-new-map);
|
25
|
+
}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
@function ms-calc($Value, $Base: $ms-base, $Ratio: $ms-ratio) {
|
2
|
+
|
3
|
+
// If pow exists use it.
|
4
|
+
// It supports non-interger values!
|
5
|
+
@if $MS-pow-exists {
|
6
|
+
|
7
|
+
// The formula for figuring out modular scales is:
|
8
|
+
// (r^v)*b
|
9
|
+
@return pow($Ratio, $Value) * $Base;
|
10
|
+
}
|
11
|
+
|
12
|
+
// If not, use ms-pow().
|
13
|
+
// Not as fast or capable of non-integer exponents.
|
14
|
+
@else {
|
15
|
+
@return ms-pow($Ratio, $Value) * $Base;
|
16
|
+
}
|
17
|
+
}
|
@@ -0,0 +1,60 @@
|
|
1
|
+
// Outputs a list of values instead of a single value
|
2
|
+
@function ms-list($Start: 0, $End: 0, $Bases: $ms-base, $Ratios: $ms-ratio) {
|
3
|
+
|
4
|
+
$Positive-return: ();
|
5
|
+
$Negitive-return: ();
|
6
|
+
$Return: ();
|
7
|
+
|
8
|
+
@if $End >= 0 {
|
9
|
+
// Generate a list of all possible values
|
10
|
+
$Positive-return: ms-generate-list($End, $Bases, $Ratios);
|
11
|
+
|
12
|
+
// Sort the generated lists
|
13
|
+
$Positive-return: ms-sort-list($Positive-return);
|
14
|
+
|
15
|
+
// Trim list
|
16
|
+
$Trim-list: ();
|
17
|
+
// If the starting value is a positive number
|
18
|
+
// trim the positive return from that
|
19
|
+
@if $Start >= 0 {
|
20
|
+
@for $i from ($Start + 1) through $End + 1 {
|
21
|
+
$Trim-list: join($Trim-list, nth($Positive-return, $i));
|
22
|
+
}
|
23
|
+
}
|
24
|
+
// If not, then include everything up to the end.
|
25
|
+
@else {
|
26
|
+
@for $i from 1 through $End + 1 {
|
27
|
+
$Trim-list: join($Trim-list, nth($Positive-return, $i));
|
28
|
+
}
|
29
|
+
}
|
30
|
+
$Positive-return: $Trim-list;
|
31
|
+
}
|
32
|
+
|
33
|
+
// Generate a negitive list
|
34
|
+
@if $Start < 0 {
|
35
|
+
// Generate a list of all possible values
|
36
|
+
$Negitive-return: ms-generate-list($Start, $Bases, $Ratios);
|
37
|
+
|
38
|
+
// Sort the generated lists
|
39
|
+
$Negitive-return: ms-sort-list($Negitive-return);
|
40
|
+
|
41
|
+
// Trim list
|
42
|
+
$Trim-list: ();
|
43
|
+
@if $End < 0 {
|
44
|
+
@for $i from abs($End) through abs($Start) {
|
45
|
+
$Trim-list: join($Trim-list, nth($Negitive-return, $i));
|
46
|
+
}
|
47
|
+
}
|
48
|
+
@else {
|
49
|
+
@for $i from 1 through abs($Start) {
|
50
|
+
$Trim-list: join($Trim-list, nth($Negitive-return, $i));
|
51
|
+
}
|
52
|
+
}
|
53
|
+
$Negitive-return: $Trim-list;
|
54
|
+
}
|
55
|
+
|
56
|
+
// Join both positive and negitive possibilities.
|
57
|
+
$Return: join($Negitive-return, $Positive-return);
|
58
|
+
|
59
|
+
@return $Return;
|
60
|
+
}
|
@@ -0,0 +1,62 @@
|
|
1
|
+
// The main function that brings it all together
|
2
|
+
@function ms($Value: 0, $Bases: $ms-base, $Ratios: $ms-ratio) {
|
3
|
+
|
4
|
+
// If no multi-base or multi-ratio stuff is going on
|
5
|
+
// then just retrn the basic calculaiton
|
6
|
+
@if length($Bases) == 1 and length($Ratios) == 1 {
|
7
|
+
@return ms-calc($Value, $Bases, $Ratios);
|
8
|
+
}
|
9
|
+
|
10
|
+
// Use cached values if they exist
|
11
|
+
@if $MS-maps-exist {
|
12
|
+
// Find the map
|
13
|
+
// it's labeld with the base and ratio values
|
14
|
+
@if map-get($MS-cache, "#{$Bases} #{$Ratios}") {
|
15
|
+
// Positive list
|
16
|
+
$MS-pos: map-get(map-get($MS-cache, "#{$Bases} #{$Ratios}"), pos);
|
17
|
+
// See if the map matches the range
|
18
|
+
@if $Value >= 0 and length($MS-pos) > $Value {
|
19
|
+
@return nth($MS-pos, $Value + 1);
|
20
|
+
}
|
21
|
+
// And again for negitive values
|
22
|
+
$MS-neg: map-get(map-get($MS-cache, "#{$Bases} #{$Ratios}"), neg);
|
23
|
+
@if $Value < 0 and length($MS-neg) > abs($Value - 1) {
|
24
|
+
@return nth($MS-neg, $Value - 1);
|
25
|
+
}
|
26
|
+
}
|
27
|
+
// If nothing matched criteria in map
|
28
|
+
// then just carry on with calculaitons.
|
29
|
+
}
|
30
|
+
|
31
|
+
// Generate a list of all possible values
|
32
|
+
$Return: ms-generate-list($Value, $Bases, $Ratios);
|
33
|
+
|
34
|
+
// Sort the generated lists
|
35
|
+
$Return: ms-sort-list($Return);
|
36
|
+
|
37
|
+
// Cache
|
38
|
+
@if $MS-maps-exist {
|
39
|
+
$MS-cache: ms-cache($Value, $Bases, $Ratios, $Return) !global;
|
40
|
+
}
|
41
|
+
|
42
|
+
// Normalize value for counting from 1
|
43
|
+
// Because CSS counts things from 1
|
44
|
+
// So Sass does as well
|
45
|
+
// So I get to write fun stuff like this
|
46
|
+
@if $Value >= 0 {
|
47
|
+
$Value: $Value + 1;
|
48
|
+
}
|
49
|
+
@else {
|
50
|
+
$Value: $Value - 1;
|
51
|
+
}
|
52
|
+
|
53
|
+
// Find the correct value in the list
|
54
|
+
$Return: nth($Return, $Value);
|
55
|
+
|
56
|
+
@return $Return;
|
57
|
+
}
|
58
|
+
|
59
|
+
// Same function, different name, for good measure.
|
60
|
+
@function modular-scale($Value: 0, $Bases: $ms-base, $Ratios: $ms-ratio) {
|
61
|
+
@return ms($Value, $Bases, $Ratios);
|
62
|
+
}
|
@@ -0,0 +1,80 @@
|
|
1
|
+
@function ms-generate-list($Value: 0, $Bases: $ms-base, $Ratios: $ms-ratio) {
|
2
|
+
|
3
|
+
// Create blank lists
|
4
|
+
$MS-list: ();
|
5
|
+
$MS-base-list: ();
|
6
|
+
|
7
|
+
// Loop through each ratio AND each base
|
8
|
+
// to generate all possibilities.
|
9
|
+
@each $Ratio in $Ratios {
|
10
|
+
@each $Base in $Bases {
|
11
|
+
|
12
|
+
// Set base variables
|
13
|
+
$MS-base-list: ();
|
14
|
+
$Base-counter: 0;
|
15
|
+
|
16
|
+
// Seed list with an initial value
|
17
|
+
@if $Base == nth($Bases, 1) {
|
18
|
+
$MS-base-list: $Base;
|
19
|
+
}
|
20
|
+
|
21
|
+
// Find values on a positive scale
|
22
|
+
@if $Value > 0 {
|
23
|
+
|
24
|
+
// Find lower values on the scale
|
25
|
+
$Base-counter: -1;
|
26
|
+
@while ms-calc($Base-counter, $Base, $Ratio) >= nth($Bases, 1) {
|
27
|
+
$MS-base-list: join($MS-base-list, ms-calc($Base-counter, $Base, $Ratio));
|
28
|
+
$Base-counter: $Base-counter - 1;
|
29
|
+
}
|
30
|
+
|
31
|
+
// Find higher possible values on the scale
|
32
|
+
$Base-counter: 1;
|
33
|
+
@while ms-calc($Base-counter, $Base, $Ratio) <= ms-calc($Value, nth($Bases, 1), $ms-ratio) {
|
34
|
+
$MS-base-list: join($MS-base-list, ms-calc($Base-counter, $Base, $Ratio));
|
35
|
+
$Base-counter: $Base-counter + 1;
|
36
|
+
}
|
37
|
+
}
|
38
|
+
|
39
|
+
// Find values on a negitive scale
|
40
|
+
@if $Value < 0 {
|
41
|
+
|
42
|
+
// Find lower values on the scale
|
43
|
+
$Base-counter: 1;
|
44
|
+
@while ms-calc($Base-counter, $Base, $Ratio) <= nth($Bases, 1) {
|
45
|
+
$MS-base-list: join($MS-base-list, ms-calc($Base-counter, $Base, $Ratio));
|
46
|
+
$Base-counter: $Base-counter + 1;
|
47
|
+
}
|
48
|
+
|
49
|
+
// Find higher possible values on the scale
|
50
|
+
$Base-counter: -1;
|
51
|
+
@while ms-calc($Base-counter, $Base, $Ratio) >= ms-calc($Value, nth($Bases, 1), $Ratio) {
|
52
|
+
$MS-calc: ms-calc($Base-counter, $Base, $Ratio);
|
53
|
+
// detect if the value excedes the main base value
|
54
|
+
@if $MS-calc < nth($Bases, 1) {
|
55
|
+
$MS-base-list: join($MS-base-list, $MS-calc);
|
56
|
+
}
|
57
|
+
$Base-counter: $Base-counter - 1;
|
58
|
+
}
|
59
|
+
}
|
60
|
+
|
61
|
+
// reverse list if its largest to smallest
|
62
|
+
@if length($MS-base-list) > 1 {
|
63
|
+
@if nth($MS-base-list, 1) > nth($MS-base-list, length($MS-base-list)) {
|
64
|
+
$ms-reversed-list: ();
|
65
|
+
@each $Value in $MS-base-list {
|
66
|
+
$ms-reversed-list: join($Value, $ms-reversed-list);
|
67
|
+
}
|
68
|
+
$MS-base-list: $ms-reversed-list;
|
69
|
+
}
|
70
|
+
}
|
71
|
+
|
72
|
+
// Add new possibilities to the master list
|
73
|
+
$MS-list: append($MS-list, $MS-base-list, comma);
|
74
|
+
|
75
|
+
}
|
76
|
+
}
|
77
|
+
|
78
|
+
// After all the possibilities are found, output a master list
|
79
|
+
@return $MS-list;
|
80
|
+
}
|
@@ -0,0 +1,39 @@
|
|
1
|
+
// If a native exponent function doesnt exist
|
2
|
+
// this one is needed.
|
3
|
+
@function ms-pow($Base, $Exponent) {
|
4
|
+
|
5
|
+
// Find and remove unit.
|
6
|
+
// Avoids messyness with unit calculations
|
7
|
+
$Unit: $Base * 0 + 1;
|
8
|
+
$Base: $Base/$Unit;
|
9
|
+
|
10
|
+
// This function doesnt support non-interger exponents.
|
11
|
+
// Warn the user about why this is breaking.
|
12
|
+
@if round($Exponent) != $Exponent {
|
13
|
+
@warn "Unfortunately, you need Compass to use non-integer exponents";
|
14
|
+
}
|
15
|
+
|
16
|
+
// Set up the loop, priming the return with the base.
|
17
|
+
$Return: $Base;
|
18
|
+
|
19
|
+
// If the number is positive, multiply it.
|
20
|
+
@if $Exponent > 0 {
|
21
|
+
// Basic feedback loop as exponents
|
22
|
+
// are recursivley multiplied numbers.
|
23
|
+
@for $i from 1 to $Exponent {
|
24
|
+
$Return: $Return * $Base;
|
25
|
+
}
|
26
|
+
}
|
27
|
+
|
28
|
+
// If the number is 0 or negitive
|
29
|
+
// divide instead of multiply.
|
30
|
+
@else {
|
31
|
+
@for $i from -1 to abs($Exponent) {
|
32
|
+
$Return: $Return / $Base;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
// Return is now compounded redy to be returned.
|
37
|
+
// Add the unit back onto the number.
|
38
|
+
@return $Return * $Unit;
|
39
|
+
}
|
@@ -0,0 +1,20 @@
|
|
1
|
+
// Golden ratio
|
2
|
+
$phi : 1.618034 ;
|
3
|
+
$golden : $phi ;
|
4
|
+
|
5
|
+
$double-octave : 4 ;
|
6
|
+
$major-twelfth : 3 ;
|
7
|
+
$major-eleventh : 2.666666667 ;
|
8
|
+
$major-tenth : 2.5 ;
|
9
|
+
$octave : 2 ;
|
10
|
+
$major-seventh : 1.875 ;
|
11
|
+
$minor-seventh : 1.777777778 ;
|
12
|
+
$major-sixth : 1.666666667 ;
|
13
|
+
$minor-sixth : 1.6 ;
|
14
|
+
$fifth : 1.5 ;
|
15
|
+
$augmented-fourth : 1.41421 ;
|
16
|
+
$fourth : 1.333333333 ;
|
17
|
+
$major-third : 1.25 ;
|
18
|
+
$minor-third : 1.2 ;
|
19
|
+
$major-second : 1.125 ;
|
20
|
+
$minor-second : 1.066666667 ;
|
@@ -0,0 +1,92 @@
|
|
1
|
+
// List sorting via a modified merge-sort algorythmn
|
2
|
+
// http://en.wikipedia.org/wiki/Merge_sort
|
3
|
+
|
4
|
+
@function ms-merge($A, $B) {
|
5
|
+
|
6
|
+
$Return: ();
|
7
|
+
|
8
|
+
// Some empty lists get passed through
|
9
|
+
// so just pass the other list throguh
|
10
|
+
@if length($A) == 0 {
|
11
|
+
@return $B;
|
12
|
+
}
|
13
|
+
|
14
|
+
// If lists fit next to each other, just merge them
|
15
|
+
// This helps performance skipping the need to check each value
|
16
|
+
@if nth($A, length($A)) < nth($B, 1) {
|
17
|
+
@return join($A, $B);
|
18
|
+
}
|
19
|
+
@if nth($B, length($B)) < nth($A, 1) {
|
20
|
+
@return join($B, $A);
|
21
|
+
}
|
22
|
+
|
23
|
+
// Counters start at 1
|
24
|
+
$A-counter: 1;
|
25
|
+
$B-counter: 1;
|
26
|
+
|
27
|
+
// Start looping through all numbers in array
|
28
|
+
@while $A-counter <= length($A) and $B-counter <= length($B) {
|
29
|
+
|
30
|
+
// Check if the A value is smaller
|
31
|
+
// Uses or equal to avoid duplicate numbers
|
32
|
+
@if nth($A, $A-counter) <= nth($B, $B-counter) {
|
33
|
+
$Return: join($Return, nth($A, $A-counter));
|
34
|
+
$A-counter: $A-counter + 1;
|
35
|
+
}
|
36
|
+
|
37
|
+
// Check if the B value is smaller
|
38
|
+
@elseif nth($A, $A-counter) > nth($B, $B-counter) {
|
39
|
+
$Return: join($Return, nth($B, $B-counter));
|
40
|
+
$B-counter: $B-counter + 1;
|
41
|
+
}
|
42
|
+
}
|
43
|
+
|
44
|
+
|
45
|
+
// Run through remainder values in the list
|
46
|
+
@while $A-counter <= length($A) {
|
47
|
+
$Current: nth($A, $A-counter);
|
48
|
+
@if $Current != nth($Return, length($Return)) {
|
49
|
+
$Return: join($Return, $Current);
|
50
|
+
}
|
51
|
+
$A-counter: $A-counter + 1;
|
52
|
+
}
|
53
|
+
@while $B-counter <= length($B) {
|
54
|
+
$Current: nth($B, $B-counter);
|
55
|
+
@if $Current != nth($Return, length($Return)) {
|
56
|
+
$Return: join($Return, $Current);
|
57
|
+
}
|
58
|
+
$B-counter: $B-counter + 1;
|
59
|
+
}
|
60
|
+
|
61
|
+
// Done! return is now sorted and complete
|
62
|
+
@return $Return;
|
63
|
+
}
|
64
|
+
|
65
|
+
// Pull it all together
|
66
|
+
@function ms-sort-list($Lists) {
|
67
|
+
|
68
|
+
$Return: ();
|
69
|
+
|
70
|
+
@each $List in $Lists {
|
71
|
+
@if $Return == () {
|
72
|
+
$Return: $List;
|
73
|
+
}
|
74
|
+
@else {
|
75
|
+
$Return: ms-merge($List, $Return);
|
76
|
+
}
|
77
|
+
}
|
78
|
+
|
79
|
+
// final cleanup of repeated items
|
80
|
+
$Last: null;
|
81
|
+
$New-list: ();
|
82
|
+
@each $Item in $Return {
|
83
|
+
@if $Item != $Last {
|
84
|
+
$New-list: join($New-list, $Item);
|
85
|
+
}
|
86
|
+
$Last: $Item;
|
87
|
+
}
|
88
|
+
$Return: $New-list;
|
89
|
+
|
90
|
+
|
91
|
+
@return $Return;
|
92
|
+
}
|
@@ -0,0 +1,28 @@
|
|
1
|
+
// Feature testing
|
2
|
+
|
3
|
+
|
4
|
+
// Test if the pow() function exists
|
5
|
+
|
6
|
+
@function ms-pow-exists() {
|
7
|
+
@if pow(4, 2) == 16 {
|
8
|
+
@return true;
|
9
|
+
}
|
10
|
+
@return false;
|
11
|
+
}
|
12
|
+
|
13
|
+
$MS-pow-exists: ms-pow-exists();
|
14
|
+
|
15
|
+
|
16
|
+
// Test if map capability exists
|
17
|
+
// maps are used to cache calculations
|
18
|
+
|
19
|
+
@function ms-maps-exist() {
|
20
|
+
@if function-exists(map-get) == true {
|
21
|
+
@return true;
|
22
|
+
}
|
23
|
+
@else {
|
24
|
+
@return false;
|
25
|
+
}
|
26
|
+
}
|
27
|
+
|
28
|
+
$MS-maps-exist: ms-maps-exist();
|
metadata
CHANGED
@@ -1,103 +1,70 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: modular-scale
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version:
|
5
|
-
prerelease:
|
4
|
+
version: 2.0.0.alpha1
|
6
5
|
platform: ruby
|
7
6
|
authors:
|
8
|
-
-
|
9
|
-
- Adam Stacoviak
|
10
|
-
- Mason Wendell
|
7
|
+
- First Last
|
11
8
|
autorequire:
|
12
9
|
bindir: bin
|
13
10
|
cert_chain: []
|
14
|
-
date:
|
11
|
+
date: 2013-12-20 00:00:00.000000000 Z
|
15
12
|
dependencies:
|
16
|
-
- !ruby/object:Gem::Dependency
|
17
|
-
name: sass
|
18
|
-
requirement: !ruby/object:Gem::Requirement
|
19
|
-
none: false
|
20
|
-
requirements:
|
21
|
-
- - ! '>='
|
22
|
-
- !ruby/object:Gem::Version
|
23
|
-
version: 3.2.0
|
24
|
-
type: :runtime
|
25
|
-
prerelease: false
|
26
|
-
version_requirements: !ruby/object:Gem::Requirement
|
27
|
-
none: false
|
28
|
-
requirements:
|
29
|
-
- - ! '>='
|
30
|
-
- !ruby/object:Gem::Version
|
31
|
-
version: 3.2.0
|
32
13
|
- !ruby/object:Gem::Dependency
|
33
14
|
name: compass
|
34
15
|
requirement: !ruby/object:Gem::Requirement
|
35
|
-
none: false
|
36
|
-
requirements:
|
37
|
-
- - ! '>='
|
38
|
-
- !ruby/object:Gem::Version
|
39
|
-
version: 0.12.1
|
40
|
-
type: :runtime
|
41
|
-
prerelease: false
|
42
|
-
version_requirements: !ruby/object:Gem::Requirement
|
43
|
-
none: false
|
44
|
-
requirements:
|
45
|
-
- - ! '>='
|
46
|
-
- !ruby/object:Gem::Version
|
47
|
-
version: 0.12.1
|
48
|
-
- !ruby/object:Gem::Dependency
|
49
|
-
name: sassy-math
|
50
|
-
requirement: !ruby/object:Gem::Requirement
|
51
|
-
none: false
|
52
16
|
requirements:
|
53
|
-
- -
|
17
|
+
- - '>='
|
54
18
|
- !ruby/object:Gem::Version
|
55
|
-
version:
|
19
|
+
version: 0.12.0
|
56
20
|
type: :runtime
|
57
21
|
prerelease: false
|
58
22
|
version_requirements: !ruby/object:Gem::Requirement
|
59
|
-
none: false
|
60
23
|
requirements:
|
61
|
-
- -
|
24
|
+
- - '>='
|
62
25
|
- !ruby/object:Gem::Version
|
63
|
-
version:
|
64
|
-
description:
|
65
|
-
scale
|
26
|
+
version: 0.12.0
|
27
|
+
description: A generalized Compass extension to build off of
|
66
28
|
email:
|
67
|
-
-
|
68
|
-
- adam@stacoviak.com
|
69
|
-
- mason@canarypromo.com
|
29
|
+
- firstlast@extension.com
|
70
30
|
executables: []
|
71
31
|
extensions: []
|
72
32
|
extra_rdoc_files: []
|
73
33
|
files:
|
74
|
-
-
|
34
|
+
- license.md
|
75
35
|
- lib/modular-scale.rb
|
76
36
|
- stylesheets/_modular-scale.scss
|
77
|
-
|
78
|
-
|
37
|
+
- stylesheets/modular-scale/_cache.scss
|
38
|
+
- stylesheets/modular-scale/_calc.scss
|
39
|
+
- stylesheets/modular-scale/_function-list.scss
|
40
|
+
- stylesheets/modular-scale/_function.scss
|
41
|
+
- stylesheets/modular-scale/_generate-list.scss
|
42
|
+
- stylesheets/modular-scale/_pow.scss
|
43
|
+
- stylesheets/modular-scale/_ratios.scss
|
44
|
+
- stylesheets/modular-scale/_sort-list.scss
|
45
|
+
- stylesheets/modular-scale/_tests.scss
|
46
|
+
homepage: http://extension.com
|
47
|
+
licenses:
|
48
|
+
- MIT
|
49
|
+
metadata: {}
|
79
50
|
post_install_message:
|
80
51
|
rdoc_options: []
|
81
52
|
require_paths:
|
82
53
|
- lib
|
83
54
|
required_ruby_version: !ruby/object:Gem::Requirement
|
84
|
-
none: false
|
85
55
|
requirements:
|
86
|
-
- -
|
56
|
+
- - '>='
|
87
57
|
- !ruby/object:Gem::Version
|
88
58
|
version: '0'
|
89
59
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
90
|
-
none: false
|
91
60
|
requirements:
|
92
|
-
- -
|
61
|
+
- - '>='
|
93
62
|
- !ruby/object:Gem::Version
|
94
63
|
version: 1.3.6
|
95
64
|
requirements: []
|
96
|
-
rubyforge_project:
|
97
|
-
rubygems_version:
|
65
|
+
rubyforge_project: modular-scale
|
66
|
+
rubygems_version: 2.0.3
|
98
67
|
signing_key:
|
99
|
-
specification_version:
|
100
|
-
summary:
|
101
|
-
in proportion to a set size and ratio. Inspired by and adapted from Tim Brown's
|
102
|
-
modularscale.com.
|
68
|
+
specification_version: 4
|
69
|
+
summary: An easy to use system for writing and managing media queries.
|
103
70
|
test_files: []
|
data/readme.md
DELETED
@@ -1,138 +0,0 @@
|
|
1
|
-
# Sassy Modular Scale
|
2
|
-
|
3
|
-
## Put down the calculator and let Sass do the work.
|
4
|
-
|
5
|
-
Sassy Modular Scale is a Sass based mixin that calculates the incremental values of the modular scale in proportion to a set size and ratio. It was inspired by and adapted from Tim Brown's modularscale.com.
|
6
|
-
|
7
|
-
Sassy Modular Scale can be used as a [Compass](http://compass-style.org/) [extension](http://compass-style.org/help/tutorials/extensions/) and can be installed as a [Ruby gem](https://rubygems.org/gems/modular-scale).
|
8
|
-
|
9
|
-
## Installation
|
10
|
-
|
11
|
-
Usage requires Sass. Visit [sass-lang.com](http://sass-lang.com) to learn more and install.
|
12
|
-
|
13
|
-
`gem install modular-scale`
|
14
|
-
|
15
|
-
Add `require 'modular-scale'` to your Compass config file.
|
16
|
-
|
17
|
-
Import the file into your stylesheets: `@import 'modular-scale';`
|
18
|
-
|
19
|
-
## Usage
|
20
|
-
|
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.
|
22
|
-
|
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
|
-
You can also write the output to your CSS file if you are using the terminal:
|
44
|
-
|
45
|
-
```scss
|
46
|
-
@include ms-list-output($start, $end, $base-size, $ratio);
|
47
|
-
```
|
48
|
-
|
49
|
-
As a side effect of the modular-scale functions a `power` function is also available.
|
50
|
-
|
51
|
-
```scss
|
52
|
-
@include power($base, $power);
|
53
|
-
```
|
54
|
-
|
55
|
-
Sassy Modular Scale can be used as a function, like so:
|
56
|
-
|
57
|
-
```scss
|
58
|
-
// Use as a function. Fill in the multiple, base-size, and ratio
|
59
|
-
height: modular-scale(7, 16px, golden() );
|
60
|
-
```
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
You can also 'lace' multiple ratios together by passing them in as a list (space-separated)
|
65
|
-
|
66
|
-
```scss
|
67
|
-
.lace {
|
68
|
-
width: ms(7, 16px, golden() fourth() );
|
69
|
-
}
|
70
|
-
```
|
71
|
-
|
72
|
-
You can also set the $base-size variable to a list to interrelate two significant known sizes in your design
|
73
|
-
*note:* the starting point of the scale will always be the *lowest* value in this list
|
74
|
-
|
75
|
-
```scss
|
76
|
-
.multibases {
|
77
|
-
width: ms(7, 16px 300px, golden() );
|
78
|
-
}
|
79
|
-
```
|
80
|
-
|
81
|
-
You can use multiple $base-sizes and multiple $ratios together
|
82
|
-
|
83
|
-
```scss
|
84
|
-
.multibase-multiratio {
|
85
|
-
width: ms(7, 16px 300px, golden() fourth() );
|
86
|
-
}
|
87
|
-
```
|
88
|
-
|
89
|
-
## Ratios
|
90
|
-
|
91
|
-
Modular scale includes functions for a number of classic design and musical scale ratios. You can add your own ratios as well.
|
92
|
-
|
93
|
-
By default, the variable `$ratio` is set to `golden()`.
|
94
|
-
|
95
|
-
<table>
|
96
|
-
|
97
|
-
<tr><th>Function</th><th>Ratio</th><th>Decimal value</th></tr>
|
98
|
-
|
99
|
-
<tr><td>golden()</td><td>1:1.618</td><td>1.618</td></tr>
|
100
|
-
<tr><td>double-octave()</td><td>1:4</td><td>4</td></tr>
|
101
|
-
<tr><td>major-twelfth()</td><td>1:3</td><td>3</td></tr>
|
102
|
-
<tr><td>major-eleventh()</td><td>3:8</td><td>2.667</td></tr>
|
103
|
-
<tr><td>major-tenth()</td><td>2.5</td><td>2:5</td></tr>
|
104
|
-
<tr><td>octave()</td><td>1:2</td><td>2</td></tr>
|
105
|
-
<tr><td>major-seventh()</td><td>8:15</td><td>1.875</td></tr>
|
106
|
-
<tr><td>minor-seventh()</td><td>9:16</td><td>1.778</td></tr>
|
107
|
-
<tr><td>major-sixth()</td><td>3:5</td><td>1.667</td></tr>
|
108
|
-
<tr><td>minor-sixth()</td><td>5:8</td><td>1.6</td></tr>
|
109
|
-
<tr><td>fifth()</td><td>2:3</td><td>1.5</td></tr>
|
110
|
-
<tr><td>augmented-fourth()</td><td>1:√2</td><td>1.414</td></tr>
|
111
|
-
<tr><td>fourth()</td><td>3:4</td><td>1.333</td></tr>
|
112
|
-
<tr><td>major-third()</td><td>4:5</td><td>1.25</td></tr>
|
113
|
-
<tr><td>minor-third()</td><td>5:6</td><td>1.2</td></tr>
|
114
|
-
<tr><td>major-second()</td><td>8:9</td><td>1.125</td></tr>
|
115
|
-
<tr><td>minor-second()</td><td>15:16</td><td>1.067</td></tr>
|
116
|
-
|
117
|
-
</table>
|
118
|
-
|
119
|
-
Add your own ratio in Sass by setting a variable and passing that to modular-scale.
|
120
|
-
|
121
|
-
```scss
|
122
|
-
$my-variable: 1 / 3.14159265;
|
123
|
-
$ratio: $my-variable;
|
124
|
-
```
|
125
|
-
|
126
|
-
## Inspiration
|
127
|
-
|
128
|
-
Sassy Modular Scale was adapted from [modularscale.com](http://modularscale.com/) by Tim Brown ([@nicewebtype](http://twitter.com/nicewebtype)). Tim also wrote a supporting article at [A List Apart](http://www.alistapart.com/) titled ["More Meaningful Typography"](http://www.alistapart.com/articles/more-meaningful-typography/). Additional inspiration goes to [Robert Bringhurst](http://en.wikipedia.org/wiki/Robert_Bringhurst), author of ["The Elements of Typographic Style"](http://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style) - specifically Chapter 8 titled "Shaping the Page"
|
129
|
-
|
130
|
-
## License
|
131
|
-
|
132
|
-
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))
|
133
|
-
|
134
|
-
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:
|
135
|
-
|
136
|
-
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
137
|
-
|
138
|
-
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.
|