scss_helpers 0.0.1 → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +28 -4
- data/lib/assets/stylesheets/helpers.scss +50 -28
- data/lib/scss_helpers/version.rb +1 -1
- data/lib/scss_helpers.rb +13 -1
- metadata +2 -2
data/README.md
CHANGED
@@ -1,12 +1,12 @@
|
|
1
1
|
# Scss Helpers
|
2
2
|
|
3
|
-
|
3
|
+
This gem includes various SCSS mixins to help a web developer write CSS faster. While most are cross-browser this is not an attempt at being a polyfill but rather an effort to use CSS3 to its full potential. I've tried to keep the mixins as close to the actual CSS declaration as possible but in some cases it could not be done.
|
4
4
|
|
5
5
|
## Installation
|
6
6
|
|
7
7
|
Add this line to your application's Gemfile:
|
8
8
|
|
9
|
-
gem '
|
9
|
+
gem 'scss_helpers'
|
10
10
|
|
11
11
|
And then execute:
|
12
12
|
|
@@ -14,11 +14,35 @@ And then execute:
|
|
14
14
|
|
15
15
|
Or install it yourself as:
|
16
16
|
|
17
|
-
$ gem install
|
17
|
+
$ gem install scss_helpers
|
18
18
|
|
19
19
|
## Usage
|
20
|
+
To use the various mixins, you will need to add the helpers.scss file to your application.css.scss:
|
20
21
|
|
21
|
-
|
22
|
+
@import 'helpers';
|
23
|
+
|
24
|
+
All the mixins are standard SCSS mixins and are included as such.
|
25
|
+
|
26
|
+
@include border-radius(5px);
|
27
|
+
|
28
|
+
## Heplers
|
29
|
+
Helpers with great usefulness:
|
30
|
+
|
31
|
+
* border-radius
|
32
|
+
* box-shadow
|
33
|
+
* lin-gradient
|
34
|
+
* circle
|
35
|
+
* transition
|
36
|
+
|
37
|
+
Helpers with questionable helpfulness:
|
38
|
+
|
39
|
+
* clear
|
40
|
+
* text-shadow
|
41
|
+
* text-gradient
|
42
|
+
* font
|
43
|
+
|
44
|
+
## Known Issues
|
45
|
+
* Old webkit browsers only use the "left top, left bottom" linear-gradient.
|
22
46
|
|
23
47
|
## Contributing
|
24
48
|
|
@@ -1,16 +1,11 @@
|
|
1
|
-
|
2
|
-
// Turn this on and include if you want to use PIE
|
3
|
-
behavior: url(PIE.htc);
|
4
|
-
}
|
5
|
-
*/
|
6
|
-
@mixin border-radius($r) {
|
1
|
+
@mixin border-radius( $r ) {
|
7
2
|
// $r: radius, can use 5px 10px 10px 5px
|
8
3
|
-moz-border-radius: $r;
|
9
4
|
-webkit-border-radius: $r;
|
10
5
|
border-radius: $r;
|
11
6
|
}
|
12
7
|
|
13
|
-
@mixin box-shadow($args) {
|
8
|
+
@mixin box-shadow( $args ) {
|
14
9
|
// $args: standard CSS including inset
|
15
10
|
-webkit-box-shadow: $args;
|
16
11
|
-o-box-shadow: $args;
|
@@ -23,7 +18,6 @@
|
|
23
18
|
// $start: hex of the start
|
24
19
|
// $stop: hex of the stop
|
25
20
|
// $point: top?
|
26
|
-
// TODO: figure out how to make old webkit use $point
|
27
21
|
background: $color;
|
28
22
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $start), color-stop(100%, $stop)); /* Safari 4+, old Chrome */
|
29
23
|
background: -webkit-linear-gradient($point, $start, $stop); /* Safari 5.1+, Chrome */
|
@@ -35,25 +29,50 @@
|
|
35
29
|
background: linear-gradient($point, $start, $stop);
|
36
30
|
}
|
37
31
|
|
38
|
-
@mixin
|
39
|
-
// $font-name: The name of the font to use
|
40
|
-
// $font-url: The url to given font sans the ext.
|
41
|
-
@font-face {
|
42
|
-
font-family: '#{$font-name}';
|
43
|
-
src: url('#{$font-url}.eot?#iefix') format('embedded-opentype'),
|
44
|
-
url('#{$font-url}.woff') format('woff'),
|
45
|
-
url('#{$font-url}.ttf') format('truetype'),
|
46
|
-
url('#{$font-url}.svg#svg#{$font-name}') format('svg');
|
47
|
-
}
|
48
|
-
}
|
49
|
-
|
50
|
-
@mixin circle($r) {
|
32
|
+
@mixin circle( $r ) {
|
51
33
|
// $r: radius
|
52
34
|
@include border-radius($r);
|
53
35
|
height: ($r * 2);
|
54
36
|
width: ($r * 2);
|
55
37
|
}
|
56
38
|
|
39
|
+
@mixin transition( $args: all .6s linear ) {
|
40
|
+
-webkit-transition: $args;
|
41
|
+
-moz-transition: $args;
|
42
|
+
-ms-transition: $args;
|
43
|
+
-o-transition: $args;
|
44
|
+
transition: $args;
|
45
|
+
}
|
46
|
+
|
47
|
+
@mixin opacity($opacity: 0.5) {
|
48
|
+
-moz-opacity: $opacity;
|
49
|
+
-khtml-opacity: $opacity;
|
50
|
+
-webkit-opacity: $opacity;
|
51
|
+
opacity: $opacity;
|
52
|
+
}
|
53
|
+
@mixin transition-duration( $duration: 0.6s ) {
|
54
|
+
-moz-transition-duration: $duration;
|
55
|
+
-webkit-transition-duration: $duration;
|
56
|
+
transition-duration: $duration;
|
57
|
+
}
|
58
|
+
@mixin rotation( $deg: 90deg ) {
|
59
|
+
-webkit-transform: rotate( $deg );
|
60
|
+
-moz-transform: rotate( $deg );
|
61
|
+
transform: rotate( $deg );
|
62
|
+
}
|
63
|
+
@mixin scale( $ratio: 1.5 ) {
|
64
|
+
-webkit-transform: scale( $ratio );
|
65
|
+
-moz-transform: scale( $ratio );
|
66
|
+
transform: scale( $ratio );
|
67
|
+
}
|
68
|
+
@mixin translate( $x: 0, $y: 0 ) {
|
69
|
+
-moz-transform: translate( $x, $y );
|
70
|
+
-webkit-transform: translate( $x, $y );
|
71
|
+
-o-transform: translate( $x, $y );
|
72
|
+
-ms-transform: translate( $x, $y );
|
73
|
+
transform: translate( $x, $y );
|
74
|
+
}
|
75
|
+
|
57
76
|
@mixin clear() {
|
58
77
|
clear: both;
|
59
78
|
display: block;
|
@@ -77,11 +96,14 @@
|
|
77
96
|
//-ms-filter: "progid:DXImageTransform.Microsoft.DropShadow(color='#{$color}', offx='#{$x}', offy='#{$y}')";
|
78
97
|
text-shadow: $x+px $y+px $b+px $color;
|
79
98
|
}
|
80
|
-
@mixin
|
81
|
-
-
|
82
|
-
-
|
83
|
-
-
|
84
|
-
|
85
|
-
|
99
|
+
@mixin font( $font-name, $font-url ) {
|
100
|
+
// $font-name: The name of the font to use
|
101
|
+
// $font-url: The url to given font sans the ext.
|
102
|
+
@font-face {
|
103
|
+
font-family: '#{$font-name}';
|
104
|
+
src: url('#{$font-url}.eot?#iefix') format('embedded-opentype'),
|
105
|
+
url('#{$font-url}.woff') format('woff'),
|
106
|
+
url('#{$font-url}.ttf') format('truetype'),
|
107
|
+
url('#{$font-url}.svg#svg#{$font-name}') format('svg');
|
108
|
+
}
|
86
109
|
}
|
87
|
-
|
data/lib/scss_helpers/version.rb
CHANGED
data/lib/scss_helpers.rb
CHANGED
@@ -1,7 +1,19 @@
|
|
1
1
|
require "scss_helpers/version"
|
2
2
|
|
3
3
|
module ScssHelpers
|
4
|
-
|
4
|
+
|
5
|
+
def self.assets_path
|
6
|
+
Pathname.new(File.expand_path("../assets", __FILE__))
|
7
|
+
end
|
8
|
+
|
9
|
+
module Sprockets
|
10
|
+
|
11
|
+
def self.add_paths(environment)
|
12
|
+
environment.append_path(ScssHelpers.assets_path.join("stylesheets"))
|
13
|
+
end
|
14
|
+
|
15
|
+
end
|
16
|
+
|
5
17
|
end
|
6
18
|
|
7
19
|
require 'scss_helpers/engine' if defined?(Rails)
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: scss_helpers
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.2
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2012-06-
|
12
|
+
date: 2012-06-18 00:00:00.000000000 Z
|
13
13
|
dependencies: []
|
14
14
|
description: Cross-broswer css mixins
|
15
15
|
email:
|