survivalkit 0.1.1 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
data/README.markdown
CHANGED
@@ -1,29 +1,39 @@
|
|
1
|
-
# The Coding Designer's Survival Kit
|
1
|
+
# [The Coding Designer's Survival Kit](http://thecodingdesigner.com)
|
2
2
|
|
3
|
-
|
3
|
+
**A Toolset for Designing Web Sites in the Browser**
|
4
4
|
|
5
|
-
This is a collection of Design-in-Browser tools and some great default markup. The idea here is that when you're designing in the browser you need something to design, and some great helpers to get your ideas onto the screen with as little friction as possible. I'm starting with the excellent HTML5 Boilerplate for the default markup. I'm also including some html files with common markup that needs to be designed for.
|
6
5
|
|
7
|
-
|
8
|
-
- __elements.html__ includes a collection of standard html elements
|
9
|
-
- You'll find many other, including basic forms, content pages, sidebars, footers, etc
|
6
|
+
## Tools
|
10
7
|
|
11
|
-
|
8
|
+
1. A set of starter HTML files to rapidly create a [living style guide](http://24ways.org/2011/front-end-style-guides) with most common **HTML elements and ui patterns**. It's easy to design and style these as is or customize them to your needs. Plus there's a blank page, based on the [HTML5 Boilerplate](http://html5boilerplate.com). Fill that with content and it won't be blank anymore.
|
9
|
+
2. A set of **[Sass](http://sass-lang.com/)** mixins and patterns.
|
10
|
+
3. A flexible and comprehensive **Sass workflow** that focuses on giving you a ton of tools, but makes very few assumptions on how you'll use them. Keep your css as clean as you like, go mobile first, or build a very custom responsive site.
|
11
|
+
4. Your favorite open source **javascript libraries**. But you don't need them all, all the time. The Survival Kit keeps them in a "side drawer" and you can experiment or use them as you need them.
|
12
|
+
5. A set of templates for creating [Style Tiles](http://badassideas.com/style-tiles-as-a-web-design-process-tool/), a very useful tool for conveying design concepts to clients.
|
12
13
|
|
13
|
-
## Installation
|
14
14
|
|
15
|
-
|
16
|
-
|
17
|
-
|
15
|
+
## Using the Survival Kit
|
16
|
+
|
17
|
+
The Survival Kit is a Compass extension. That means that you need to be using [Sass](http://sass-lang.com/) and [Compass](http://compass-style.org/), but you already are, right? It uses the "install" command from Compass to write the html, sass or scss, javascript and other assets into the directories you specify in your Compass configuration file.
|
18
|
+
|
19
|
+
### Installation
|
20
|
+
|
21
|
+
0. [Install Sass and Compass](http://compass-style.org/install/), if you haven't already.
|
22
|
+
1. **Terminal**: `gem install survivalkit`
|
23
|
+
|
24
|
+
#### For Existing Compass Projects
|
18
25
|
1. Add `require 'survivalkit'` in Compass's config.rb file
|
19
|
-
2.
|
20
|
-
|
21
|
-
|
22
|
-
|
26
|
+
2. **Terminal**: navigate to your project directory: `cd PATH_TO_YOUR_PROJECT`
|
27
|
+
2. **Terminal**: `compass install survivalkit`
|
28
|
+
|
29
|
+
#### For New Compass Projects
|
30
|
+
2. **Terminal**: `compass create my_project -r survivalkit -u survivalkit --javascripts-dir js --css-dir css`
|
31
|
+
|
23
32
|
|
24
33
|
## Getting Started
|
25
34
|
|
26
|
-
I've created an intro [screencast](http://thecodingdesigner.com/tutorials/please-allow-me-introduce-myself) and a video podcast about using the Kit while designing in the browser at [The Coding Designer](http://thecodingdesigner.com/)
|
35
|
+
~~I've created an intro [screencast](http://thecodingdesigner.com/tutorials/please-allow-me-introduce-myself) and a video podcast about using the Kit while designing in the browser at [The Coding Designer](http://thecodingdesigner.com/)~~
|
36
|
+
I'll be recording a new video soon.
|
27
37
|
|
28
38
|
## Requirements
|
29
39
|
|
@@ -49,13 +59,10 @@ I've created an intro [screencast](http://thecodingdesigner.com/tutorials/please
|
|
49
59
|
- [Modernizr](http://modernizr.com/)
|
50
60
|
- [Selectivizr](http://selectivizr.com/)
|
51
61
|
- [Modularscale](http://modularscale.com/)
|
52
|
-
- more, more, more
|
53
62
|
- [Screencast](http://thecodingdesigner.com/)
|
54
63
|
|
55
64
|
|
56
65
|
|
57
|
-
|
58
|
-
|
59
66
|
## License
|
60
67
|
|
61
68
|
Licensed under MIT/GPL.
|
@@ -67,7 +74,7 @@ MIT license:
|
|
67
74
|
http://www.opensource.org/licenses/mit-license.php
|
68
75
|
|
69
76
|
|
70
|
-
Except included open source projects:
|
77
|
+
Except included open source projects:
|
71
78
|
|
72
79
|
- BigText: MIT/GPL
|
73
80
|
- Dynamic-Carousel: MIT
|
data/lib/survivalkit.rb
CHANGED
@@ -0,0 +1,180 @@
|
|
1
|
+
// Define color schemes quickly
|
2
|
+
|
3
|
+
// Color schemes to choose from
|
4
|
+
// mono
|
5
|
+
// complement
|
6
|
+
// triad
|
7
|
+
// tetrad
|
8
|
+
// analogic
|
9
|
+
// accented-analogic
|
10
|
+
|
11
|
+
$color-location: primary !default
|
12
|
+
$base-color: #f00 !default
|
13
|
+
$color-scheme: mono !default
|
14
|
+
$hue-offset: 20 !default
|
15
|
+
$brightness-offset: 10% !default
|
16
|
+
$color-theory: rgb !default
|
17
|
+
$equalize: false !default
|
18
|
+
|
19
|
+
// Normalizer credit to Mason Wendell: https://github.com/canarymason/The-Coding-Designers-Survival-Kit/blob/master/sass/partials/lib/variables/_color_schemes.sass
|
20
|
+
@function equalize($color)
|
21
|
+
@return hsl(hue($color), 100%, 50%)
|
22
|
+
|
23
|
+
// Complement based on Claude Boutet's color wheel
|
24
|
+
@function boutet-complement($color)
|
25
|
+
$hue: round(hue($color)/ 10) // find and round hue
|
26
|
+
// Manually adjusted values until these can be mathmatically explained.
|
27
|
+
@if $hue == 0
|
28
|
+
@return adjust-hue(invert($color), -60) // Start with red
|
29
|
+
@if $hue == 1
|
30
|
+
@return adjust-hue(invert($color), -50)
|
31
|
+
@if $hue == 2
|
32
|
+
@return adjust-hue(invert($color), -40)
|
33
|
+
@if $hue == 3
|
34
|
+
@return adjust-hue(invert($color), -25)
|
35
|
+
@if $hue == 4
|
36
|
+
@return adjust-hue(invert($color), 0)
|
37
|
+
@if $hue == 5
|
38
|
+
@return adjust-hue(invert($color), 25)
|
39
|
+
@if $hue == 6
|
40
|
+
@return adjust-hue(invert($color), 38)
|
41
|
+
@if $hue == 7
|
42
|
+
@return adjust-hue(invert($color), 44)
|
43
|
+
@if $hue == 8
|
44
|
+
@return adjust-hue(invert($color), 52)
|
45
|
+
@if $hue == 9
|
46
|
+
@return adjust-hue(invert($color), 58)
|
47
|
+
@if $hue == 10
|
48
|
+
@return adjust-hue(invert($color), 59)
|
49
|
+
@if $hue == 11
|
50
|
+
@return adjust-hue(invert($color), 60)
|
51
|
+
@if $hue == 12
|
52
|
+
@return adjust-hue(invert($color), 60) // Green is halfway through the Boutet scale.
|
53
|
+
@if $hue == 13
|
54
|
+
@return adjust-hue(invert($color), 55)
|
55
|
+
@if $hue == 14
|
56
|
+
@return adjust-hue(invert($color), 50)
|
57
|
+
@if $hue == 15
|
58
|
+
@return adjust-hue(invert($color), 45)
|
59
|
+
@if $hue == 16
|
60
|
+
@return adjust-hue(invert($color), 40)
|
61
|
+
@if $hue == 17
|
62
|
+
@return adjust-hue(invert($color), 35)
|
63
|
+
@if $hue == 18
|
64
|
+
@return adjust-hue(invert($color), 30)
|
65
|
+
@if $hue == 19
|
66
|
+
@return adjust-hue(invert($color), 25)
|
67
|
+
@if $hue == 20
|
68
|
+
@return adjust-hue(invert($color), 20)
|
69
|
+
@if $hue == 21
|
70
|
+
@return adjust-hue(invert($color), 15)
|
71
|
+
@if $hue == 22
|
72
|
+
@return adjust-hue(invert($color), -5)
|
73
|
+
@if $hue == 23
|
74
|
+
@return adjust-hue(invert($color), -8)
|
75
|
+
@if $hue == 24
|
76
|
+
@return adjust-hue(invert($color), -17)
|
77
|
+
@if $hue == 25
|
78
|
+
@return adjust-hue(invert($color), -25)
|
79
|
+
@if $hue == 26
|
80
|
+
@return adjust-hue(invert($color), -30)
|
81
|
+
@if $hue == 27
|
82
|
+
@return adjust-hue(invert($color), -35)
|
83
|
+
@if $hue == 28
|
84
|
+
@return adjust-hue(invert($color), -40)
|
85
|
+
@if $hue == 29
|
86
|
+
@return adjust-hue(invert($color), -43)
|
87
|
+
@if $hue == 30
|
88
|
+
@return adjust-hue(invert($color), -46)
|
89
|
+
@if $hue == 31
|
90
|
+
@return adjust-hue(invert($color), -49)
|
91
|
+
@if $hue == 32
|
92
|
+
@return adjust-hue(invert($color), -52)
|
93
|
+
@if $hue == 33
|
94
|
+
@return adjust-hue(invert($color), -54)
|
95
|
+
@if $hue == 34
|
96
|
+
@return adjust-hue(invert($color), -57)
|
97
|
+
@if $hue == 35
|
98
|
+
@return adjust-hue(invert($color), -60)
|
99
|
+
|
100
|
+
// Add percentage of white to a color
|
101
|
+
@function tint($color, $percent)
|
102
|
+
@return mix(white, $color, $percent)
|
103
|
+
|
104
|
+
// Add percentage of black to a color
|
105
|
+
@function shade($color, $percent)
|
106
|
+
@return mix(black, $color, $percent)
|
107
|
+
|
108
|
+
@function color-schemer($color-location, $base-color, $color-scheme, $hue-offset)
|
109
|
+
// Primary, just return the base-color.
|
110
|
+
@if $equalize
|
111
|
+
$base-color: equalize($base-color)
|
112
|
+
@if $color-location == primary
|
113
|
+
@return $base-color
|
114
|
+
// Secondary colors
|
115
|
+
@if $color-location == secondary
|
116
|
+
@if $color-scheme == mono
|
117
|
+
@return lighten($base-color, $brightness-offset)
|
118
|
+
@if $color-scheme == complement
|
119
|
+
@if $color-theory == boutet
|
120
|
+
@return boutet-complement($base-color)
|
121
|
+
@return complement($base-color)
|
122
|
+
@if $color-scheme == triad
|
123
|
+
@if $color-theory == boutet
|
124
|
+
@return adjust-hue(boutet-complement($base-color), $hue-offset)
|
125
|
+
@return adjust-hue(complement($base-color), $hue-offset)
|
126
|
+
@if $color-scheme == tetrad
|
127
|
+
@return adjust-hue($base-color, $hue-offset)
|
128
|
+
@if $color-scheme == analogic
|
129
|
+
@return adjust-hue($base-color, $hue-offset)
|
130
|
+
@if $color-scheme == accented-analogic
|
131
|
+
@return adjust-hue($base-color, $hue-offset)
|
132
|
+
@warn "Oops! You didn’t properly define $color-scheme (complement, triad...)"
|
133
|
+
// Tertiary colors
|
134
|
+
@if $color-location == tertiary
|
135
|
+
@if $color-scheme == mono
|
136
|
+
@return lighten($base-color, $brightness-offset * 2)
|
137
|
+
@if $color-scheme == complement
|
138
|
+
@return lighten($base-color, $brightness-offset)
|
139
|
+
@if $color-scheme == triad
|
140
|
+
@if $color-theory == boutet
|
141
|
+
@return adjust-hue(boutet-complement($base-color), -$hue-offset)
|
142
|
+
@return adjust-hue(complement($base-color), -$hue-offset)
|
143
|
+
@if $color-scheme == tetrad
|
144
|
+
@if $color-theory == boutet
|
145
|
+
@return boutet-complement($base-color)
|
146
|
+
@return complement($base-color)
|
147
|
+
@if $color-scheme == analogic
|
148
|
+
@return adjust-hue($base-color, -$hue-offset)
|
149
|
+
@if $color-scheme == accented-analogic
|
150
|
+
@return adjust-hue($base-color, -$hue-offset)
|
151
|
+
@warn "Oops! You didn’t properly define $color-scheme (complement, triad...)"
|
152
|
+
// Quadrary colors
|
153
|
+
@if $color-location == quadrary
|
154
|
+
@if $color-scheme == mono
|
155
|
+
@return darken($base-color, $brightness-offset)
|
156
|
+
@if $color-scheme == complement
|
157
|
+
@return darken($base-color, $brightness-offset)
|
158
|
+
@if $color-scheme == triad
|
159
|
+
@return darken($base-color, $brightness-offset)
|
160
|
+
@if $color-scheme == tetrad
|
161
|
+
@if $color-theory == boutet
|
162
|
+
@return adjust-hue(boutet-complement($base-color), $hue-offset)
|
163
|
+
@return adjust-hue(complement($base-color), $hue-offset)
|
164
|
+
@if $color-scheme == analogic
|
165
|
+
@return darken($base-color, $brightness-offset)
|
166
|
+
@if $color-scheme == accented-analogic
|
167
|
+
@if $color-theory == boutet
|
168
|
+
@return boutet-complement($base-color)
|
169
|
+
@return complement($base-color)
|
170
|
+
@warn "Oops! You didn’t properly define $color-scheme (complement, triad...)"
|
171
|
+
@warn "Oops! You didn’t properly define $color-location (primary, secondary...)"
|
172
|
+
|
173
|
+
// Write your basic color scheme
|
174
|
+
$primary: color-schemer(primary) !default
|
175
|
+
$secondary: color-schemer(secondary) !default
|
176
|
+
$tertiary: color-schemer(tertiary) !default
|
177
|
+
$quadrary: color-schemer(quadrary) !default
|
178
|
+
|
179
|
+
// Tell other files that this is loaded.
|
180
|
+
$color-schemer-loaded: true
|
@@ -1,7 +1,9 @@
|
|
1
|
-
//
|
1
|
+
// SASSY MODULAR-SCALE
|
2
|
+
// https://github.com/scottkellum/modular-scale
|
2
3
|
|
3
4
|
// Ratios
|
4
5
|
$golden: 1.618
|
6
|
+
$gold: $golden
|
5
7
|
$octave: (2 / 1)
|
6
8
|
$major-seventh: (15 / 8)
|
7
9
|
$minor-seventh: (16 / 9)
|
@@ -24,61 +26,185 @@ $class-slug: ms !default
|
|
24
26
|
@function modular-scale($multiple, $base-size, $ratio)
|
25
27
|
// return the $base-size if $multiple is zero
|
26
28
|
@if $multiple == 0
|
29
|
+
@if type-of($base-size) == 'list'
|
30
|
+
$base-size: sort-list($base-size)
|
31
|
+
@return nth($base-size, 1)
|
32
|
+
// return just the simple $base-size value if it's not a list
|
27
33
|
@return $base-size
|
34
|
+
|
35
|
+
// if multiple base-sizes are passed in as a list
|
36
|
+
// and multiple ratios are passed in as a list
|
37
|
+
// calculate values in using each base-size / ratio combination
|
38
|
+
@if type-of($base-size) == 'list' and type-of($ratio) == 'list'
|
39
|
+
@if unit(ms-multibase-multiratio($multiple, $base-size, $ratio)) == 'px'
|
40
|
+
@return round(ms-multibase-multiratio($multiple, $base-size, $ratio))
|
41
|
+
@return ms-multibase-multiratio($multiple, $base-size, $ratio)
|
42
|
+
|
43
|
+
// if multiple base-sizes are passed in as a list
|
44
|
+
// calculate values in using each base-size
|
45
|
+
@if type-of($base-size) == 'list' and type-of($ratio) == 'number'
|
46
|
+
@if unit(ms-multibase($multiple, $base-size, $ratio)) == 'px'
|
47
|
+
@return round(ms-multibase($multiple, $base-size, $ratio))
|
48
|
+
@return ms-multibase($multiple, $base-size, $ratio)
|
49
|
+
|
28
50
|
// if multiple ratios are passed in as a list
|
29
51
|
// calculate values in using each ratio
|
30
|
-
@if type-of($ratio) == 'list'
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
52
|
+
@if type-of($base-size) == 'number' and type-of($ratio) == 'list'
|
53
|
+
@if unit(ms-multiratio($multiple, $base-size, $ratio)) == 'px'
|
54
|
+
@return round(ms-multiratio($multiple, $base-size, $ratio))
|
55
|
+
@return ms-multiratio($multiple, $base-size, $ratio)
|
56
|
+
|
57
|
+
// If there are no lists just run the simple function
|
58
|
+
@if unit(exponent($ratio, $multiple) * $base-size) == 'px'
|
59
|
+
@return round(exponent($ratio, $multiple) * $base-size)
|
60
|
+
@return exponent($ratio, $multiple) * $base-size
|
61
|
+
|
62
|
+
|
63
|
+
// calculate values in using each base-size / ratio combination
|
64
|
+
@function ms-multibase-multiratio($multiple, $base-size, $ratio)
|
65
|
+
// start with an empty list to place all values in
|
66
|
+
$scale-values: ()
|
67
|
+
// make sure base sizes are in ascending order
|
68
|
+
$base-size: sort-list($base-size)
|
69
|
+
// take each base-size in turn
|
70
|
+
$k: 1
|
71
|
+
@while $k <= length($base-size)
|
72
|
+
// add each $base-size to the list except the first
|
73
|
+
@if $k > 1
|
74
|
+
$scale-values: append($scale-values, nth($base-size, $k))
|
75
|
+
// take each ratio in turn
|
76
|
+
$j: 1
|
77
|
+
@while $j <= length($ratio)
|
78
|
+
// reset $modular-scale for each set
|
79
|
+
$modular-scale: nth($base-size, $k)
|
80
|
+
// do the scale for each base-size using this ratio
|
81
|
+
@if $multiple > 0
|
82
|
+
// up $multiple times
|
83
|
+
// and add the result to $scale-values
|
41
84
|
@for $i from 1 through $multiple
|
42
|
-
$modular-scale: $
|
85
|
+
$modular-scale: exponent(nth($ratio, $j), $i) * nth($base-size, $k)
|
43
86
|
$scale-values: append($scale-values, $modular-scale)
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
@if $multiple < 0
|
51
|
-
$j: 1
|
52
|
-
// take each ratio in turn
|
53
|
-
@while $j <= length($ratio)
|
54
|
-
// reset $modular-scale for each set
|
55
|
-
$modular-scale: $base-size
|
56
|
-
// do the scale using this ratio thru the multiple, and add the result to $scale-values
|
57
|
-
@for $i from 1 through ($multiple * -1)
|
58
|
-
$modular-scale: $modular-scale / nth($ratio, $j)
|
87
|
+
// and down until the value is lower than the lowest $base-size
|
88
|
+
// and add the result to $scale-values
|
89
|
+
$i: -1
|
90
|
+
$modular-scale: nth($base-size, $k)
|
91
|
+
@while $modular-scale >= nth($base-size, 1)
|
92
|
+
$modular-scale: exponent(nth($ratio, $j), $i) * nth($base-size, $k)
|
59
93
|
$scale-values: append($scale-values, $modular-scale)
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
94
|
+
$i: $i - 1
|
95
|
+
@if $multiple < 0
|
96
|
+
// do the scale down for each set to below 1px
|
97
|
+
$i: -1
|
98
|
+
$modular-scale: nth($base-size, $k)
|
99
|
+
@while $modular-scale > 1
|
100
|
+
$modular-scale: exponent(nth($ratio, $j), $i) * nth($base-size, $k)
|
101
|
+
$scale-values: append($scale-values, $modular-scale)
|
102
|
+
$i: $i - 1
|
103
|
+
$j: $j + 1
|
104
|
+
$k: $k + 1
|
105
|
+
// return trimmed and sorted final list
|
106
|
+
@return trim-sort($multiple, $scale-values, $base-size)
|
107
|
+
|
108
|
+
|
109
|
+
// calculate values in using each base-size
|
110
|
+
@function ms-multibase($multiple, $base-size, $ratio)
|
111
|
+
// start with an empty list to place all values in
|
112
|
+
$scale-values: ()
|
113
|
+
// make sure base sizes are in ascending order
|
114
|
+
$base-size: sort-list($base-size)
|
115
|
+
// take each base-size in turn
|
116
|
+
$k: 1
|
117
|
+
@while $k <= length($base-size)
|
118
|
+
// add each $base-size to the list except the first
|
119
|
+
@if $k > 1
|
120
|
+
$scale-values: append($scale-values, nth($base-size, $k))
|
121
|
+
// reset $modular-scale for each set
|
122
|
+
$modular-scale: nth($base-size, $k)
|
123
|
+
// do the scale for each base-size using this ratio
|
71
124
|
@if $multiple > 0
|
125
|
+
// up $multiple times
|
126
|
+
// and add the result to $scale-values
|
72
127
|
@for $i from 1 through $multiple
|
73
|
-
$modular-scale: $
|
74
|
-
|
75
|
-
|
128
|
+
$modular-scale: exponent($ratio, $i) * nth($base-size, $k)
|
129
|
+
$scale-values: append($scale-values, $modular-scale)
|
130
|
+
// and down until the value is lower than the lowest $base-size
|
131
|
+
// and add the result to $scale-values
|
132
|
+
$i: -1
|
133
|
+
$modular-scale: nth($base-size, $k)
|
134
|
+
@while $modular-scale >= nth($base-size, 1)
|
135
|
+
$modular-scale: exponent($ratio, $i) * nth($base-size, $k)
|
136
|
+
$scale-values: append($scale-values, $modular-scale)
|
137
|
+
$i: $i - 1
|
76
138
|
@if $multiple < 0
|
139
|
+
// do the scale down for each set to below 1px
|
140
|
+
$i: -1
|
141
|
+
$modular-scale: nth($base-size, $k)
|
142
|
+
@while $modular-scale > 1
|
143
|
+
$modular-scale: exponent($ratio, $i) * nth($base-size, $k)
|
144
|
+
$scale-values: append($scale-values, $modular-scale)
|
145
|
+
$i: $i - 1
|
146
|
+
$k: $k + 1
|
147
|
+
// return trimmed and sorted final list
|
148
|
+
@return trim-sort($multiple, $scale-values, $base-size)
|
149
|
+
|
150
|
+
|
151
|
+
// calculate values in using each ratio
|
152
|
+
@function ms-multiratio($multiple, $base-size, $ratio)
|
153
|
+
// start with an empty list to place all values in
|
154
|
+
$scale-values: ()
|
155
|
+
// If $multiple is a positive integer (up the scale)
|
156
|
+
@if $multiple > 0
|
157
|
+
// take each ratio in turn
|
158
|
+
$j: 1
|
159
|
+
@while $j <= length($ratio)
|
160
|
+
// reset $modular-scale for each set
|
161
|
+
$modular-scale: $base-size
|
162
|
+
// do the scale using this ratio thru the multiple, and add the result to $scale-values
|
163
|
+
@for $i from 1 through $multiple
|
164
|
+
$modular-scale: exponent(nth($ratio, $j), $i) * $base-size
|
165
|
+
$scale-values: append($scale-values, $modular-scale)
|
166
|
+
$j: $j + 1
|
167
|
+
// sort acsending
|
168
|
+
$scale-values: sort-list($scale-values)
|
169
|
+
// return the final value using the laced list
|
170
|
+
@return nth($scale-values, $multiple)
|
171
|
+
// If $multiple is a negative integer (down the scale)
|
172
|
+
@if $multiple < 0
|
173
|
+
// take each ratio in turn
|
174
|
+
$j: 1
|
175
|
+
@while $j <= length($ratio)
|
176
|
+
// reset $modular-scale for each set
|
177
|
+
$modular-scale: $base-size
|
178
|
+
// do the scale using this ratio thru the multiple, and add the result to $scale-values
|
77
179
|
@for $i from 1 through ($multiple * -1)
|
78
|
-
$modular-scale: $
|
180
|
+
$modular-scale: exponent(nth($ratio, $j), -$i) * $base-size
|
181
|
+
$scale-values: append($scale-values, $modular-scale)
|
182
|
+
$j: $j + 1
|
183
|
+
// sort decending
|
184
|
+
$scale-values: sort-list($scale-values, 'dec')
|
185
|
+
// return the final value using the laced list
|
186
|
+
@return nth($scale-values, $multiple * -1)
|
187
|
+
|
79
188
|
|
80
|
-
|
81
|
-
|
189
|
+
// trim and sort the final list
|
190
|
+
@function trim-sort($multiple, $scale-values, $base-size)
|
191
|
+
@if $multiple > 0
|
192
|
+
// trim list so we can count from the lowest $base-size
|
193
|
+
$scale-values: trim-list($scale-values, nth($base-size, 1))
|
194
|
+
// sort acsending
|
195
|
+
$scale-values: sort-list($scale-values)
|
196
|
+
// return the final value using the laced list
|
197
|
+
@return nth($scale-values, $multiple)
|
198
|
+
@else
|
199
|
+
// trim list so we can count from the lowest $base-size
|
200
|
+
$scale-values: trim-list($scale-values, nth($base-size, 1), 'dec')
|
201
|
+
// sort acsending
|
202
|
+
$scale-values: sort-list($scale-values, 'dec')
|
203
|
+
// return the final value using the laced list
|
204
|
+
@return nth($scale-values, -$multiple)
|
205
|
+
|
206
|
+
|
207
|
+
/////////////////////////////////////////////////////////////////////////
|
82
208
|
|
83
209
|
// Shortcut
|
84
210
|
@function ms($multiple, $base-size, $ratio)
|
@@ -86,18 +212,41 @@ $class-slug: ms !default
|
|
86
212
|
@return modular-scale($multiple, $base-size, $ratio)
|
87
213
|
|
88
214
|
// Mixin
|
215
|
+
// Deprecated. Use the modular-scale() function instead
|
89
216
|
=modular-scale($property, $multiple, $base-size, $ratio)
|
90
217
|
// Print the $property and return the value from the Modular Scale function
|
218
|
+
@warn "The modular-scale mixin is deprecated. Instead use the function: width: modular-scale(3)"
|
91
219
|
#{$property}: modular-scale($multiple, $base-size, $ratio)
|
92
220
|
|
93
221
|
// Classes Mixin
|
94
|
-
=modular-scale-classes($multiple, $property, $base-size, $ratio
|
222
|
+
=modular-scale-classes($multiple, $property, $class-slug, $base-size, $ratio)
|
95
223
|
// Loop from 0 through the value of $multiple and generate a range of classes
|
96
224
|
@for $i from 0 through $multiple
|
97
225
|
.#{$class-slug}-#{$i}
|
98
|
-
|
226
|
+
// Print the $property and return the value from the Modular Scale function
|
227
|
+
#{$property}: modular-scale($i, $base-size, $ratio)
|
228
|
+
|
229
|
+
|
230
|
+
/////////////////////////////////////////////////////////////////////////
|
99
231
|
|
100
232
|
|
233
|
+
// Sass exponent support
|
234
|
+
@function exponent($base, $exponent)
|
235
|
+
// reset value
|
236
|
+
$value: $base
|
237
|
+
// positive intergers get multiplied
|
238
|
+
@if $exponent > 1
|
239
|
+
@for $i from 2 through $exponent
|
240
|
+
$value: $value * $base
|
241
|
+
// negitive intergers get divided. A number divided by itself is 1
|
242
|
+
@if $exponent < 1
|
243
|
+
@for $i from 0 through -$exponent
|
244
|
+
$value: $value / $base
|
245
|
+
// return the last value written
|
246
|
+
@return $value
|
247
|
+
|
248
|
+
|
249
|
+
// Sass list sorting support
|
101
250
|
@function sort-list($list, $dir: 'asc')
|
102
251
|
// built-in list sorting in Sass would make this go away.
|
103
252
|
// declare some empty lists to put our new order and temporary values
|
@@ -139,4 +288,26 @@ $class-slug: ms !default
|
|
139
288
|
@for $k from 1 through length($list)
|
140
289
|
@if nth($list, $k) < $high
|
141
290
|
$temp: append($temp, nth($list, $k))
|
142
|
-
@return $new-order
|
291
|
+
@return $new-order
|
292
|
+
|
293
|
+
|
294
|
+
// Sass list trimming support
|
295
|
+
@function trim-list($list, $start, $dir: 'asc')
|
296
|
+
// built-in list trimming in Sass would make this go away.
|
297
|
+
// declare some empty lists to put our trimmed values
|
298
|
+
$trimmed: ()
|
299
|
+
// if sorting ascending
|
300
|
+
@if $dir == 'asc'
|
301
|
+
// loop through all values in $list
|
302
|
+
@for $i from 1 through length($list)
|
303
|
+
@if nth($list, $i) >= $start
|
304
|
+
$trimmed: append($trimmed, nth($list, $i))
|
305
|
+
@if $dir == 'dec'
|
306
|
+
// loop through all values in $list
|
307
|
+
@for $i from 1 through length($list)
|
308
|
+
@if nth($list, $i) <= $start
|
309
|
+
$trimmed: append($trimmed, nth($list, $i))
|
310
|
+
@return $trimmed
|
311
|
+
|
312
|
+
// Other libraries can easily query if this function is avalible
|
313
|
+
$modular-scale-loaded: true
|
metadata
CHANGED
@@ -1,13 +1,13 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: survivalkit
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
hash:
|
4
|
+
hash: 23
|
5
5
|
prerelease:
|
6
6
|
segments:
|
7
7
|
- 0
|
8
|
-
-
|
9
|
-
-
|
10
|
-
version: 0.
|
8
|
+
- 2
|
9
|
+
- 0
|
10
|
+
version: 0.2.0
|
11
11
|
platform: ruby
|
12
12
|
authors:
|
13
13
|
- Mason Wendell
|
@@ -51,6 +51,7 @@ files:
|
|
51
51
|
- stylesheets/survivalkit/extend/_helpers.sass
|
52
52
|
- stylesheets/survivalkit/functions/_all.sass
|
53
53
|
- stylesheets/survivalkit/functions/_calculations.sass
|
54
|
+
- stylesheets/survivalkit/functions/_color-schemer.sass
|
54
55
|
- stylesheets/survivalkit/functions/_color.sass
|
55
56
|
- stylesheets/survivalkit/functions/_modular-scale.sass
|
56
57
|
- stylesheets/survivalkit/mixins/_all.sass
|