modular-scale 0.0.4 → 0.0.5
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 +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:
|