rocks 0.0.3
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +4 -0
- data/CHANGELOG.md +23 -0
- data/Gemfile +2 -0
- data/LICENSE +19 -0
- data/README.md +199 -0
- data/Rakefile +1 -0
- data/app/assets/stylesheets/_grid.scss +100 -0
- data/app/assets/stylesheets/_layout.scss +152 -0
- data/app/assets/stylesheets/_links.scss +75 -0
- data/app/assets/stylesheets/_lists.scss +60 -0
- data/app/assets/stylesheets/_reset.scss +156 -0
- data/app/assets/stylesheets/_rocks.scss +6 -0
- data/app/assets/stylesheets/_type.scss +59 -0
- data/lib/rocks/engine.rb +4 -0
- data/lib/rocks/version.rb +3 -0
- data/lib/rocks.rb +9 -0
- data/rocks.gemspec +24 -0
- metadata +82 -0
data/.gitignore
ADDED
data/CHANGELOG.md
ADDED
@@ -0,0 +1,23 @@
|
|
1
|
+
## 0.0.3
|
2
|
+
|
3
|
+
* Bugfixes:
|
4
|
+
* invalid Sass syntax
|
5
|
+
* invalid gemspec
|
6
|
+
* always specify defaults for optional arguments
|
7
|
+
* Do not use strings for float values
|
8
|
+
* Target selector for block links is now optional
|
9
|
+
* prepend mixin now uses columns function rather than span
|
10
|
+
* Added new link-colors-darken mixin
|
11
|
+
* Import reset file into manifest file
|
12
|
+
|
13
|
+
## 0.0.2
|
14
|
+
|
15
|
+
* Added `trailing`, `leading`, `voutset` mixins
|
16
|
+
* Added `container`
|
17
|
+
* Minor name changes
|
18
|
+
* Added inline docs
|
19
|
+
* Made `clearfix` mixin extend `.clearfix`, rather than other way around
|
20
|
+
|
21
|
+
## 0.0.1
|
22
|
+
|
23
|
+
* Inital release
|
data/Gemfile
ADDED
data/LICENSE
ADDED
@@ -0,0 +1,19 @@
|
|
1
|
+
Copyright (c) 2011 Arjan van der Gaag
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
4
|
+
of this software and associated documentation files (the "Software"), to deal
|
5
|
+
in the Software without restriction, including without limitation the rights
|
6
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
7
|
+
copies of the Software, and to permit persons to whom the Software is
|
8
|
+
furnished to do so, subject to the following conditions:
|
9
|
+
|
10
|
+
The above copyright notice and this permission notice shall be included in
|
11
|
+
all copies or substantial portions of the Software.
|
12
|
+
|
13
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
14
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
15
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
16
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
17
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
18
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
19
|
+
THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,199 @@
|
|
1
|
+
# Rocks
|
2
|
+
|
3
|
+
This is a tiny library of mixins and styles for developing large-ish
|
4
|
+
stylesheets with [Sass][].
|
5
|
+
|
6
|
+
I extracted these styles from a bunch of larger-than-average projects I have
|
7
|
+
worked on, as I found I was repeating myself over and over again. There is
|
8
|
+
nothing groundbreaking in here, just a useful collection of snippets to build
|
9
|
+
your own stylesheets with.
|
10
|
+
|
11
|
+
This library does not aim to help you write CSS, but better stylesheets. It
|
12
|
+
provides re-usable components and patterns to help you simplify styling common
|
13
|
+
objects on your page.
|
14
|
+
|
15
|
+
The contents of this project are in partly homegrown and partly borrowed from
|
16
|
+
projects like [Blueprint][], [Compass][] and many others.
|
17
|
+
|
18
|
+
**Note**: this is very much a work in progress. Mind the gap.
|
19
|
+
|
20
|
+
# Installation
|
21
|
+
|
22
|
+
## Installation for Rails 3.1+ projects
|
23
|
+
|
24
|
+
Include Rocks in your Gemfile:
|
25
|
+
|
26
|
+
gem 'rocks'
|
27
|
+
|
28
|
+
Let [Bundler][] install it:
|
29
|
+
|
30
|
+
$ bundle install
|
31
|
+
|
32
|
+
Make sure your `application.css` file is compiled by Sass by renaming it to
|
33
|
+
`application.css.scss`. Import the Rocks stylesheets:
|
34
|
+
|
35
|
+
@import "rocks";
|
36
|
+
|
37
|
+
Add your own styles and imports below that.
|
38
|
+
|
39
|
+
**Note** if you also include [Bourbon][] in your project, make sure put
|
40
|
+
`@import "bourbon";` _before_ `@import "rocks";`, as per its installation
|
41
|
+
instructions.
|
42
|
+
|
43
|
+
## Installation for non-Rails 3.1+ projects
|
44
|
+
|
45
|
+
Unsupported so far. I may write a simple installer script one day that
|
46
|
+
automatically copies all the stylesheets into a directory of your choosing. For
|
47
|
+
now, you'll have to do that manually.
|
48
|
+
|
49
|
+
# Contents
|
50
|
+
|
51
|
+
## Grid
|
52
|
+
|
53
|
+
Contains functions and mixins for working with a grid-based layout. The grid is
|
54
|
+
based on variables `$grid-column-width` and `$grid-margin`. It provides the
|
55
|
+
following functions:
|
56
|
+
|
57
|
+
* `span(n)`: get a width value for `n` number of columns.
|
58
|
+
* `columns(n)`: get the total width of a number of columns.
|
59
|
+
|
60
|
+
The difference between `span` and `columns` is inclusion of `$grid-margin` at
|
61
|
+
the end.
|
62
|
+
|
63
|
+
It contains the following mixins:
|
64
|
+
|
65
|
+
* `column($span, $with_margin: true)`: make an element a column, spanning
|
66
|
+
`$span` number of columns.
|
67
|
+
* `container`: container for `column` elements. Simply a relatively positioned
|
68
|
+
wrapped with clearfix applied.
|
69
|
+
* `rcontainer`: container for `rcolumn` elements. Contains negative left
|
70
|
+
margin, that counters the left margin of the first `rcolumn` it contains.
|
71
|
+
* `rcolumn($span)`: same as `column` but with margin applied to the left, so
|
72
|
+
you don't need to remove margin from the last column in a group.
|
73
|
+
* `prepend($span)`: pad an element with `$span` columns to the left.
|
74
|
+
* `append($span)`: pad an element with `$span` columns to the right.
|
75
|
+
* `push($span)`: move an element to the right over `$span` columns.
|
76
|
+
* `pull($span)`: move an element to the left over `$span` columns.
|
77
|
+
|
78
|
+
## Layout
|
79
|
+
|
80
|
+
Contains simple layout helper mixins:
|
81
|
+
|
82
|
+
* `float($dir: 'left')`: float en element left or right, including the
|
83
|
+
`display: inline` so often needed for IE.
|
84
|
+
* `outdent($selector, $amount, $dir: 'left', $with-padding)`: make a child
|
85
|
+
element outdented. Useful for a story with some text and an image, where all
|
86
|
+
the text should be beside the image.
|
87
|
+
* `align($dir: 'left', $v: $line, $h: $grid-margin, $mirror: false)`: float an
|
88
|
+
element with margins. Useful for left- or right floating images.
|
89
|
+
* `clearfix`: clears floated elements inside.
|
90
|
+
* `outset-left($gutter: $grid-margin, $with-padding)`: create an outdent to the
|
91
|
+
left, using a negative margin and opposing padding.
|
92
|
+
* `outset-right($gutter: $grid-margin, $with-padding)`: create an outdent to
|
93
|
+
the right, using a negative margin and opposing padding.
|
94
|
+
* `outset($gutter: $grid-marign, $with-padding: true)`: outdent to both the
|
95
|
+
left and right.
|
96
|
+
* `leading($amount: $line)`: add whitespace before an element.
|
97
|
+
* `trailing($amount: $line)`: add whitespace after an element.
|
98
|
+
* `surrounding-lines`: adds a single line-height whitespace before and after
|
99
|
+
the element.
|
100
|
+
* `voutset-top($amount, $border: 0)`: vertically outset an element, adding
|
101
|
+
negative margin and positive padding to the top.
|
102
|
+
* `voutset-bottom($amount, $border: 0)`: vertically outset an element, adding
|
103
|
+
negative margin and positive padding to the bottom.
|
104
|
+
* `voutset($amount, $border: 0)`: vertically outset an element by applying
|
105
|
+
negative marings and countering paddings top top and bottom.
|
106
|
+
|
107
|
+
All of `leading`, `trailing`, `voutset-top` and `voutset-bottom` can take both
|
108
|
+
pixel values as arguments, or a unit-less number. When given a unit-less
|
109
|
+
number, it will be fed to the `lines` function.
|
110
|
+
|
111
|
+
When using any of the `voutset` mixins, you can add an optional `$border`
|
112
|
+
argument to reduce the amount of padding that is applied, leaving room for a
|
113
|
+
border on element while preserving vertical rhythm.
|
114
|
+
|
115
|
+
It also contains a plain class `.clearfix` that you can use in your HTML. It is
|
116
|
+
meant, however, to be used with `@extend`. When your stylesheet needs a lot of
|
117
|
+
clearfixes, the end result will contain _a lot_ of duplicated code. Using
|
118
|
+
`@extend .clearfix` you can define the class once, and simply apply many
|
119
|
+
selectors to it.
|
120
|
+
|
121
|
+
## Links
|
122
|
+
|
123
|
+
Provides mixins for common link behaviours:
|
124
|
+
|
125
|
+
* `link-hover`: hide underline on normal links, show it on hover and focus.
|
126
|
+
* `link-colors($link, $visited, $hover, $active)`: set all colors at once.
|
127
|
+
* `link-colors-lighten($color)`: use `link-colors` to use a single color for
|
128
|
+
all links, but lighten the hover, focus and active styles slightly using the
|
129
|
+
`lighten` function.
|
130
|
+
* `link-colors-darken($color)`: like `link-colors-lighten` but using the
|
131
|
+
`darken` function instead of `lighten`.
|
132
|
+
* `link-press`: make a link 'pressable' by offsetting it 1px in its active
|
133
|
+
state.
|
134
|
+
* `link-unstyled($color: $color-text)`: make a link appear as regular text.
|
135
|
+
* `link-block($target: .target)` make a link work as a block, wrapping multiple
|
136
|
+
elements that will be clickable. The (optional) target selector applies
|
137
|
+
styles to a child element that should _appear_ as a link, by extending
|
138
|
+
`.block-link-target` -- which you should define yourself.
|
139
|
+
|
140
|
+
## Lists
|
141
|
+
|
142
|
+
Provides basic building blocks for styling lists:
|
143
|
+
|
144
|
+
* `list-no-bullets`: removes list bullets.
|
145
|
+
* `list-plain`: removes bullets and spacing.
|
146
|
+
* `list-inline`: removes bullets and shows elements inline.
|
147
|
+
* `list-horizontal($margin: $grid-margin, $dir: 'left')`: floats all chilren to
|
148
|
+
a horizontal list.
|
149
|
+
* `list-dl-table($width, $margin: $grid-margin)`: show a term and its
|
150
|
+
definition (dt and dd) on a single line.
|
151
|
+
* `list-image-bullets($img, $padding: $grid-margin, $x: 0, $y: 0)`: use an
|
152
|
+
image as list bullet using the background-image technique.
|
153
|
+
|
154
|
+
## Reset
|
155
|
+
|
156
|
+
Provides a single `reset` mixin that reset all styles. You probably want to mix
|
157
|
+
this into your `body` selector, but you could also use it for a local reset in
|
158
|
+
a specific element.
|
159
|
+
|
160
|
+
## Type
|
161
|
+
|
162
|
+
Defines the following variables:
|
163
|
+
|
164
|
+
* `$line`: the base line height of your site. Used in many different places for
|
165
|
+
marigns, paddings and heights to achieve a sensible vertical rhythm. Defaults
|
166
|
+
to `20px`.
|
167
|
+
* `$size-text`: the default text size. Defaults to `14px`.
|
168
|
+
* `$color-text`: the default text color. Defaults to `#444`.
|
169
|
+
|
170
|
+
Defines the following functions:
|
171
|
+
|
172
|
+
* `lines($n)`: returns a mutliple of `$lines`.
|
173
|
+
|
174
|
+
It defines the following mixins:
|
175
|
+
|
176
|
+
* `text-icon($img, $padding: $grid-margin, $x: 0, $y:0)`: give an element an
|
177
|
+
icon by setting an image to the background and applying some padding.
|
178
|
+
* `text-replace($img, $x: 0, $y: 0, $w: false, $h: false)`: replace an
|
179
|
+
element's text with an image by setting it to the background. You can
|
180
|
+
optionally specify width, height and background positioning.
|
181
|
+
|
182
|
+
# History
|
183
|
+
|
184
|
+
See CHANGELOG.md for a full of changes.
|
185
|
+
|
186
|
+
# Credits
|
187
|
+
|
188
|
+
**Author**: Arjan van der Gaag
|
189
|
+
**URL**: http://arjanvandergaag.nl
|
190
|
+
|
191
|
+
# License
|
192
|
+
|
193
|
+
See the LICENSE file for more information.
|
194
|
+
|
195
|
+
[Sass]: http://sass-lang.com
|
196
|
+
[Compass]: http://compass-style.org
|
197
|
+
[Blueprint]: http://blueprintcss.org
|
198
|
+
[Bourbon]: https://github.com/thoughbot/bourbon
|
199
|
+
[Bundler]: http://gembundler.com
|
data/Rakefile
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
require 'bundler/gem_tasks'
|
@@ -0,0 +1,100 @@
|
|
1
|
+
// The width of a single column container
|
2
|
+
$grid-column-width: 40px !default;
|
3
|
+
|
4
|
+
// The amount of margin between two adjacent columns
|
5
|
+
$grid-margin: 20px !default;
|
6
|
+
|
7
|
+
// Helper variable that combines column width and margin.
|
8
|
+
$grid-column: $grid-column-width + $grid-margin;
|
9
|
+
|
10
|
+
// Calculate the width of a container spanning $n number of columns.
|
11
|
+
@function span($n) {
|
12
|
+
@return $n * $grid-column-width + ($n - 1) * $grid-margin;
|
13
|
+
}
|
14
|
+
|
15
|
+
// Calculate the total width of $n number of columns, including the trailing
|
16
|
+
// margin.
|
17
|
+
@function columns($n) {
|
18
|
+
@return $grid-column * $n;
|
19
|
+
}
|
20
|
+
|
21
|
+
// A column is floated, fixed-width container that you can use to manage
|
22
|
+
// horizontal layout. Columns stack up horizontally as long as there is
|
23
|
+
// space left in the parent element.
|
24
|
+
//
|
25
|
+
// Columns are assumend to live in an element that mixes in `container`,
|
26
|
+
// so it correctly clears its floating child elements.
|
27
|
+
//
|
28
|
+
// Columns are spaced apart with `$grid-margin`, unless you tell it
|
29
|
+
// not to using `$with_margin`. You can also use `rcolumn`, which puts
|
30
|
+
// the margin to the left, rather that the right.
|
31
|
+
@mixin column($span, $with_margin: true) {
|
32
|
+
@include float;
|
33
|
+
width: span($span);
|
34
|
+
@if $with_margin {
|
35
|
+
margin-right: $grid-margin;
|
36
|
+
}
|
37
|
+
}
|
38
|
+
|
39
|
+
// Make an element correctly clear its column child elements. Simpel alias for
|
40
|
+
// clearfix.
|
41
|
+
@mixin container {
|
42
|
+
@include clearfix;
|
43
|
+
position: relative;
|
44
|
+
}
|
45
|
+
|
46
|
+
// Reverse container, similar to `container`. This container assumes to contain
|
47
|
+
// elements mixin in `rcolumn`.
|
48
|
+
//
|
49
|
+
// An `rcontainer` element has negative left margin equal to the
|
50
|
+
// `$grid-margin`, so that the left margin of the first `rcolumn` child element
|
51
|
+
// exactly overlaps it, effectively cancelling it. This results in not having
|
52
|
+
// to remove the right margin when using regular columns with a special `last`
|
53
|
+
// class.
|
54
|
+
@mixin rcontainer {
|
55
|
+
@include container;
|
56
|
+
margin-left: -$grid-margin;
|
57
|
+
}
|
58
|
+
|
59
|
+
// Similar to `column`, but with the margin applied to the left side, rather
|
60
|
+
// than right. When used in combination with `rcontainer`, you no longer need
|
61
|
+
// to worry the last column in a row having right margin, which would not fit a
|
62
|
+
// container.
|
63
|
+
@mixin rcolumn($span) {
|
64
|
+
@include column($span, false);
|
65
|
+
margin-left: $grid-margin;
|
66
|
+
}
|
67
|
+
|
68
|
+
// Apply a number of columns as padding to the left of a `column` element.
|
69
|
+
@mixin prepend($span) {
|
70
|
+
padding-left: columns($span);
|
71
|
+
}
|
72
|
+
|
73
|
+
// Apply a number of columns as padding to the right of a `column` element.
|
74
|
+
@mixin append($span) {
|
75
|
+
padding-right: span($span);
|
76
|
+
}
|
77
|
+
|
78
|
+
// Use negative margins to visually push a column to the right an amount of
|
79
|
+
// columns.
|
80
|
+
@mixin push($span) {
|
81
|
+
margin {
|
82
|
+
left: columns($span);
|
83
|
+
right: columns(-$span);
|
84
|
+
}
|
85
|
+
}
|
86
|
+
|
87
|
+
// Use negative margins to visually shift a column to the left.
|
88
|
+
//
|
89
|
+
// When this column is the last column in the source, but you want to pull it
|
90
|
+
// to the left, another column will become the column. If you have removed the
|
91
|
+
// right margin from that column, we need to compensate that amount of margin
|
92
|
+
// on the armount we pull to the left. You can cancel this behaviour by passing
|
93
|
+
// `false` for `$last`.
|
94
|
+
@mixin pull($span, $last: true) {
|
95
|
+
@if $last {
|
96
|
+
margin-left: columns(-$span) + $grid-margin;
|
97
|
+
} @else {
|
98
|
+
margin-left: columns(-$span);
|
99
|
+
}
|
100
|
+
}
|
@@ -0,0 +1,152 @@
|
|
1
|
+
// Consistent floats: float to the left and use `display: inline` to make it
|
2
|
+
// more likely to work correctly in IE.
|
3
|
+
@mixin float($dir: left) {
|
4
|
+
float: $dir;
|
5
|
+
display: inline;
|
6
|
+
}
|
7
|
+
|
8
|
+
// Outdent a child element from the current element.
|
9
|
+
//
|
10
|
+
// The element matched by `selector` will receive a negative margin to the
|
11
|
+
// left, pulling it out of the container element this mixin applies to. You
|
12
|
+
// can optionally add the same amount of padding to the container, so all the
|
13
|
+
// container's contents get indented, and the selected child element sits in
|
14
|
+
// the created whitespace.
|
15
|
+
//
|
16
|
+
// $selector is the selecter the outdenting styles apply to
|
17
|
+
// $amount is the width to outdent
|
18
|
+
// $dir is the direction of the outdent, defaulting to left
|
19
|
+
// $with-padding controls whether the same $amount of padding is applied
|
20
|
+
@mixin outdent($selector, $amount, $dir: left, $with-padding: true) {
|
21
|
+
@if $with-padding {
|
22
|
+
padding-#{$dir}: $amount;
|
23
|
+
}
|
24
|
+
#{$selector} {
|
25
|
+
@include float($dir);
|
26
|
+
@if $dir == left {
|
27
|
+
margin-left: -$amount;
|
28
|
+
} @else {
|
29
|
+
margin-right: -$amount;
|
30
|
+
}
|
31
|
+
}
|
32
|
+
}
|
33
|
+
|
34
|
+
// Mimic the HTML align attribute, but better
|
35
|
+
//
|
36
|
+
// This floats an element in direction given by `$dir`, and applies some
|
37
|
+
// whitespace around it.
|
38
|
+
@mixin align($dir: 'left', $v: $line, $h: $grid-margin, $mirror: false) {
|
39
|
+
@include float('left');
|
40
|
+
margin-top: $v;
|
41
|
+
margin-bottom: $v;
|
42
|
+
@if $dir == 'right' or $mirror {
|
43
|
+
margin-left: $h;
|
44
|
+
} @else {
|
45
|
+
margin-left: 0;
|
46
|
+
}
|
47
|
+
@if $dir == 'left' or $mirror {
|
48
|
+
margin-right: $h;
|
49
|
+
} @else {
|
50
|
+
margin-right: 0;
|
51
|
+
}
|
52
|
+
}
|
53
|
+
|
54
|
+
// Let an element automatically clear its containing floats.
|
55
|
+
@mixin clearfix {
|
56
|
+
@extend .clearfix;
|
57
|
+
}
|
58
|
+
|
59
|
+
.clearfix {
|
60
|
+
zoom: 1;
|
61
|
+
&:after {
|
62
|
+
visibility: hidden;
|
63
|
+
display: block;
|
64
|
+
font-size: 0;
|
65
|
+
content: " ";
|
66
|
+
clear: both;
|
67
|
+
height: 0;
|
68
|
+
}
|
69
|
+
}
|
70
|
+
|
71
|
+
// Apply negative margin and equal, opposing padding, to the left of an element.
|
72
|
+
@mixin outset-left($gutter: $grid-margin, $with-padding: false) {
|
73
|
+
margin-left: -$gutter;
|
74
|
+
@if $with-padding == true {
|
75
|
+
padding-left: $gutter;
|
76
|
+
}
|
77
|
+
}
|
78
|
+
|
79
|
+
// Apply negative margin and equal, opposing padding, to the right of an element.
|
80
|
+
@mixin outset-right($gutter: $grid-margin, $with-padding: false) {
|
81
|
+
margin-right: -$gutter;
|
82
|
+
@if $with-padding == true {
|
83
|
+
padding-right: $gutter;
|
84
|
+
}
|
85
|
+
}
|
86
|
+
|
87
|
+
// Apply negative margin and equal, opposing padding, to the right and left of
|
88
|
+
// an element. Useful for horizontally breaking out of a container element.
|
89
|
+
@mixin outset($gutter: $grid-margin, $with-padding: true) {
|
90
|
+
@include outset-left($gutter, $with-padding);
|
91
|
+
@include outset-right($gutter, $with-padding);
|
92
|
+
}
|
93
|
+
|
94
|
+
// Apply consistent whitespace above an element, either in number of lines
|
95
|
+
// or as a fixed amount.
|
96
|
+
@mixin leading($amount: $line) {
|
97
|
+
@if unitless($amount) {
|
98
|
+
margin-top: lines($amount);
|
99
|
+
} @else {
|
100
|
+
margin-top: $amount;
|
101
|
+
}
|
102
|
+
}
|
103
|
+
|
104
|
+
// Apply consistent whitespace below an element, either in number of lines or
|
105
|
+
// as a fixed amount.
|
106
|
+
@mixin trailing($amount: $line) {
|
107
|
+
@if unitless($amount) {
|
108
|
+
margin-bottom: lines($amount);
|
109
|
+
} @else {
|
110
|
+
margin-bottom: $amount;
|
111
|
+
}
|
112
|
+
}
|
113
|
+
|
114
|
+
// Apply default trailing and leading whitespace around elements. Assumed to be
|
115
|
+
// applied to all non-generic block-level elements (so p, h1 and table but not
|
116
|
+
// div or section)
|
117
|
+
@mixin surrounding-lines {
|
118
|
+
@include leading;
|
119
|
+
@include trailing;
|
120
|
+
}
|
121
|
+
|
122
|
+
// Vertically outset an element by applying negative margin and equal, opposing
|
123
|
+
// padding to the top. You can optionally remove some of the padding to allow
|
124
|
+
// room for a border.
|
125
|
+
@mixin voutset-top($amount, $border: 0) {
|
126
|
+
@if unitless($amount) {
|
127
|
+
$amount: lines($amount);
|
128
|
+
}
|
129
|
+
margin-top: -$amount;
|
130
|
+
padding-top: $amount - $border;
|
131
|
+
}
|
132
|
+
|
133
|
+
// Vertically outset an element by applying negative margin and equal, opposing
|
134
|
+
// padding to the bottom. You can optionally remove some of the padding to
|
135
|
+
// allow room for a border.
|
136
|
+
@mixin voutset-bottom($amount, $border: 0) {
|
137
|
+
@if unitless($amount) {
|
138
|
+
$amount: lines($amount);
|
139
|
+
}
|
140
|
+
margin-bottom: -$amount;
|
141
|
+
padding-bottom: $amount - $border;
|
142
|
+
}
|
143
|
+
|
144
|
+
// Vertically outset an element by applying negative margins and equal,
|
145
|
+
// opossing padding above and below an element.
|
146
|
+
//
|
147
|
+
// This is useful for having text between two paragrahps equally spaced apart,
|
148
|
+
// but add a background or border around one element with nice padding.
|
149
|
+
@mixin voutset($amount, $border: 0) {
|
150
|
+
@include voutset-top($amount, $border);
|
151
|
+
@include voutset-bottom($amount, $border);
|
152
|
+
}
|
@@ -0,0 +1,75 @@
|
|
1
|
+
// Hide the underlines from a link, except when hovering or focusing on it.
|
2
|
+
@mixin link-hover {
|
3
|
+
text-decoration: none;
|
4
|
+
&:hover, &:focus {
|
5
|
+
text-decoration: underline;
|
6
|
+
}
|
7
|
+
}
|
8
|
+
|
9
|
+
// Shortcut to assign colors to all link states.
|
10
|
+
@mixin link-colors($link, $visited, $hover, $active) {
|
11
|
+
color: $link;
|
12
|
+
&:visited {
|
13
|
+
color: $visited;
|
14
|
+
}
|
15
|
+
&:hover, &:focus {
|
16
|
+
color: $hover;
|
17
|
+
}
|
18
|
+
&:active {
|
19
|
+
color: $active;
|
20
|
+
}
|
21
|
+
}
|
22
|
+
|
23
|
+
// Shortcut to use a base color for all link state colors, lightening the
|
24
|
+
// hover, focus and active states and desaturating the visited state.
|
25
|
+
@mixin link-colors-lighten($color) {
|
26
|
+
@include link-colors(
|
27
|
+
$color,
|
28
|
+
desaturate($color, 30%),
|
29
|
+
lighten($color, 10%),
|
30
|
+
lighten($color, 20%)
|
31
|
+
);
|
32
|
+
}
|
33
|
+
|
34
|
+
@mixin link-colors-darken($color) {
|
35
|
+
@include link-colors(
|
36
|
+
$color,
|
37
|
+
desaturate($color, 30%),
|
38
|
+
darken($color, 10%),
|
39
|
+
darken($color, 20%)
|
40
|
+
);
|
41
|
+
}
|
42
|
+
|
43
|
+
// Make a link appear pressable by offsetting it one pixel in the active state.
|
44
|
+
// Note: this only works whe the element is not absolutely positioned.
|
45
|
+
@mixin link-press {
|
46
|
+
&:active {
|
47
|
+
position: relative;
|
48
|
+
top: 1px;
|
49
|
+
left: 1px;
|
50
|
+
}
|
51
|
+
}
|
52
|
+
|
53
|
+
// Remove default styles from links, making it appear as normal text.
|
54
|
+
@mixin link-unstyled($color: $color-text) {
|
55
|
+
@include link-colors($color, $color, $color, $color);
|
56
|
+
&:link, &:visited, &:hover, &:focus, &:active {
|
57
|
+
text-decoration: none;
|
58
|
+
}
|
59
|
+
}
|
60
|
+
|
61
|
+
// Link block pattern. Useful when a link contains several block elements.
|
62
|
+
// This makes all the containing elements clickable, but does not style them as
|
63
|
+
// links. Instead, you are expected to provide a class `.block-link-target`
|
64
|
+
// whose styles will be applied to style the child element that should behave
|
65
|
+
// and look like a link.
|
66
|
+
@mixin link-block($target: '.target') {
|
67
|
+
@include link-unstyled;
|
68
|
+
display: block;
|
69
|
+
@if $target {
|
70
|
+
#{$target} {
|
71
|
+
@extend .block-link-target;
|
72
|
+
}
|
73
|
+
}
|
74
|
+
}
|
75
|
+
|
@@ -0,0 +1,60 @@
|
|
1
|
+
// Remove all the bullets from a list.
|
2
|
+
@mixin list-no-bullets {
|
3
|
+
list-style-type: none;
|
4
|
+
list-style-image: none;
|
5
|
+
}
|
6
|
+
|
7
|
+
// Remove bullets and whitespace from a list.
|
8
|
+
@mixin list-plain {
|
9
|
+
@include list-no-bullets;
|
10
|
+
margin: 0;
|
11
|
+
padding: 0;
|
12
|
+
}
|
13
|
+
|
14
|
+
// Make all list items in a list appear on the same line, inline.
|
15
|
+
@mixin list-inline {
|
16
|
+
@include list-plain;
|
17
|
+
display: inline;
|
18
|
+
li {
|
19
|
+
display: inline;
|
20
|
+
}
|
21
|
+
}
|
22
|
+
|
23
|
+
// Make all list items in a list appear on the same line as floated block
|
24
|
+
// elements.
|
25
|
+
//
|
26
|
+
// $margin controls the amount of whitespace between items
|
27
|
+
// $dir controls the floating direction.
|
28
|
+
@mixin list-horizontal($margin: $grid-margin, $dir: left) {
|
29
|
+
@include list-plain;
|
30
|
+
@include clearfix;
|
31
|
+
li {
|
32
|
+
float: left;
|
33
|
+
display: inline;
|
34
|
+
margin-#{$dir}: $margin;
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
38
|
+
// Mixin for a defniition list element, to have its terms and definitions
|
39
|
+
// appear on a single line.
|
40
|
+
@mixin list-dl-table($width, $margin: $grid-margin) {
|
41
|
+
padding-left: $width + $margin;
|
42
|
+
dt {
|
43
|
+
float: left;
|
44
|
+
clear: left;
|
45
|
+
display: inline;
|
46
|
+
width: $width;
|
47
|
+
margin-right: $margin;
|
48
|
+
margin-left: -$width - $margin;
|
49
|
+
}
|
50
|
+
}
|
51
|
+
|
52
|
+
// Add custom list bullets using background images.
|
53
|
+
//
|
54
|
+
// All arguments are delegated to the `text-icon` mixin.
|
55
|
+
@mixin list-image-bullets($img, $padding: $grid-margin, $x: 0, $y: 0) {
|
56
|
+
@include list-no-bullets;
|
57
|
+
li {
|
58
|
+
@include text-icon($img, $padding, $x, $y);
|
59
|
+
}
|
60
|
+
}
|
@@ -0,0 +1,156 @@
|
|
1
|
+
@mixin reset {
|
2
|
+
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
|
3
|
+
blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q,
|
4
|
+
samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset,
|
5
|
+
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
|
6
|
+
article, aside, figure, footer, header, hgroup, menu, nav, section, time,
|
7
|
+
mark, audio, video {
|
8
|
+
margin: 0;
|
9
|
+
padding: 0;
|
10
|
+
border: 0;
|
11
|
+
outline: 0;
|
12
|
+
font-size: 100%;
|
13
|
+
vertical-align: baseline;
|
14
|
+
background: transparent;
|
15
|
+
}
|
16
|
+
article, aside, figure, footer, header, hgroup, nav, section {
|
17
|
+
display: block;
|
18
|
+
}
|
19
|
+
img,
|
20
|
+
object,
|
21
|
+
embed {
|
22
|
+
max-width: 100%;
|
23
|
+
}
|
24
|
+
html {
|
25
|
+
overflow-y: scroll;
|
26
|
+
}
|
27
|
+
ol, ul {
|
28
|
+
list-style: none;
|
29
|
+
}
|
30
|
+
blockquote, q {
|
31
|
+
quotes: none;
|
32
|
+
}
|
33
|
+
blockquote:before,
|
34
|
+
blockquote:after,
|
35
|
+
q:before,
|
36
|
+
q:after {
|
37
|
+
content: '';
|
38
|
+
content: none;
|
39
|
+
}
|
40
|
+
a {
|
41
|
+
margin: 0;
|
42
|
+
padding: 0;
|
43
|
+
font-size: 100%;
|
44
|
+
vertical-align: baseline;
|
45
|
+
background: transparent;
|
46
|
+
}
|
47
|
+
del {
|
48
|
+
text-decoration: line-through;
|
49
|
+
}
|
50
|
+
abbr[title],
|
51
|
+
dfn[title] {
|
52
|
+
border-bottom: 1px dotted #000;
|
53
|
+
cursor: help;
|
54
|
+
}
|
55
|
+
table {
|
56
|
+
border-collapse: collapse;
|
57
|
+
border-spacing: 0;
|
58
|
+
}
|
59
|
+
th {
|
60
|
+
font-weight: bold;
|
61
|
+
vertical-align: bottom;
|
62
|
+
}
|
63
|
+
td {
|
64
|
+
font-weight: normal;
|
65
|
+
vertical-align: top;
|
66
|
+
}
|
67
|
+
hr {
|
68
|
+
display: block;
|
69
|
+
height: 1px;
|
70
|
+
border: 0;
|
71
|
+
border-top: 1px solid #ccc;
|
72
|
+
margin: 1em 0;
|
73
|
+
padding: 0;
|
74
|
+
}
|
75
|
+
input,
|
76
|
+
select {
|
77
|
+
vertical-align: middle;
|
78
|
+
}
|
79
|
+
pre {
|
80
|
+
white-space: pre; /* CSS2 */
|
81
|
+
white-space: pre-wrap; /* CSS 2.1 */
|
82
|
+
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
|
83
|
+
word-wrap: break-word; /* IE */
|
84
|
+
}
|
85
|
+
input[type="radio"] {
|
86
|
+
vertical-align: text-bottom;
|
87
|
+
}
|
88
|
+
input[type="checkbox"] {
|
89
|
+
vertical-align: bottom; *vertical-align: baseline;
|
90
|
+
}
|
91
|
+
.ie6 input {
|
92
|
+
vertical-align: text-bottom;
|
93
|
+
}
|
94
|
+
select,
|
95
|
+
input,
|
96
|
+
textarea {
|
97
|
+
font: 99% sans-serif;
|
98
|
+
}
|
99
|
+
table {
|
100
|
+
font-size: inherit;
|
101
|
+
font: 100%;
|
102
|
+
}
|
103
|
+
a:hover,
|
104
|
+
a:active {
|
105
|
+
outline: none;
|
106
|
+
}
|
107
|
+
small {
|
108
|
+
font-size: 85%;
|
109
|
+
}
|
110
|
+
strong,
|
111
|
+
th {
|
112
|
+
font-weight: bold;
|
113
|
+
}
|
114
|
+
td,
|
115
|
+
td img {
|
116
|
+
vertical-align: top;
|
117
|
+
}
|
118
|
+
sub,
|
119
|
+
sup {
|
120
|
+
font-size: 75%;
|
121
|
+
line-height: 0;
|
122
|
+
position: relative;
|
123
|
+
}
|
124
|
+
sup {
|
125
|
+
top: -0.5em;
|
126
|
+
}
|
127
|
+
sub {
|
128
|
+
bottom: -0.25em;
|
129
|
+
}
|
130
|
+
pre,
|
131
|
+
code,
|
132
|
+
kbd,
|
133
|
+
samp {
|
134
|
+
font-family: monospace, sans-serif;
|
135
|
+
}
|
136
|
+
.clickable,
|
137
|
+
label,
|
138
|
+
input[type=button],
|
139
|
+
input[type=submit],
|
140
|
+
button {
|
141
|
+
cursor: pointer;
|
142
|
+
}
|
143
|
+
button, input, select, textarea {
|
144
|
+
margin: 0;
|
145
|
+
}
|
146
|
+
button {
|
147
|
+
width: auto;
|
148
|
+
overflow: visible;
|
149
|
+
}
|
150
|
+
.ie7 img {
|
151
|
+
-ms-interpolation-mode: bicubic;
|
152
|
+
}
|
153
|
+
.ie6 html {
|
154
|
+
filter: expression(document.execCommand("BackgroundImageCache", false, true));
|
155
|
+
}
|
156
|
+
}
|
@@ -0,0 +1,59 @@
|
|
1
|
+
// The default line-height and vertical whitespace between consecutive
|
2
|
+
// elements.
|
3
|
+
$line: 20px !default;
|
4
|
+
|
5
|
+
// Default text size.
|
6
|
+
$size-text: 14px !default;
|
7
|
+
|
8
|
+
// Default text color.
|
9
|
+
$color-text: #444 !default;
|
10
|
+
|
11
|
+
// Calculate the height of an number of lines.
|
12
|
+
@function lines($n) {
|
13
|
+
@return $line * $n;
|
14
|
+
}
|
15
|
+
|
16
|
+
// Use a background image to give an element an icon.
|
17
|
+
//
|
18
|
+
// $img is the image source.
|
19
|
+
// $padding is the amount the element is indented. Defaults to $grid-margin
|
20
|
+
// $x and $x control the positioning of the background image, for spriting
|
21
|
+
// purposes.
|
22
|
+
@mixin text-icon($img, $padding: $grid-margin, $x: 0, $y: 0) {
|
23
|
+
padding-left: $padding;
|
24
|
+
background: {
|
25
|
+
image: url($img);
|
26
|
+
repeat: no-repeat;
|
27
|
+
position: $x $y;
|
28
|
+
}
|
29
|
+
}
|
30
|
+
|
31
|
+
// Replace text by an image.
|
32
|
+
//
|
33
|
+
// Hide the using negative text indent, and apply a background image
|
34
|
+
// so the text appears to be replaced by an image.
|
35
|
+
//
|
36
|
+
// $img is the image source
|
37
|
+
// $x and $x control the backgrounding position of the image, for spriting
|
38
|
+
// purposes.
|
39
|
+
// $w and $h allow you to set explicit dimensions on the element, to mask the
|
40
|
+
// background image.
|
41
|
+
@mixin text-replace($img, $x: 0, $y: 0, $w: false, $h: false) {
|
42
|
+
overflow: hidden;
|
43
|
+
text {
|
44
|
+
direction: rtl;
|
45
|
+
align: left;
|
46
|
+
indent: -999em;
|
47
|
+
}
|
48
|
+
background: {
|
49
|
+
image: url($img);
|
50
|
+
repeat: no-repeat;
|
51
|
+
position: $x $y;
|
52
|
+
}
|
53
|
+
@if $w {
|
54
|
+
width: $w;
|
55
|
+
}
|
56
|
+
@if $h {
|
57
|
+
height: $h;
|
58
|
+
}
|
59
|
+
}
|
data/lib/rocks/engine.rb
ADDED
data/lib/rocks.rb
ADDED
data/rocks.gemspec
ADDED
@@ -0,0 +1,24 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
$:.push File.expand_path("../lib", __FILE__)
|
3
|
+
require 'rocks/version'
|
4
|
+
|
5
|
+
Gem::Specification.new do |s|
|
6
|
+
s.name = 'rocks'
|
7
|
+
s.version = Rocks::VERSION
|
8
|
+
s.authors = ['Arjan van der Gaag']
|
9
|
+
s.email = ['arjan@arjanvandergaag.nl']
|
10
|
+
s.homepage = 'https://github.com/avdgaag/rocks'
|
11
|
+
s.summary = 'Sass mixins using SCSS syntax that go one step further than Bourbon'
|
12
|
+
s.description = <<-DESC
|
13
|
+
Rocks provides a set of mixins and default styles that you can use to develop
|
14
|
+
maintainable, readable stylesheets. It is designed to be used together with
|
15
|
+
Toughtbot's Bourbon, but unlike bourbon, Rocks provides actual styles, not just
|
16
|
+
tools to make styling easier. They do aim to separate function from form.
|
17
|
+
DESC
|
18
|
+
s.rubyforge_project = 'rocks'
|
19
|
+
s.files = `git ls-files`.split("\n")
|
20
|
+
s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
|
21
|
+
s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
|
22
|
+
s.require_paths = ['lib']
|
23
|
+
s.add_dependency 'sass', '>= 3.1'
|
24
|
+
end
|
metadata
ADDED
@@ -0,0 +1,82 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: rocks
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.3
|
5
|
+
prerelease:
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- Arjan van der Gaag
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
date: 2011-12-09 00:00:00.000000000 Z
|
13
|
+
dependencies:
|
14
|
+
- !ruby/object:Gem::Dependency
|
15
|
+
name: sass
|
16
|
+
requirement: &70216378912060 !ruby/object:Gem::Requirement
|
17
|
+
none: false
|
18
|
+
requirements:
|
19
|
+
- - ! '>='
|
20
|
+
- !ruby/object:Gem::Version
|
21
|
+
version: '3.1'
|
22
|
+
type: :runtime
|
23
|
+
prerelease: false
|
24
|
+
version_requirements: *70216378912060
|
25
|
+
description: ! 'Rocks provides a set of mixins and default styles that you can use
|
26
|
+
to develop
|
27
|
+
|
28
|
+
maintainable, readable stylesheets. It is designed to be used together with
|
29
|
+
|
30
|
+
Toughtbot''s Bourbon, but unlike bourbon, Rocks provides actual styles, not just
|
31
|
+
|
32
|
+
tools to make styling easier. They do aim to separate function from form.
|
33
|
+
|
34
|
+
'
|
35
|
+
email:
|
36
|
+
- arjan@arjanvandergaag.nl
|
37
|
+
executables: []
|
38
|
+
extensions: []
|
39
|
+
extra_rdoc_files: []
|
40
|
+
files:
|
41
|
+
- .gitignore
|
42
|
+
- CHANGELOG.md
|
43
|
+
- Gemfile
|
44
|
+
- LICENSE
|
45
|
+
- README.md
|
46
|
+
- Rakefile
|
47
|
+
- app/assets/stylesheets/_grid.scss
|
48
|
+
- app/assets/stylesheets/_layout.scss
|
49
|
+
- app/assets/stylesheets/_links.scss
|
50
|
+
- app/assets/stylesheets/_lists.scss
|
51
|
+
- app/assets/stylesheets/_reset.scss
|
52
|
+
- app/assets/stylesheets/_rocks.scss
|
53
|
+
- app/assets/stylesheets/_type.scss
|
54
|
+
- lib/rocks.rb
|
55
|
+
- lib/rocks/engine.rb
|
56
|
+
- lib/rocks/version.rb
|
57
|
+
- rocks.gemspec
|
58
|
+
homepage: https://github.com/avdgaag/rocks
|
59
|
+
licenses: []
|
60
|
+
post_install_message:
|
61
|
+
rdoc_options: []
|
62
|
+
require_paths:
|
63
|
+
- lib
|
64
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
65
|
+
none: false
|
66
|
+
requirements:
|
67
|
+
- - ! '>='
|
68
|
+
- !ruby/object:Gem::Version
|
69
|
+
version: '0'
|
70
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
71
|
+
none: false
|
72
|
+
requirements:
|
73
|
+
- - ! '>='
|
74
|
+
- !ruby/object:Gem::Version
|
75
|
+
version: '0'
|
76
|
+
requirements: []
|
77
|
+
rubyforge_project: rocks
|
78
|
+
rubygems_version: 1.8.11
|
79
|
+
signing_key:
|
80
|
+
specification_version: 3
|
81
|
+
summary: Sass mixins using SCSS syntax that go one step further than Bourbon
|
82
|
+
test_files: []
|