modular-scale 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.mdown +33 -27
- data/lib/modular-scale.rb +1 -1
- data/stylesheets/_modular-scale.sass +26 -20
- metadata +54 -64
data/README.mdown
CHANGED
|
@@ -24,7 +24,7 @@ Modular-scale is used as a function. Simply pass it through in place of any valu
|
|
|
24
24
|
width: modular-scale(2); // two up the modular scale
|
|
25
25
|
width: ms(2); // Shorthand for the line above
|
|
26
26
|
width: modular-scale(2, 1em); // two up the modular scale with a base size of 1em
|
|
27
|
-
width: modular-scale(2, 1em,
|
|
27
|
+
width: modular-scale(2, 1em, octave() ); // Same as above but on an octave scale
|
|
28
28
|
```
|
|
29
29
|
|
|
30
30
|
You can output a list to your terminal to help you find out what values are on your scale.
|
|
@@ -50,7 +50,7 @@ Sassy Modular Scale can be used as a function, like so:
|
|
|
50
50
|
|
|
51
51
|
```scss
|
|
52
52
|
// Use as a function. Fill in the multiple, base-size, and ratio
|
|
53
|
-
height: modular-scale(7, 16px,
|
|
53
|
+
height: modular-scale(7, 16px, golden() );
|
|
54
54
|
```
|
|
55
55
|
|
|
56
56
|
|
|
@@ -59,7 +59,7 @@ You can also 'lace' multiple ratios together by passing them in as a list (space
|
|
|
59
59
|
|
|
60
60
|
```scss
|
|
61
61
|
.lace {
|
|
62
|
-
width: ms(7, 16px,
|
|
62
|
+
width: ms(7, 16px, golden() fourth() );
|
|
63
63
|
}
|
|
64
64
|
```
|
|
65
65
|
|
|
@@ -68,7 +68,7 @@ You can also set the $base-size variable to a list to interrelate two significan
|
|
|
68
68
|
|
|
69
69
|
```scss
|
|
70
70
|
.multibases {
|
|
71
|
-
width: ms(7, 16px 300px,
|
|
71
|
+
width: ms(7, 16px 300px, golden() );
|
|
72
72
|
}
|
|
73
73
|
```
|
|
74
74
|
|
|
@@ -76,39 +76,45 @@ You can use multiple $base-sizes and multiple $ratios together
|
|
|
76
76
|
|
|
77
77
|
```scss
|
|
78
78
|
.multibase-multiratio {
|
|
79
|
-
width: ms(7, 16px 300px,
|
|
79
|
+
width: ms(7, 16px 300px, golden() fourth() );
|
|
80
80
|
}
|
|
81
81
|
```
|
|
82
82
|
|
|
83
|
-
|
|
84
83
|
## Ratios
|
|
85
84
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
85
|
+
Modular scale includes functions for a number of classic design and musical scale ratios. You can add your own ratios as well.
|
|
86
|
+
|
|
87
|
+
By default, the variable `$ratio` is set to `golden()`.
|
|
88
|
+
|
|
89
|
+
<table>
|
|
90
|
+
|
|
91
|
+
<tr><th>Function</th><th>Ratio</th><th>Decimal value</th></tr>
|
|
92
|
+
|
|
93
|
+
<tr><td>golden()</td><td>1:1.618</td><td>1.618</td></tr>
|
|
94
|
+
<tr><td>double-octave()</td><td>1:4</td><td>4</td></tr>
|
|
95
|
+
<tr><td>major-twelfth()</td><td>1:3</td><td>3</td></tr>
|
|
96
|
+
<tr><td>major-eleventh()</td><td>3:8</td><td>2.667</td></tr>
|
|
97
|
+
<tr><td>major-tenth()</td><td>2.5</td><td>2:5</td></tr>
|
|
98
|
+
<tr><td>octave()</td><td>1:2</td><td>2</td></tr>
|
|
99
|
+
<tr><td>major-seventh()</td><td>8:15</td><td>1.875</td></tr>
|
|
100
|
+
<tr><td>minor-seventh()</td><td>9:16</td><td>1.778</td></tr>
|
|
101
|
+
<tr><td>major-sixth()</td><td>3:5</td><td>1.667</td></tr>
|
|
102
|
+
<tr><td>minor-sixth()</td><td>5:8</td><td>1.6</td></tr>
|
|
103
|
+
<tr><td>fifth()</td><td>2:3</td><td>1.5</td></tr>
|
|
104
|
+
<tr><td>augmented-forth()</td><td>1:√2</td><td>1.414</td></tr>
|
|
105
|
+
<tr><td>fourth()</td><td>3:4</td><td>1.333</td></tr>
|
|
106
|
+
<tr><td>major-third()</td><td>4:5</td><td>1.25</td></tr>
|
|
107
|
+
<tr><td>minor-third()</td><td>5:6</td><td>1.2</td></tr>
|
|
108
|
+
<tr><td>major-second()</td><td>8:9</td><td>1.125</td></tr>
|
|
109
|
+
<tr><td>minor-second()</td><td>15:16</td><td>1.067</td></tr>
|
|
110
|
+
|
|
111
|
+
</table>
|
|
107
112
|
|
|
108
113
|
Add your own ratio in Sass by setting a variable and passing that to modular-scale.
|
|
109
114
|
|
|
110
115
|
```scss
|
|
111
116
|
$my-variable: 1 / 3.14159265;
|
|
117
|
+
$ratio: $my-variable;
|
|
112
118
|
```
|
|
113
119
|
|
|
114
120
|
## Inspiration
|
data/lib/modular-scale.rb
CHANGED
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
// Defaults
|
|
5
5
|
$ratio: golden_ratio() !default
|
|
6
6
|
$base-size: 16px !default
|
|
7
|
-
$
|
|
7
|
+
$round-pixels: true !default
|
|
8
8
|
|
|
9
9
|
// Modular Scale function
|
|
10
|
-
@function modular-scale($multiple, $base-size: $base-size, $ratio: $ratio, $
|
|
10
|
+
@function modular-scale($multiple, $base-size: $base-size, $ratio: $ratio, $round-pixels: $round-pixels)
|
|
11
11
|
// return the $base-size if $multiple is zero
|
|
12
12
|
@if $multiple == 0
|
|
13
13
|
@if type-of($base-size) == 'list'
|
|
@@ -20,32 +20,32 @@ $round_pixels: true !default
|
|
|
20
20
|
// and multiple ratios are passed in as a list
|
|
21
21
|
// calculate values in using each base-size / ratio combination
|
|
22
22
|
@if type-of($base-size) == 'list' and type-of($ratio) == 'list'
|
|
23
|
-
@if unit(ms-multibase-multiratio($multiple, $base-size, $ratio)) == 'px' and $
|
|
23
|
+
@if unit(ms-multibase-multiratio($multiple, $base-size, $ratio)) == 'px' and $round-pixels == true
|
|
24
24
|
@return round(ms-multibase-multiratio($multiple, $base-size, $ratio))
|
|
25
25
|
@return ms-multibase-multiratio($multiple, $base-size, $ratio)
|
|
26
26
|
|
|
27
27
|
// if multiple base-sizes are passed in as a list
|
|
28
28
|
// calculate values in using each base-size
|
|
29
29
|
@if type-of($base-size) == 'list' and type-of($ratio) == 'number'
|
|
30
|
-
@if unit(ms-multibase($multiple, $base-size, $ratio)) == 'px' and $
|
|
30
|
+
@if unit(ms-multibase($multiple, $base-size, $ratio)) == 'px' and $round-pixels == true
|
|
31
31
|
@return round(ms-multibase($multiple, $base-size, $ratio))
|
|
32
32
|
@return ms-multibase($multiple, $base-size, $ratio)
|
|
33
33
|
|
|
34
34
|
// if multiple ratios are passed in as a list
|
|
35
35
|
// calculate values in using each ratio
|
|
36
36
|
@if type-of($base-size) == 'number' and type-of($ratio) == 'list'
|
|
37
|
-
@if unit(ms-multiratio($multiple, $base-size, $ratio)) == 'px' and $
|
|
37
|
+
@if unit(ms-multiratio($multiple, $base-size, $ratio)) == 'px' and $round-pixels == true
|
|
38
38
|
@return round(ms-multiratio($multiple, $base-size, $ratio))
|
|
39
39
|
@return ms-multiratio($multiple, $base-size, $ratio)
|
|
40
40
|
|
|
41
41
|
// If there are no lists just run the simple function
|
|
42
|
-
@if unit(power($ratio, $multiple) * $base-size) == 'px' and $
|
|
42
|
+
@if unit(power($ratio, $multiple) * $base-size) == 'px' and $round-pixels == true
|
|
43
43
|
@return round(power($ratio, $multiple) * $base-size)
|
|
44
44
|
@return power($ratio, $multiple) * $base-size
|
|
45
45
|
|
|
46
46
|
|
|
47
47
|
// calculate values in using each base-size / ratio combination
|
|
48
|
-
@function ms-multibase-multiratio($multiple, $base-size, $ratio)
|
|
48
|
+
@function ms-multibase-multiratio($multiple, $base-size: $base-size, $ratio: $ratio)
|
|
49
49
|
// start with an empty list to place all values in
|
|
50
50
|
$scale-values: ()
|
|
51
51
|
// make sure base sizes are in ascending order
|
|
@@ -91,7 +91,7 @@ $round_pixels: true !default
|
|
|
91
91
|
|
|
92
92
|
|
|
93
93
|
// calculate values in using each base-size
|
|
94
|
-
@function ms-multibase($multiple, $base-size, $ratio)
|
|
94
|
+
@function ms-multibase($multiple, $base-size: $base-size, $ratio: $ratio)
|
|
95
95
|
// start with an empty list to place all values in
|
|
96
96
|
$scale-values: ()
|
|
97
97
|
// make sure base sizes are in ascending order
|
|
@@ -133,7 +133,7 @@ $round_pixels: true !default
|
|
|
133
133
|
|
|
134
134
|
|
|
135
135
|
// calculate values in using each ratio
|
|
136
|
-
@function ms-multiratio($multiple, $base-size, $ratio)
|
|
136
|
+
@function ms-multiratio($multiple, $base-size: $base-size, $ratio: $ratio)
|
|
137
137
|
// start with an empty list to place all values in
|
|
138
138
|
$scale-values: ()
|
|
139
139
|
// If $multiple is a positive integer (up the scale)
|
|
@@ -171,7 +171,7 @@ $round_pixels: true !default
|
|
|
171
171
|
|
|
172
172
|
|
|
173
173
|
// trim and sort the final list
|
|
174
|
-
@function trim-sort($multiple, $scale-values, $base-size)
|
|
174
|
+
@function trim-sort($multiple, $scale-values: $scale-values, $base-size: $base-size)
|
|
175
175
|
@if $multiple > 0
|
|
176
176
|
// trim list so we can count from the lowest $base-size
|
|
177
177
|
$scale-values: trim_list($scale-values, nth($base-size, 1), true)
|
|
@@ -195,26 +195,32 @@ $round_pixels: true !default
|
|
|
195
195
|
@return golden_ratio()
|
|
196
196
|
|
|
197
197
|
// Shortcut
|
|
198
|
-
@function ms($
|
|
198
|
+
@function ms($multiple, $base-size: $base-size, $ratio: $ratio, $round-pixels: $round-pixels)
|
|
199
199
|
// Return the value from the Modular Scale function
|
|
200
|
-
@return modular-scale($
|
|
200
|
+
@return modular-scale($multiple, $base-size, $ratio, $round-pixels)
|
|
201
201
|
|
|
202
202
|
// Write Modular Scale List
|
|
203
|
-
@function modular-scale-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio)
|
|
203
|
+
@function modular-scale-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio, $round-pixels: $round-pixels)
|
|
204
204
|
$ms-list: unquote("MS-LIST:")
|
|
205
205
|
@for $i from $start through $finish
|
|
206
|
-
$ms-list: append($ms-list, ms($i, $base-size, $ratio))
|
|
206
|
+
$ms-list: append($ms-list, ms($i, $base-size, $ratio, $round-pixels))
|
|
207
207
|
@return $ms-list
|
|
208
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)
|
|
209
|
+
@function ms-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio, $round-pixels: $round-pixels)
|
|
210
|
+
@return modular-scale-list($start, $finish, $base-size, $ratio, $round-pixels)
|
|
211
211
|
|
|
212
|
-
=modular-scale-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio)
|
|
213
|
-
@debug modular-scale-list($start, $finish, $base-size, $ratio)
|
|
212
|
+
=modular-scale-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio, $round-pixels: $round-pixels)
|
|
213
|
+
@debug modular-scale-list($start, $finish, $base-size, $ratio, $round-pixels)
|
|
214
214
|
|
|
215
|
-
=ms-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio)
|
|
216
|
-
@debug modular-scale-list($start, $finish, $base-size, $ratio)
|
|
215
|
+
=ms-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio, $round-pixels: $round-pixels)
|
|
216
|
+
@debug modular-scale-list($start, $finish, $base-size, $ratio, $round-pixels)
|
|
217
217
|
|
|
218
|
+
=modular-scale-list-output($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio, $round-pixels: $round-pixels)
|
|
219
|
+
MODULAR-SCALE-LIST
|
|
220
|
+
•: modular-scale-list($start, $finish, $base-size, $ratio, $round-pixels)
|
|
221
|
+
|
|
222
|
+
=ms-list-output($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio, $round-pixels: $round-pixels)
|
|
223
|
+
+modular-scale-list-output($start, $finish, $base-size, $ratio, $round-pixels)
|
|
218
224
|
|
|
219
225
|
// Other libraries can easily query if this function is avalible
|
|
220
226
|
$modular-scale-loaded: true
|
metadata
CHANGED
|
@@ -1,97 +1,87 @@
|
|
|
1
|
-
--- !ruby/object:Gem::Specification
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: modular-scale
|
|
3
|
-
version: !ruby/object:Gem::Version
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
- 1
|
|
7
|
-
- 0
|
|
8
|
-
- 2
|
|
9
|
-
version: 1.0.2
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
version: 1.0.3
|
|
5
|
+
prerelease:
|
|
10
6
|
platform: ruby
|
|
11
|
-
authors:
|
|
7
|
+
authors:
|
|
12
8
|
- Scott Kellum
|
|
13
9
|
- Adam Stacoviak
|
|
14
10
|
- Mason Wendell
|
|
15
11
|
autorequire:
|
|
16
12
|
bindir: bin
|
|
17
13
|
cert_chain: []
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
dependencies:
|
|
22
|
-
- !ruby/object:Gem::Dependency
|
|
14
|
+
date: 2012-08-13 00:00:00.000000000 Z
|
|
15
|
+
dependencies:
|
|
16
|
+
- !ruby/object:Gem::Dependency
|
|
23
17
|
name: compass
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
requirements:
|
|
27
|
-
- -
|
|
28
|
-
- !ruby/object:Gem::Version
|
|
29
|
-
segments:
|
|
30
|
-
- 0
|
|
31
|
-
- 11
|
|
32
|
-
- 5
|
|
18
|
+
requirement: !ruby/object:Gem::Requirement
|
|
19
|
+
none: false
|
|
20
|
+
requirements:
|
|
21
|
+
- - ! '>='
|
|
22
|
+
- !ruby/object:Gem::Version
|
|
33
23
|
version: 0.11.5
|
|
34
24
|
type: :runtime
|
|
35
|
-
version_requirements: *id001
|
|
36
|
-
- !ruby/object:Gem::Dependency
|
|
37
|
-
name: sassy-math
|
|
38
25
|
prerelease: false
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
26
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
27
|
+
none: false
|
|
28
|
+
requirements:
|
|
29
|
+
- - ! '>='
|
|
30
|
+
- !ruby/object:Gem::Version
|
|
31
|
+
version: 0.11.5
|
|
32
|
+
- !ruby/object:Gem::Dependency
|
|
33
|
+
name: sassy-math
|
|
34
|
+
requirement: !ruby/object:Gem::Requirement
|
|
35
|
+
none: false
|
|
36
|
+
requirements:
|
|
37
|
+
- - ! '>='
|
|
38
|
+
- !ruby/object:Gem::Version
|
|
39
|
+
version: '1.2'
|
|
47
40
|
type: :runtime
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
41
|
+
prerelease: false
|
|
42
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
43
|
+
none: false
|
|
44
|
+
requirements:
|
|
45
|
+
- - ! '>='
|
|
46
|
+
- !ruby/object:Gem::Version
|
|
47
|
+
version: '1.2'
|
|
48
|
+
description: Sassy Modular Scale calculates the incremental values of the modular
|
|
49
|
+
scale.
|
|
50
|
+
email:
|
|
51
51
|
- scott@scottkellum.com
|
|
52
52
|
- adam@stacoviak.com
|
|
53
53
|
- mason@canarypromo.com
|
|
54
54
|
executables: []
|
|
55
|
-
|
|
56
55
|
extensions: []
|
|
57
|
-
|
|
58
56
|
extra_rdoc_files: []
|
|
59
|
-
|
|
60
|
-
files:
|
|
57
|
+
files:
|
|
61
58
|
- README.mdown
|
|
62
59
|
- lib/modular-scale.rb
|
|
63
60
|
- stylesheets/_modular-scale.sass
|
|
64
|
-
has_rdoc: true
|
|
65
61
|
homepage: https://github.com/scottkellum/modular-scale
|
|
66
62
|
licenses: []
|
|
67
|
-
|
|
68
63
|
post_install_message:
|
|
69
64
|
rdoc_options: []
|
|
70
|
-
|
|
71
|
-
require_paths:
|
|
65
|
+
require_paths:
|
|
72
66
|
- lib
|
|
73
|
-
required_ruby_version: !ruby/object:Gem::Requirement
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
requirements:
|
|
82
|
-
- -
|
|
83
|
-
- !ruby/object:Gem::Version
|
|
84
|
-
segments:
|
|
85
|
-
- 1
|
|
86
|
-
- 3
|
|
87
|
-
- 6
|
|
67
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
68
|
+
none: false
|
|
69
|
+
requirements:
|
|
70
|
+
- - ! '>='
|
|
71
|
+
- !ruby/object:Gem::Version
|
|
72
|
+
version: '0'
|
|
73
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
74
|
+
none: false
|
|
75
|
+
requirements:
|
|
76
|
+
- - ! '>='
|
|
77
|
+
- !ruby/object:Gem::Version
|
|
88
78
|
version: 1.3.6
|
|
89
79
|
requirements: []
|
|
90
|
-
|
|
91
80
|
rubyforge_project:
|
|
92
|
-
rubygems_version: 1.
|
|
81
|
+
rubygems_version: 1.8.24
|
|
93
82
|
signing_key:
|
|
94
83
|
specification_version: 3
|
|
95
|
-
summary: Sassy Modular Scale calculates the incremental values of the modular scale
|
|
84
|
+
summary: Sassy Modular Scale calculates the incremental values of the modular scale
|
|
85
|
+
in proportion to a set size and ratio. Inspired by and adapted from Tim Brown's
|
|
86
|
+
modularscale.com.
|
|
96
87
|
test_files: []
|
|
97
|
-
|