bourbon 0.0.5

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,100 @@
1
+ @import "../app/assets/mixins";
2
+
3
+ // Clear Floated Elements
4
+ .clearfix:after {
5
+ clear: both;
6
+ content: ' ';
7
+ display: block;
8
+ font-size: 0;
9
+ line-height: 0;
10
+ visibility: hidden;
11
+ width: 0;
12
+ height: 0;
13
+ }
14
+
15
+ // This is just for the example page
16
+ body {
17
+ color: #333;
18
+ }
19
+
20
+ #buttons {
21
+ margin: 50px auto;
22
+ width: 995px;
23
+
24
+ h2 {
25
+ font: 300 22px "helvetica neue", sans-serif;
26
+ margin: 0 0 4px 0;
27
+ }
28
+
29
+ p {
30
+ color: #777;
31
+ font: normal 14px "helvetica neue", sans-serif;
32
+ margin: 0 0 24px 0;
33
+ }
34
+
35
+ .button-set {
36
+ @extend .clearfix;
37
+ margin: 0 0 40px 0;
38
+
39
+ p {
40
+ border-bottom: 1px solid #ddd;
41
+ font: bold 14px "helvetica neue", sans-serif;
42
+ padding: 0 0 4px 0;
43
+ }
44
+
45
+ section {
46
+ float: left;
47
+ margin-right: 25px;
48
+ text-align: center;
49
+ width: 315px;
50
+
51
+ &:last-child {
52
+ margin-right: 0;
53
+ }
54
+ }
55
+ }
56
+ }
57
+
58
+ // Style the buttons
59
+ .simple {
60
+ button.default {
61
+
62
+ @include button;
63
+ }
64
+
65
+ button.color-2 {
66
+ @include button(#f10);
67
+ }
68
+
69
+ button.color-3 {
70
+ @include button(#29c13b);
71
+ }
72
+ }
73
+
74
+ .shiny {
75
+ button.default {
76
+ @include button(shiny);
77
+ }
78
+
79
+ button.color-2 {
80
+ @include button(shiny,#f10);
81
+ }
82
+
83
+ button.color-3 {
84
+ @include button(shiny, #29c13b);
85
+ }
86
+ }
87
+
88
+ .pill {
89
+ button.default {
90
+ @include button(pill);
91
+ }
92
+
93
+ button.color-2 {
94
+ @include button(pill, #f10);
95
+ }
96
+
97
+ button.color-3 {
98
+ @include button(pill, #29c13b);
99
+ }
100
+ }
data/lib/bourbon.rb ADDED
@@ -0,0 +1,13 @@
1
+ module Bourbon
2
+ class Engine < ::Rails::Engine
3
+ require 'bourbon/engine'
4
+ end
5
+
6
+ module Rails
7
+ class Railtie < ::Rails::Railtie
8
+ rake_tasks do
9
+ load "tasks/install.rake"
10
+ end
11
+ end
12
+ end
13
+ end
@@ -0,0 +1,5 @@
1
+ module Bourbon
2
+ class Engine < Rails::Engine
3
+ # auto wire
4
+ end
5
+ end
@@ -0,0 +1,3 @@
1
+ module Bourbon
2
+ VERSION = "0.0.5"
3
+ end
@@ -0,0 +1,10 @@
1
+ # Needed for pre-3.1.
2
+ namespace :bourbon do
3
+ desc "Move files to the Rails assets directory."
4
+ task :install do
5
+ source_root = File.expand_path(File.join(File.dirname(__FILE__), '..', '..'))
6
+ `mkdir -p #{Rails.root}/public/stylesheets/sass/bourbon`
7
+ `cp -a #{source_root}/app/assets/stylesheets/* #{Rails.root}/public/stylesheets/sass/bourbon`
8
+ `find #{Rails.root}/public/stylesheets/sass/bourbon -name "*.css.scss" | while read i; do mv "$i" "${i%.css.scss}.scss"; done`
9
+ end
10
+ end
data/readme.md ADDED
@@ -0,0 +1,179 @@
1
+ #Vanilla Sass Mixins
2
+ The purpose of 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
+
4
+
5
+ ##Requirements
6
+ Sass 3.1+
7
+
8
+
9
+ ##Install
10
+ **Update your Gemfile**
11
+
12
+ gem 'sass-mixins'
13
+
14
+ bundle install
15
+
16
+ **For Rails < 3.1 you must run the installation rake task. This will copy the
17
+ Sass files into your project's public/stylesheets/sass directory.**
18
+
19
+ rake sass_mixins:install
20
+
21
+ **Import the mixins at the beginning of your stylesheet**
22
+
23
+ @import 'sass-mixins/mixins';
24
+
25
+ ##Usage
26
+ Below are a few examples of mixin usage. Note that these are just a few, explore the repo to find out more.
27
+
28
+ **Animation**
29
+
30
+ The three following properties support a comma separated list 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. animation-name | animation-duration | animation-timing-function
31
+
32
+ @include animation-name(slideup, fadein);
33
+ @include animation-duration(1.0s, 1.2s);
34
+ @include animation-timing-function(ease-in-out, ease-out);
35
+
36
+
37
+ **Border Radius**
38
+
39
+ Border-radius will also take short-hand notation.
40
+
41
+ @include border-radius(10px);
42
+ @include border-radius(5px 5px 2px 2px);
43
+
44
+
45
+ Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable.
46
+
47
+ @include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
48
+
49
+
50
+ **Box Shadow**
51
+
52
+ Box-Shadow supports single or multiple arguments:
53
+
54
+ @include box-shadow(1px 1px 2px 0 #ff0000);
55
+
56
+ Multiple arguments must be comma-diliminated.
57
+
58
+ @include box-shadow(1px 1px 2px 0 #fff0000, -1px -2px 0 #ccc);
59
+
60
+
61
+ **Border Radius**
62
+
63
+ Border-radius will also take short-hand notation.
64
+
65
+ @include border-radius(10px);
66
+ @include border-radius(5px 5px 2px 2px);
67
+
68
+
69
+ **Box Sizing**
70
+
71
+ 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"]).
72
+
73
+ @include box-sizing(border-box);
74
+
75
+
76
+ **Flex Box**
77
+
78
+ 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/)
79
+
80
+ div.parent {
81
+ @include display-box;
82
+ @include box-align(start);
83
+ @include box-orient(horizontal);
84
+ @include box-pack(start);
85
+ }
86
+
87
+ div.parent > div.child {
88
+ @include box-flex(2);
89
+ }
90
+
91
+ **Inline-block**
92
+
93
+ The inline-block mixin provides support for the inline-block property in IE6 and IE7.
94
+
95
+ @include inline-block;
96
+
97
+
98
+ **Linear-Gradient**
99
+
100
+ 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.
101
+
102
+ @include linear-gradient(#1e5799, #2989d8);
103
+ @include linear-gradient(top, #1e5799 0%, #2989d8 100%);
104
+ @include linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
105
+
106
+
107
+ **Position**
108
+
109
+ Shorthand notation for setting the position of elements in your page.
110
+
111
+ Instead of writing:
112
+
113
+ position: relative;
114
+ top: 0px;
115
+ left: 100px;
116
+
117
+ You can write:
118
+
119
+ @include position(relative, 0px 0 0 100px);
120
+
121
+ The first parameter is optional, with a default value of relative. The second parameter is a space delimited list of values that follow the standard CSS shorthand notation.
122
+
123
+ 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.
124
+
125
+
126
+ **Radial-Gradient**
127
+
128
+ Takes up to 10 gradients. Position and shape are required.
129
+
130
+ @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef);
131
+ @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
132
+
133
+ **Transform**
134
+
135
+ @include transform(translateY(50px));
136
+
137
+
138
+ **Transitions**
139
+
140
+ Shorthand mixin: Supports multiple parentheses-deliminated values for each variable.
141
+
142
+ @include transition (all, 2.0s, ease-in-out);
143
+ @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
144
+ @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));`
145
+
146
+
147
+ ##Add-ons
148
+
149
+ **Buttons**
150
+
151
+ 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.
152
+
153
+ The mixin can be called with no parameters to render a blue button with the "simple" style.
154
+
155
+ button,
156
+ input[type="button"] {
157
+ @include button;
158
+ }
159
+
160
+ The mixin supports a style parameter. Right now the available styles are "simple" (default), "shiny", and "pill".
161
+
162
+ button,
163
+ input[type="button"] {
164
+ @include button(shiny);
165
+ }
166
+
167
+ The real power of the mixin is revealed when you pass in the optional color argument. Using a single color, the mixin calculates the gradient, borders, box shadow, text shadow and text color of the button. The mixin will change the text to be light when on a dark background, and dark when on a light background.
168
+
169
+ button,
170
+ input[type="button"] {
171
+ @include button(shiny, #ff000);
172
+ }
173
+
174
+
175
+ ##Help Out
176
+ Currently the project is a work in progress. Feel free to help out.
177
+
178
+
179
+
metadata ADDED
@@ -0,0 +1,114 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: bourbon
3
+ version: !ruby/object:Gem::Version
4
+ hash: 21
5
+ prerelease:
6
+ segments:
7
+ - 0
8
+ - 0
9
+ - 5
10
+ version: 0.0.5
11
+ platform: ruby
12
+ authors:
13
+ - Phil LaPier
14
+ - Chad Mazzola
15
+ - Mike Burns
16
+ autorequire:
17
+ bindir: bin
18
+ cert_chain: []
19
+
20
+ date: 2011-07-03 00:00:00 Z
21
+ dependencies:
22
+ - !ruby/object:Gem::Dependency
23
+ name: sass
24
+ prerelease: false
25
+ requirement: &id001 !ruby/object:Gem::Requirement
26
+ none: false
27
+ requirements:
28
+ - - ">="
29
+ - !ruby/object:Gem::Version
30
+ hash: 5
31
+ segments:
32
+ - 3
33
+ - 1
34
+ version: "3.1"
35
+ type: :runtime
36
+ version_requirements: *id001
37
+ description: |
38
+ The purpose of Bourbon Vanilla Sass Mixins is to provide a comprehensive framework of
39
+ sass mixins that are designed to be as vanilla as possible. Meaning they
40
+ should not deter from the original CSS syntax. The mixins contain vendor
41
+ specific prefixes for all CSS3 properties for support amongst modern
42
+ browsers. The prefixes also ensure graceful degradation for older browsers
43
+ that support only CSS3 prefixed properties.
44
+
45
+ email:
46
+ - support@thoughtbot.com
47
+ executables: []
48
+
49
+ extensions: []
50
+
51
+ extra_rdoc_files: []
52
+
53
+ files:
54
+ - .gitignore
55
+ - Gemfile
56
+ - Rakefile
57
+ - app/assets/stylesheets/_bourbon.css.scss
58
+ - app/assets/stylesheets/addons/_button.css.scss
59
+ - app/assets/stylesheets/css3/_animation.css.scss
60
+ - app/assets/stylesheets/css3/_border-radius.css.scss
61
+ - app/assets/stylesheets/css3/_box-shadow.css.scss
62
+ - app/assets/stylesheets/css3/_box-sizing.css.scss
63
+ - app/assets/stylesheets/css3/_flex-box.css.scss
64
+ - app/assets/stylesheets/css3/_inline-block.css.scss
65
+ - app/assets/stylesheets/css3/_linear-gradient.css.scss
66
+ - app/assets/stylesheets/css3/_radial-gradient.css.scss
67
+ - app/assets/stylesheets/css3/_transform.css.scss
68
+ - app/assets/stylesheets/css3/_transition.css.scss
69
+ - app/assets/stylesheets/functions/_compact.css.scss
70
+ - app/assets/stylesheets/functions/_tint-shade.css.scss
71
+ - bourbon.gemspec
72
+ - demo/index.html
73
+ - demo/stylesheets/demo.css
74
+ - demo/stylesheets/scss/demo.scss
75
+ - lib/bourbon.rb
76
+ - lib/bourbon/engine.rb
77
+ - lib/bourbon/version.rb
78
+ - lib/tasks/install.rake
79
+ - readme.md
80
+ homepage: ""
81
+ licenses: []
82
+
83
+ post_install_message:
84
+ rdoc_options: []
85
+
86
+ require_paths:
87
+ - lib
88
+ required_ruby_version: !ruby/object:Gem::Requirement
89
+ none: false
90
+ requirements:
91
+ - - ">="
92
+ - !ruby/object:Gem::Version
93
+ hash: 3
94
+ segments:
95
+ - 0
96
+ version: "0"
97
+ required_rubygems_version: !ruby/object:Gem::Requirement
98
+ none: false
99
+ requirements:
100
+ - - ">="
101
+ - !ruby/object:Gem::Version
102
+ hash: 3
103
+ segments:
104
+ - 0
105
+ version: "0"
106
+ requirements: []
107
+
108
+ rubyforge_project: bourbon
109
+ rubygems_version: 1.8.5
110
+ signing_key:
111
+ specification_version: 3
112
+ summary: Bourbon Sass Mixins using SCSS syntax.
113
+ test_files: []
114
+