rocks 0.0.3 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.gitignore +0 -1
- data/CHANGELOG.md +6 -0
- data/Gemfile.lock +16 -0
- data/README.md +17 -0
- data/app/assets/stylesheets/_layout.scss +4 -4
- data/app/assets/stylesheets/_type.scss +71 -0
- data/lib/rocks/version.rb +1 -1
- metadata +12 -5
data/.gitignore
CHANGED
data/CHANGELOG.md
CHANGED
data/Gemfile.lock
ADDED
data/README.md
CHANGED
@@ -46,6 +46,20 @@ Unsupported so far. I may write a simple installer script one day that
|
|
46
46
|
automatically copies all the stylesheets into a directory of your choosing. For
|
47
47
|
now, you'll have to do that manually.
|
48
48
|
|
49
|
+
If you are using Sass directly, you could try to just add the Rocks gem to
|
50
|
+
`load_path`, using something like the following:
|
51
|
+
|
52
|
+
```ruby
|
53
|
+
Sass::Engine.new(my_stylesheet,
|
54
|
+
:syntax => :scss,
|
55
|
+
:load_path => [
|
56
|
+
File.join(`bundle show rocks`, 'app', 'assets', 'stylesheets')
|
57
|
+
]
|
58
|
+
)
|
59
|
+
```
|
60
|
+
|
61
|
+
This would allow you to `@import 'rocks';` in the `my_stylesheet` file.
|
62
|
+
|
49
63
|
# Contents
|
50
64
|
|
51
65
|
## Grid
|
@@ -173,6 +187,9 @@ Defines the following functions:
|
|
173
187
|
|
174
188
|
It defines the following mixins:
|
175
189
|
|
190
|
+
* `rhythm(...)`: apply various aspects of vertical rhythm in one go,
|
191
|
+
using a combination of arguments. See the inline docs for more
|
192
|
+
information.
|
176
193
|
* `text-icon($img, $padding: $grid-margin, $x: 0, $y:0)`: give an element an
|
177
194
|
icon by setting an image to the background and applying some padding.
|
178
195
|
* `text-replace($img, $x: 0, $y: 0, $w: false, $h: false)`: replace an
|
@@ -53,10 +53,6 @@
|
|
53
53
|
|
54
54
|
// Let an element automatically clear its containing floats.
|
55
55
|
@mixin clearfix {
|
56
|
-
@extend .clearfix;
|
57
|
-
}
|
58
|
-
|
59
|
-
.clearfix {
|
60
56
|
zoom: 1;
|
61
57
|
&:after {
|
62
58
|
visibility: hidden;
|
@@ -68,6 +64,10 @@
|
|
68
64
|
}
|
69
65
|
}
|
70
66
|
|
67
|
+
.clearfix {
|
68
|
+
@include clearfix;
|
69
|
+
}
|
70
|
+
|
71
71
|
// Apply negative margin and equal, opposing padding, to the left of an element.
|
72
72
|
@mixin outset-left($gutter: $grid-margin, $with-padding: false) {
|
73
73
|
margin-left: -$gutter;
|
@@ -13,6 +13,77 @@ $color-text: #444 !default;
|
|
13
13
|
@return $line * $n;
|
14
14
|
}
|
15
15
|
|
16
|
+
// Apply vertical rhtythm to an element, setting top and bottom margins, padding and borders.
|
17
|
+
//
|
18
|
+
// You can either specify a single value to use for both the top and bottom, or specify two values:
|
19
|
+
//
|
20
|
+
// @include rhythm($margin: 2); // margin-top: lines(2); margin-bottom: lines(2);
|
21
|
+
// @include rhythm($margin: 2 0); // margin-top: lines(2); margin-bottom: lines(0);
|
22
|
+
//
|
23
|
+
// You can also specify just the top or bottom part:
|
24
|
+
//
|
25
|
+
// @include rhythm($padding-top: 2); // padding-top: lines(2);
|
26
|
+
//
|
27
|
+
// Margin and padding values are expressed in a number of lines using the `lines` function. Border values
|
28
|
+
// will only set the width and should have unit, like `px`:
|
29
|
+
//
|
30
|
+
// @include rhythm($border: 1px 3px); // border-top-width: 1px; border-bottom-width: 3px;
|
31
|
+
//
|
32
|
+
// By default, if you specify padding AND a border, the border width will be subtracted from the padding:
|
33
|
+
//
|
34
|
+
// @include rhythm($padding: 2, $border: 2px 4px);
|
35
|
+
// // padding-top: lines(2) - 2px;
|
36
|
+
// // padding-bottom: lines(2) - 4px;
|
37
|
+
// // border-top-width: 2px;
|
38
|
+
// // border-bottom-width: 2px;
|
39
|
+
//
|
40
|
+
// You can disable this behaviour by specifying `$compensate-padding: false`.
|
41
|
+
@mixin rhythm($margin: false, $padding: false, $border: false, $margin-top: false, $margin-bottom: false, $padding-top: false, $padding-bottom: false, $border-top: false, $border-bottom: false, $compensate-padding: true) {
|
42
|
+
$margin-top: if($margin, nth($margin, 1), $margin-top);
|
43
|
+
$margin-bottom: if($margin, if(length($margin) == 2, nth($margin, 2), $margin), $margin-bottom);
|
44
|
+
$padding-top: if($padding, nth($padding, 1), $padding-top);
|
45
|
+
$padding-bottom: if($padding, if(length($padding) == 2, nth($padding, 2), $padding), $padding-bottom);
|
46
|
+
$border-top: if($border, nth($border, 1), $border-top);
|
47
|
+
$border-bottom: if($border, if(length($border) == 2, nth($border, 2), $border), $border-bottom);
|
48
|
+
|
49
|
+
@if $border-top && unitless($border-top) {
|
50
|
+
@warn 'You should provide border values with units (e.g. px)';
|
51
|
+
}
|
52
|
+
@if $padding && ($padding-top || $padding-bottom) {
|
53
|
+
@warn 'You should specify only $padding or $padding-(top|bottom)';
|
54
|
+
}
|
55
|
+
@if $margin && ($margin-top || $margin-bottom) {
|
56
|
+
@warn 'You should specify only $margin or $margin-(top|bottom)';
|
57
|
+
}
|
58
|
+
|
59
|
+
@if $margin-top {
|
60
|
+
margin-top: lines($margin-top);
|
61
|
+
}
|
62
|
+
@if $margin-bottom {
|
63
|
+
margin-bottom: lines($margin-bottom);
|
64
|
+
}
|
65
|
+
@if $border-top {
|
66
|
+
border-top-width: $border-top;
|
67
|
+
}
|
68
|
+
@if $border-bottom {
|
69
|
+
border-bottom-width: $border-bottom;
|
70
|
+
}
|
71
|
+
@if $padding-top {
|
72
|
+
@if $border-top && $compensate-padding {
|
73
|
+
padding-top: lines($padding-top) - $border-top;
|
74
|
+
} @else {
|
75
|
+
padding-top: lines($padding-top);
|
76
|
+
}
|
77
|
+
}
|
78
|
+
@if($padding-bottom) {
|
79
|
+
@if $border-bottom && $compensate-padding {
|
80
|
+
padding-bottom: lines($padding-bottom) - $border-bottom;
|
81
|
+
} @else {
|
82
|
+
padding-bottom: lines($padding-bottom);
|
83
|
+
}
|
84
|
+
}
|
85
|
+
}
|
86
|
+
|
16
87
|
// Use a background image to give an element an icon.
|
17
88
|
//
|
18
89
|
// $img is the image source.
|
data/lib/rocks/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: rocks
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.4
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,11 +9,11 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date:
|
12
|
+
date: 2012-06-30 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: sass
|
16
|
-
requirement:
|
16
|
+
requirement: !ruby/object:Gem::Requirement
|
17
17
|
none: false
|
18
18
|
requirements:
|
19
19
|
- - ! '>='
|
@@ -21,7 +21,12 @@ dependencies:
|
|
21
21
|
version: '3.1'
|
22
22
|
type: :runtime
|
23
23
|
prerelease: false
|
24
|
-
version_requirements:
|
24
|
+
version_requirements: !ruby/object:Gem::Requirement
|
25
|
+
none: false
|
26
|
+
requirements:
|
27
|
+
- - ! '>='
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
version: '3.1'
|
25
30
|
description: ! 'Rocks provides a set of mixins and default styles that you can use
|
26
31
|
to develop
|
27
32
|
|
@@ -41,6 +46,7 @@ files:
|
|
41
46
|
- .gitignore
|
42
47
|
- CHANGELOG.md
|
43
48
|
- Gemfile
|
49
|
+
- Gemfile.lock
|
44
50
|
- LICENSE
|
45
51
|
- README.md
|
46
52
|
- Rakefile
|
@@ -75,8 +81,9 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
75
81
|
version: '0'
|
76
82
|
requirements: []
|
77
83
|
rubyforge_project: rocks
|
78
|
-
rubygems_version: 1.8.
|
84
|
+
rubygems_version: 1.8.24
|
79
85
|
signing_key:
|
80
86
|
specification_version: 3
|
81
87
|
summary: Sass mixins using SCSS syntax that go one step further than Bourbon
|
82
88
|
test_files: []
|
89
|
+
has_rdoc:
|