modular-scale 1.0.2 → 1.0.3
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
-
|