modular-scale 0.0.4 → 0.0.5
Sign up to get free protection for your applications and to get access to all the features.
- data/README.mdown +22 -54
- data/lib/modular-scale.rb +1 -1
- data/stylesheets/_modular-scale.sass +12 -1
- metadata +4 -4
data/README.mdown
CHANGED
@@ -25,49 +25,12 @@ Compass provides a way for Sass mixins to be easily required into a project, but
|
|
25
25
|
|
26
26
|
Sassy Modular Scale can be used as a function, mixin or a mixin that generates a range of classes to `@extend`.
|
27
27
|
|
28
|
-
Examples using the Sass syntax:
|
29
|
-
|
30
|
-
```sass
|
31
|
-
// Use as a function. Fill in the multiple, base-size, and ratio
|
32
|
-
height: modular-scale(7, 14px, $golden)
|
33
|
-
|
34
|
-
// Use as a mixin. Fill in the property, multiple, base-size, and ratio
|
35
|
-
+modular-scale(line-height, 1, 14px, $golden)
|
36
|
-
|
37
|
-
// This method will generate a range of classes to `@extend`
|
38
|
-
+modular-scale-classes(6)
|
39
|
-
|
40
|
-
h1
|
41
|
-
@extend .ms-2
|
42
|
-
h2
|
43
|
-
@extend .ms-1
|
44
|
-
h3
|
45
|
-
@extend .ms-0
|
46
|
-
|
47
|
-
// You can also 'lace' multiple ratios together by
|
48
|
-
// passing them in as a list (space-separated)
|
49
|
-
.lace
|
50
|
-
width: ms(7, 14px, $golden $fourth)
|
51
|
-
|
52
|
-
// You can also set the $base-size variable to a list
|
53
|
-
// to interrelate two significant known sizes in your design
|
54
|
-
// note: the starting point of the scale will always be the *lowest* value in this list
|
55
|
-
.multibases
|
56
|
-
width: ms(7, 14px 300px, $golden)
|
57
|
-
|
58
|
-
// You can use multiple $base-sizes and multiple $ratios together
|
59
|
-
.multibase-multiratio
|
60
|
-
width: ms(7, 14px 300px, $golden $fourth)
|
61
|
-
```
|
62
|
-
|
63
|
-
Examples using the SCSS syntax:
|
64
|
-
|
65
28
|
```scss
|
66
29
|
// Use as a function. Fill in the multiple, base-size, and ratio
|
67
|
-
height: modular-scale(7,
|
30
|
+
height: modular-scale(7, 16px, $golden);
|
68
31
|
|
69
32
|
// Use as a mixin. Fill in the property, multiple, base-size, and ratio
|
70
|
-
@include modular-scale(line-height, 1,
|
33
|
+
@include modular-scale(line-height, 1, 16px, $golden);
|
71
34
|
|
72
35
|
// This method will generate a range of classes to `@extend`
|
73
36
|
@include modular-scale-classes(6);
|
@@ -79,19 +42,19 @@ h3 { @extend .ms-0; }
|
|
79
42
|
// You can also 'lace' multiple ratios together by
|
80
43
|
// passing them in as a list (space-separated)
|
81
44
|
.lace {
|
82
|
-
width: ms(7,
|
45
|
+
width: ms(7, 16px, $golden $fourth);
|
83
46
|
}
|
84
47
|
|
85
48
|
// You can also set the $base-size variable to a list
|
86
49
|
// to interrelate two significant known sizes in your design
|
87
50
|
// note: the starting point of the scale will always be the *lowest* value in this list
|
88
51
|
.multibases {
|
89
|
-
width: ms(7,
|
52
|
+
width: ms(7, 16px 300px, $golden);
|
90
53
|
}
|
91
54
|
|
92
55
|
// You can use multiple $base-sizes and multiple $ratios together
|
93
56
|
.multibase-multiratio {
|
94
|
-
width: ms(7,
|
57
|
+
width: ms(7, 16px 300px, $golden $fourth);
|
95
58
|
}
|
96
59
|
```
|
97
60
|
|
@@ -100,18 +63,23 @@ h3 { @extend .ms-0; }
|
|
100
63
|
|
101
64
|
Below is a list of Ratios to choose from. By default, the variable `$ratio` is set to `$golden`.
|
102
65
|
|
103
|
-
* $golden: 1.618
|
104
|
-
* $octave:
|
105
|
-
* $major-
|
106
|
-
* $
|
107
|
-
* $major-
|
108
|
-
* $
|
109
|
-
* $
|
110
|
-
* $
|
111
|
-
* $major-
|
112
|
-
* $minor-
|
113
|
-
* $
|
114
|
-
* $
|
66
|
+
* $golden: 1.618
|
67
|
+
* $double-octave: (4 / 1)
|
68
|
+
* $major-twelfth: (3 / 1)
|
69
|
+
* $major-eleventh: (8 / 3)
|
70
|
+
* $major-tenth: (5 / 2)
|
71
|
+
* $octave: (2 / 1)
|
72
|
+
* $major-seventh: (15 / 8)
|
73
|
+
* $minor-seventh: (16 / 9)
|
74
|
+
* $major-sixth: (5 / 3)
|
75
|
+
* $minor-sixth: (8 / 5)
|
76
|
+
* $fifth: (3 / 2)
|
77
|
+
* $augfourth: (1 / √2)
|
78
|
+
* $fourth: (4 / 3)
|
79
|
+
* $major-third: (5 / 4)
|
80
|
+
* $minor-third: (6 / 5)
|
81
|
+
* $major-second: (9 / 8)
|
82
|
+
* $minor-second: (16 / 15)
|
115
83
|
|
116
84
|
## Inspiration
|
117
85
|
|
data/lib/modular-scale.rb
CHANGED
@@ -1,14 +1,22 @@
|
|
1
1
|
// SASSY MODULAR-SCALE
|
2
2
|
// https://github.com/scottkellum/modular-scale
|
3
3
|
|
4
|
+
@charset "UTF-8"
|
5
|
+
|
4
6
|
// Ratios
|
5
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)
|
6
13
|
$octave: (2 / 1)
|
7
14
|
$major-seventh: (15 / 8)
|
8
15
|
$minor-seventh: (16 / 9)
|
9
16
|
$major-sixth: (5 / 3)
|
10
17
|
$minor-sixth: (8 / 5)
|
11
18
|
$fifth: (3 / 2)
|
19
|
+
$augfourth: (1 / 1.4142135623730950488) // (1 / √2)
|
12
20
|
$fourth: (4 / 3)
|
13
21
|
$major-third: (5 / 4)
|
14
22
|
$minor-third: (6 / 5)
|
@@ -17,7 +25,7 @@ $minor-second: (16 / 15)
|
|
17
25
|
|
18
26
|
// Defaults
|
19
27
|
$ratio: $golden !default
|
20
|
-
$base-size:
|
28
|
+
$base-size: 16px !default
|
21
29
|
$property: font-size !default
|
22
30
|
$class-slug: ms !default
|
23
31
|
|
@@ -307,3 +315,6 @@ $class-slug: ms !default
|
|
307
315
|
@if nth($list, $i) <= $start
|
308
316
|
$trimmed: append($trimmed, nth($list, $i))
|
309
317
|
@return $trimmed
|
318
|
+
|
319
|
+
// Other libraries can easily query if this function is avalible
|
320
|
+
$modular-scale-loaded: true
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: modular-scale
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.5
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -15,7 +15,7 @@ date: 2011-09-15 00:00:00.000000000Z
|
|
15
15
|
dependencies:
|
16
16
|
- !ruby/object:Gem::Dependency
|
17
17
|
name: compass
|
18
|
-
requirement: &
|
18
|
+
requirement: &70108860747360 !ruby/object:Gem::Requirement
|
19
19
|
none: false
|
20
20
|
requirements:
|
21
21
|
- - ! '>='
|
@@ -23,7 +23,7 @@ dependencies:
|
|
23
23
|
version: 0.11.5
|
24
24
|
type: :runtime
|
25
25
|
prerelease: false
|
26
|
-
version_requirements: *
|
26
|
+
version_requirements: *70108860747360
|
27
27
|
description: Sassy Modular Scale calculates the incremental values of the modular
|
28
28
|
scale.
|
29
29
|
email:
|
@@ -51,7 +51,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
51
51
|
version: '0'
|
52
52
|
segments:
|
53
53
|
- 0
|
54
|
-
hash:
|
54
|
+
hash: -3912929455498838517
|
55
55
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
56
56
|
none: false
|
57
57
|
requirements:
|