bourbon 0.0.6 → 0.0.7
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +1 -0
- data/app/assets/stylesheets/_bourbon.css.scss +1 -0
- data/app/assets/stylesheets/functions/_golden-ratio.css.scss +32 -0
- data/generate-sass.sh +23 -0
- data/lib/bourbon/version.rb +1 -1
- data/readme.md +145 -41
- metadata +5 -3
data/.gitignore
CHANGED
@@ -0,0 +1,32 @@
|
|
1
|
+
@function golden-ratio($value, $increment) {
|
2
|
+
@if $increment > 0 {
|
3
|
+
@for $i from 1 through $increment {
|
4
|
+
$value: ($value * 1.618);
|
5
|
+
}
|
6
|
+
}
|
7
|
+
@if $increment < 0 {
|
8
|
+
$increment: abs($increment);
|
9
|
+
@for $i from 1 through $increment {
|
10
|
+
$value: ($value / 1.618);
|
11
|
+
}
|
12
|
+
}
|
13
|
+
@if $increment == 0 {
|
14
|
+
@warn "Increment value cannot be zero; must be ...-3, -2, -1, 1, 2, 3...";
|
15
|
+
}
|
16
|
+
@return $value;
|
17
|
+
}
|
18
|
+
|
19
|
+
// div {
|
20
|
+
// Increment Up GR with positive value
|
21
|
+
// width: golden-ratio(14px, 1); // returns: 22.652px
|
22
|
+
//
|
23
|
+
// Increment Down GR with negative value
|
24
|
+
// width: golden-ratio(14px, -1); // returns: 8.653px
|
25
|
+
//
|
26
|
+
// Can be used with ceil(round up) or floor(round down)
|
27
|
+
// width: floor( golden-ratio(14px, 1) ); // returns: 22px
|
28
|
+
// width: ceil( golden-ratio(14px, 1) ); // returns: 23px
|
29
|
+
// }
|
30
|
+
//
|
31
|
+
// modularscale.com
|
32
|
+
// goldenratiocalculator.com
|
data/generate-sass.sh
ADDED
@@ -0,0 +1,23 @@
|
|
1
|
+
#!/bin/sh
|
2
|
+
|
3
|
+
# README
|
4
|
+
# This will generate a sass directory and convert all .css.scss to .scss extensions.
|
5
|
+
# The sass directory is for 'sass --watch' use outside of rails.
|
6
|
+
# Step 1: Make install executable by changing permission
|
7
|
+
# chmod a+x generate-sass.sh
|
8
|
+
|
9
|
+
# Step 2: Generate Files
|
10
|
+
# ./generate-sass.sh
|
11
|
+
|
12
|
+
echo Creating directory...
|
13
|
+
mkdir -p $PWD/sass
|
14
|
+
|
15
|
+
echo Copying files...
|
16
|
+
cp -a $PWD/app/assets/stylesheets/* $PWD/sass
|
17
|
+
|
18
|
+
echo Renaming files...
|
19
|
+
find $PWD/sass -name "*.css.scss" | while read i;
|
20
|
+
do mv "$i" "${i%.css.scss}.scss";
|
21
|
+
done
|
22
|
+
echo Done.
|
23
|
+
|
data/lib/bourbon/version.rb
CHANGED
data/readme.md
CHANGED
@@ -2,50 +2,68 @@
|
|
2
2
|
The purpose of Bourbon Vanilla Sass Mixins is to provide a comprehensive framework of sass mixins that are designed to be as vanilla as possible. Meaning they should not deter from the original CSS syntax. The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties.
|
3
3
|
|
4
4
|
|
5
|
-
|
5
|
+
#Requirements
|
6
6
|
Sass 3.1+
|
7
7
|
|
8
8
|
|
9
|
-
|
10
|
-
|
9
|
+
#Install for Rails
|
10
|
+
Update your Gemfile
|
11
11
|
|
12
12
|
gem 'bourbon'
|
13
13
|
|
14
14
|
bundle install
|
15
15
|
|
16
|
-
|
17
|
-
|
16
|
+
##Rails 3.1.x
|
17
|
+
Comment-out the following sprocket directive in /application.css.scss (Remove the =)
|
18
18
|
|
19
19
|
* require_tree .
|
20
20
|
|
21
|
-
|
21
|
+
Import the mixins at the beginning of your stylesheet
|
22
22
|
|
23
23
|
@import 'bourbon';
|
24
24
|
|
25
|
-
|
26
|
-
|
25
|
+
##Rails 3.0.9 and below
|
26
|
+
For Rails < 3.1 you must run the installation rake task.
|
27
27
|
This will copy the Sass files into your project's public/stylesheets/sass directory.
|
28
28
|
|
29
29
|
rake bourbon:install
|
30
30
|
|
31
|
-
|
31
|
+
Import the mixins at the beginning of your stylesheet
|
32
32
|
|
33
33
|
@import 'bourbon/bourbon';
|
34
34
|
|
35
35
|
|
36
|
-
|
36
|
+
#Install without Rails
|
37
|
+
The following script will generate a sass directory and convert all .css.scss to .scss extensions. The sass directory is for 'sass --watch' use outside of rails.
|
38
|
+
Preliminary step: clone the repo and cd into the directory.
|
39
|
+
|
40
|
+
**Step 1:** Make script executable by changing file permission
|
41
|
+
|
42
|
+
chmod a+x generate-sass.sh
|
43
|
+
|
44
|
+
**Step 2:** Generate files
|
45
|
+
|
46
|
+
./generate-sass.sh
|
47
|
+
|
48
|
+
**Step 3:** Move the new *sass* directory to your project's stylesheets directory.
|
49
|
+
|
50
|
+
|
51
|
+
#Using Bourbon Vanilla Mixins
|
37
52
|
Below are a few examples of mixin usage. Note that these are just a few, explore the repo to find out more.
|
38
53
|
|
39
|
-
|
54
|
+
###Animation
|
40
55
|
|
41
|
-
The
|
56
|
+
The animation mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
|
42
57
|
|
43
58
|
@include animation-name(slideup, fadein);
|
44
59
|
@include animation-duration(1.0s, 1.2s);
|
45
60
|
@include animation-timing-function(ease-in-out, ease-out);
|
46
61
|
|
62
|
+
# Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable.
|
63
|
+
@include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
|
64
|
+
|
47
65
|
|
48
|
-
|
66
|
+
###Border Radius
|
49
67
|
|
50
68
|
Border-radius will also take short-hand notation.
|
51
69
|
|
@@ -53,38 +71,24 @@ Border-radius will also take short-hand notation.
|
|
53
71
|
@include border-radius(5px 5px 2px 2px);
|
54
72
|
|
55
73
|
|
56
|
-
|
57
|
-
|
58
|
-
@include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
|
59
|
-
|
60
|
-
|
61
|
-
**Box Shadow**
|
74
|
+
###Box Shadow
|
62
75
|
|
63
76
|
Box-Shadow supports single or multiple arguments:
|
64
77
|
|
65
78
|
@include box-shadow(1px 1px 2px 0 #ff0000);
|
66
79
|
|
67
|
-
Multiple arguments must be comma-diliminated.
|
68
|
-
|
80
|
+
# Multiple arguments must be comma-diliminated.
|
69
81
|
@include box-shadow(1px 1px 2px 0 #fff0000, -1px -2px 0 #ccc);
|
70
82
|
|
71
83
|
|
72
|
-
|
73
|
-
|
74
|
-
Border-radius will also take short-hand notation.
|
84
|
+
###Box Sizing
|
75
85
|
|
76
|
-
|
77
|
-
@include border-radius(5px 5px 2px 2px);
|
78
|
-
|
79
|
-
|
80
|
-
**Box Sizing**
|
81
|
-
|
82
|
-
Box-sizing will change the box-model of the element it is applied to. This is really helpful for properly styling padding and margin to all text-based input types (e.g. input[type="text"]).
|
86
|
+
Box-sizing will change the box-model of the element it is applied to.
|
83
87
|
|
84
88
|
@include box-sizing(border-box);
|
85
89
|
|
86
90
|
|
87
|
-
|
91
|
+
###Flex Box
|
88
92
|
|
89
93
|
The flex-box mixin is based on the 2009 w3c spec. The mixin with change to the flexible box-model. [More info.](http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)
|
90
94
|
|
@@ -99,14 +103,15 @@ The flex-box mixin is based on the 2009 w3c spec. The mixin with change to the f
|
|
99
103
|
@include box-flex(2);
|
100
104
|
}
|
101
105
|
|
102
|
-
|
106
|
+
|
107
|
+
###Inline-block
|
103
108
|
|
104
109
|
The inline-block mixin provides support for the inline-block property in IE6 and IE7.
|
105
110
|
|
106
111
|
@include inline-block;
|
107
112
|
|
108
113
|
|
109
|
-
|
114
|
+
###Linear-Gradient
|
110
115
|
|
111
116
|
Gradient position is optional, default is top. Position can be a degree. Color-stops are optional as well. Mixin will support up to 10 gradients.
|
112
117
|
|
@@ -115,7 +120,7 @@ Gradient position is optional, default is top. Position can be a degree. Color-s
|
|
115
120
|
@include linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
|
116
121
|
|
117
122
|
|
118
|
-
|
123
|
+
###Position
|
119
124
|
|
120
125
|
Shorthand notation for setting the position of elements in your page.
|
121
126
|
|
@@ -134,19 +139,20 @@ The first parameter is optional, with a default value of relative. The second pa
|
|
134
139
|
Note: unitless values will be ignored. In the example above, this means that selectors will not be generated for the right and bottom positions, while the top position is set to 0px.
|
135
140
|
|
136
141
|
|
137
|
-
|
142
|
+
###Radial-Gradient
|
138
143
|
|
139
144
|
Takes up to 10 gradients. Position and shape are required.
|
140
145
|
|
141
146
|
@include radial-gradient(50% 50%, circle cover, #1e5799, #efefef);
|
142
147
|
@include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
|
143
148
|
|
144
|
-
|
149
|
+
|
150
|
+
###Transform
|
145
151
|
|
146
152
|
@include transform(translateY(50px));
|
147
153
|
|
148
154
|
|
149
|
-
|
155
|
+
###Transitions
|
150
156
|
|
151
157
|
Shorthand mixin: Supports multiple parentheses-deliminated values for each variable.
|
152
158
|
|
@@ -155,12 +161,54 @@ Shorthand mixin: Supports multiple parentheses-deliminated values for each varia
|
|
155
161
|
@include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));`
|
156
162
|
|
157
163
|
|
158
|
-
##
|
164
|
+
##Functions
|
165
|
+
###Compact
|
166
|
+
|
167
|
+
The compact function will strip out any value from a list that is 'false'. Takes up to 10 arguments.
|
168
|
+
|
169
|
+
$full: compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9, $name-10);
|
170
|
+
|
171
|
+
|
172
|
+
###Golden Ratio
|
173
|
+
|
174
|
+
Returns the golden ratio of a given number. Must provide a Pixel or Em value for first argument. Also takes a required increment value that is not zero and an integer: ...-3, -2, -1, 1, 2, 3...
|
175
|
+
|
176
|
+
div {
|
177
|
+
Increment Up GR with positive value
|
178
|
+
width: golden-ratio(14px, 1); // returns: 22.652px
|
179
|
+
|
180
|
+
Increment Down GR with negative value
|
181
|
+
width: golden-ratio(14px, -1); // returns: 8.653px
|
182
|
+
|
183
|
+
Can be used with ceil(round up) or floor(round down)
|
184
|
+
width: floor( golden-ratio(14px, 1) ); // returns: 22px
|
185
|
+
width: ceil( golden-ratio(14px, 1) ); // returns: 23px
|
186
|
+
}
|
187
|
+
|
188
|
+
Resources: [modularscale.com](http://modularscale.com) & [goldenratiocalculator.com](http://goldenratiocalculator.com)
|
189
|
+
|
159
190
|
|
160
|
-
|
191
|
+
###Tint & Shade
|
161
192
|
|
162
|
-
|
193
|
+
Tint & shade are different from lighten() and darken() functions built into sass.
|
194
|
+
Tint is a mix of a color with white. Tint takes a color and a percent argument.
|
163
195
|
|
196
|
+
div {
|
197
|
+
background: tint(red, 40%);
|
198
|
+
}
|
199
|
+
|
200
|
+
Shade is a mix of a color with black. Shade takes a color and a percent argument.
|
201
|
+
|
202
|
+
div {
|
203
|
+
background: shade(blue, 60%);
|
204
|
+
}
|
205
|
+
|
206
|
+
|
207
|
+
##Add-ons
|
208
|
+
|
209
|
+
###Buttons
|
210
|
+
|
211
|
+
The button add-on provides well-designed buttons with a single line in your CSS. The demo folder contains examples of the buttons in use.
|
164
212
|
The mixin can be called with no parameters to render a blue button with the "simple" style.
|
165
213
|
|
166
214
|
button,
|
@@ -183,6 +231,62 @@ The real power of the mixin is revealed when you pass in the optional color argu
|
|
183
231
|
}
|
184
232
|
|
185
233
|
|
234
|
+
#All Supported Functions, Mixins, and Addons
|
235
|
+
*@ denotes a mixin and must be prefaced with @include*
|
236
|
+
|
237
|
+
#Functions
|
238
|
+
--------------------------------
|
239
|
+
compact(*args)
|
240
|
+
golden-ratio(*args)
|
241
|
+
shade(*args)
|
242
|
+
tint(*args)
|
243
|
+
|
244
|
+
#Mixins
|
245
|
+
--------------------------------
|
246
|
+
animation
|
247
|
+
@ animation(*args)
|
248
|
+
@ animation-basic(*args)
|
249
|
+
@ animation-delay(*args)
|
250
|
+
@ animation-direction(*args)
|
251
|
+
@ animation-duration(*args)
|
252
|
+
@ animation-fill-mode(*args)
|
253
|
+
@ animation-iteration-count(*args)
|
254
|
+
@ animation-name(*args)
|
255
|
+
@ animation-play-state(*args)
|
256
|
+
@ animation-timing-function(*args)
|
257
|
+
|
258
|
+
@ border-radius(*args)
|
259
|
+
@ box-sizing(*args)
|
260
|
+
|
261
|
+
flex-box
|
262
|
+
@ box-align(*args)
|
263
|
+
@ box-direction(*args)
|
264
|
+
@ box-flex(*args)
|
265
|
+
@ box-flex-group(*args)
|
266
|
+
@ box-lines(*args)
|
267
|
+
@ box-ordinal-group(*args)
|
268
|
+
@ box-orient(*args)
|
269
|
+
@ box-pack(*args)
|
270
|
+
@ display-box
|
271
|
+
|
272
|
+
@ inline-block
|
273
|
+
@ linear-gradient(*args)
|
274
|
+
@ radial-gradient(*args)
|
275
|
+
@ transform(*args)
|
276
|
+
|
277
|
+
transition
|
278
|
+
@ transition(*args)
|
279
|
+
@ transition-delay(*args)
|
280
|
+
@ transition-duration(*args)
|
281
|
+
@ transition-property(*args)
|
282
|
+
@ transition-timing-function(*args)
|
283
|
+
|
284
|
+
#Addons
|
285
|
+
--------------------------------
|
286
|
+
@ button(*args)
|
287
|
+
@ position(*args)
|
288
|
+
|
289
|
+
|
186
290
|
##Help Out
|
187
291
|
Currently the project is a work in progress. Feel free to help out.
|
188
292
|
|
metadata
CHANGED
@@ -1,13 +1,13 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: bourbon
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
hash:
|
4
|
+
hash: 17
|
5
5
|
prerelease:
|
6
6
|
segments:
|
7
7
|
- 0
|
8
8
|
- 0
|
9
|
-
-
|
10
|
-
version: 0.0.
|
9
|
+
- 7
|
10
|
+
version: 0.0.7
|
11
11
|
platform: ruby
|
12
12
|
authors:
|
13
13
|
- Phil LaPier
|
@@ -68,11 +68,13 @@ files:
|
|
68
68
|
- app/assets/stylesheets/css3/_transform.css.scss
|
69
69
|
- app/assets/stylesheets/css3/_transition.css.scss
|
70
70
|
- app/assets/stylesheets/functions/_compact.css.scss
|
71
|
+
- app/assets/stylesheets/functions/_golden-ratio.css.scss
|
71
72
|
- app/assets/stylesheets/functions/_tint-shade.css.scss
|
72
73
|
- bourbon.gemspec
|
73
74
|
- demo/index.html
|
74
75
|
- demo/stylesheets/demo.css
|
75
76
|
- demo/stylesheets/scss/demo.scss
|
77
|
+
- generate-sass.sh
|
76
78
|
- lib/bourbon.rb
|
77
79
|
- lib/bourbon/engine.rb
|
78
80
|
- lib/bourbon/version.rb
|