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 (http://thecodingdesigner.com)
1
+ # [The Coding Designer's Survival Kit](http://thecodingdesigner.com)
2
2
 
3
- ## Overview
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
- - __index.html__ is empty and contains no content
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
- The CSS is built using Sass and Compass, and is the main focus. **Survival Kit is a system for creatively creating CSS using Sass.** You'll need to install Sass and Compass to get started with these, and I encourage you to install Susy and other projects like Sassy Modular Scale as well.
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
- 1. `gem install survivalkit`
16
-
17
- ### For Existing Compass Projects
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. `compass install survivalkit`
20
-
21
- ### For New Compass Projects
22
- 2. `compass create my_project -r survivalkit -u survivalkit --javascripts-dir js --css-dir css`
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
@@ -3,7 +3,7 @@ Compass::Frameworks.register("survivalkit", :path => "#{File.dirname(__FILE__)}/
3
3
 
4
4
  module SurvivalKit
5
5
 
6
- VERSION = "0.1.1"
6
+ VERSION = "0.2.0"
7
7
  DATE = "2011-11-19"
8
8
 
9
9
  end
@@ -1,3 +1,4 @@
1
1
  @import calculations
2
2
  @import modular-scale
3
+ @import color-schemer
3
4
  @import color
@@ -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
- // Based on: https://github.com/scottkellum/modular-scale
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
- // start with an empty list to place all values in
32
- $scale-values: ()
33
- // If $multiple is a positive integer (up the scale)
34
- @if $multiple > 0
35
- $j: 1
36
- // take each ratio in turn
37
- @while $j <= length($ratio)
38
- // reset $modular-scale for each set
39
- $modular-scale: $base-size
40
- // do the scale using this ratio thru the multiple, and add the result to $scale-values
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: $modular-scale * nth($ratio, $j)
85
+ $modular-scale: exponent(nth($ratio, $j), $i) * nth($base-size, $k)
43
86
  $scale-values: append($scale-values, $modular-scale)
44
- $j: $j + 1
45
- // sort acsending
46
- $scale-values: sort-list($scale-values)
47
- // return the final value using the laced list
48
- @return nth($scale-values, $multiple)
49
- // If $multiple is a negative integer (down the scale)
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
- $j: $j + 1
61
- // sort acsending
62
- $scale-values: sort-list($scale-values, 'dec')
63
- // return the final value using the laced list
64
- @return nth($scale-values, $multiple * -1)
65
-
66
- // if one ratio is passed in as a number
67
- @if type-of($ratio) == 'number'
68
- // On init, $modular-scale equals the default value of $base-size or the value passed to the function
69
- $modular-scale: $base-size
70
- // If $multiple is a positive integer (up the scale)
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: $modular-scale * $ratio
74
-
75
- // If $multiple is a negative integer (down the scale)
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: $modular-scale / $ratio
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
- // Return the new or unchanged value of $modular-scale
81
- @return $modular-scale
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, $class-slug)
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
- +modular-scale($property, $i, $base-size, $ratio)
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: 25
4
+ hash: 23
5
5
  prerelease:
6
6
  segments:
7
7
  - 0
8
- - 1
9
- - 1
10
- version: 0.1.1
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