shelves 0.5.0 → 0.6.0
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/README.md +18 -3
- data/component.json +13 -0
- data/lib/shelves/version.rb +1 -1
- data/scss/shelves/_functions.scss +14 -18
- data/scss/shelves/_settings.scss +0 -1
- data/scss/shelves/mixins/_base.scss +20 -29
- data/scss/shelves/mixins/_generators.scss +37 -37
- data/scss/shelves/mixins/_modifiers.scss +16 -20
- data/scss/shelves/mixins/_resets.scss +8 -2
- metadata +25 -15
data/README.md
CHANGED
@@ -3,8 +3,9 @@ Shelves CSS Grid
|
|
3
3
|
|
4
4
|
**The only responsive, fluid CSS grid with infinitely nestable columns.**
|
5
5
|
|
6
|
-
|
6
|
+
[See the Demo](http://shelves.petebrowne.com/)
|
7
7
|
|
8
|
+
TODO: Add longer description & Feature list.
|
8
9
|
|
9
10
|
Installation
|
10
11
|
------------
|
@@ -13,7 +14,7 @@ Installation
|
|
13
14
|
|
14
15
|
Download the latest distribution of [the CSS file](https://raw.github.com/petebrowne/shelves/master/css/shelves.css) and go to town.
|
15
16
|
|
16
|
-
### For
|
17
|
+
### For Sass Users (Compass & Rails)
|
17
18
|
|
18
19
|
Add the shelves gem to your Gemfile and import it:
|
19
20
|
|
@@ -28,13 +29,27 @@ gem 'shelves'
|
|
28
29
|
@import "shelves-grid"; // Import mixins & default grid
|
29
30
|
```
|
30
31
|
|
32
|
+
Custom CSS Build
|
33
|
+
----------------
|
34
|
+
|
35
|
+
To customize the CSS without using Sass, you can use the command line tool:
|
36
|
+
|
37
|
+
``` bash
|
38
|
+
$ gem install shelves
|
39
|
+
$ shelves --width 1140px --columns 16 > grid.css
|
40
|
+
```
|
41
|
+
|
42
|
+
Run width `--help` to see all of the available options:
|
43
|
+
|
44
|
+
``` bash
|
45
|
+
$ shelves --help
|
46
|
+
```
|
31
47
|
|
32
48
|
Usage
|
33
49
|
-----
|
34
50
|
|
35
51
|
TODO...
|
36
52
|
|
37
|
-
|
38
53
|
Copyright
|
39
54
|
---------
|
40
55
|
|
data/component.json
ADDED
data/lib/shelves/version.rb
CHANGED
@@ -10,10 +10,9 @@
|
|
10
10
|
// Defaults to the value of $shelves-gutter.
|
11
11
|
//
|
12
12
|
@function column-width(
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
) {
|
13
|
+
$context: null,
|
14
|
+
$total: $shelves-columns,
|
15
|
+
$gutter: $shelves-gutter) {
|
17
16
|
$context: $total !default;
|
18
17
|
|
19
18
|
@if $context <= 1 {
|
@@ -41,10 +40,9 @@
|
|
41
40
|
// Defaults to the value of $shelves-gutter.
|
42
41
|
//
|
43
42
|
@function column-gutter(
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
) {
|
43
|
+
$context: null,
|
44
|
+
$total: $shelves-columns,
|
45
|
+
$gutter: $shelves-gutter) {
|
48
46
|
$context: $total !default;
|
49
47
|
|
50
48
|
@if $context <= 1 {
|
@@ -72,11 +70,10 @@
|
|
72
70
|
// Defaults to the value of $shelves-gutter.
|
73
71
|
//
|
74
72
|
@function columns-width(
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
) {
|
73
|
+
$n,
|
74
|
+
$context: null,
|
75
|
+
$total: $shelves-columns,
|
76
|
+
$gutter: $shelves-gutter) {
|
80
77
|
$context: $total !default;
|
81
78
|
|
82
79
|
@if $n <= 1 {
|
@@ -106,11 +103,10 @@
|
|
106
103
|
// Defaults to the value of $shelves-gutter.
|
107
104
|
//
|
108
105
|
@function columns-distance(
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
) {
|
106
|
+
$n,
|
107
|
+
$context: null,
|
108
|
+
$total: $shelves-columns,
|
109
|
+
$gutter: $shelves-gutter) {
|
114
110
|
@return columns-width($n, $context, $total, $gutter) + column-gutter($context, $total, $gutter);
|
115
111
|
}
|
116
112
|
|
data/scss/shelves/_settings.scss
CHANGED
@@ -25,7 +25,6 @@ $shelves-mobile-gutter: $shelves-gutter * 2.375 !default;
|
|
25
25
|
|
26
26
|
// Default Class Names
|
27
27
|
// (Note the lack of the preceding ".")
|
28
|
-
$shelves-container-name: "container" !default;
|
29
28
|
$shelves-row-name: "row" !default;
|
30
29
|
$shelves-column-name: "column" !default;
|
31
30
|
$shelves-prefix-name: "prefix" !default;
|
@@ -22,25 +22,19 @@
|
|
22
22
|
// mobile sizes. Defaults to false.
|
23
23
|
//
|
24
24
|
@mixin row(
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
) {
|
25
|
+
$max-width: $shelves-max-width,
|
26
|
+
$min-width: $shelves-min-width,
|
27
|
+
$reset-if-tablet: true,
|
28
|
+
$reset-if-mobile: false) {
|
30
29
|
@include shelves-clearfix;
|
31
|
-
width: 100%;
|
32
30
|
|
33
31
|
@if type-of($max-width) == 'number' {
|
34
|
-
max-width: $max-width;
|
35
|
-
margin-left: auto;
|
36
32
|
margin-right: auto;
|
33
|
+
margin-left: auto;
|
34
|
+
max-width: $max-width;
|
37
35
|
}
|
38
36
|
@if type-of($min-width) == 'number' {
|
39
37
|
min-width: $min-width;
|
40
|
-
|
41
|
-
.#{$shelves-row-name} {
|
42
|
-
min-width: 0;
|
43
|
-
}
|
44
38
|
}
|
45
39
|
@if $reset-if-tablet {
|
46
40
|
@media screen and (max-width: $shelves-tablet-breakpoint) {
|
@@ -70,13 +64,12 @@
|
|
70
64
|
// mobile sizes. Defaults to false.
|
71
65
|
//
|
72
66
|
@mixin column(
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
) {
|
67
|
+
$n,
|
68
|
+
$context: null,
|
69
|
+
$total: $shelves-columns,
|
70
|
+
$gutter: $shelves-gutter,
|
71
|
+
$reset-if-tablet: true,
|
72
|
+
$reset-if-mobile: false) {
|
80
73
|
@include column-base($reset-if-tablet, $reset-if-mobile);
|
81
74
|
@include column-gutter($context, $total, $gutter);
|
82
75
|
@include columns-width($n, $context, $total, $gutter);
|
@@ -125,11 +118,10 @@
|
|
125
118
|
// Defaults to the value of $shelves-gutter.
|
126
119
|
//
|
127
120
|
@mixin columns-width(
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
) {
|
121
|
+
$n,
|
122
|
+
$context: null,
|
123
|
+
$total: $shelves-columns,
|
124
|
+
$gutter: $shelves-gutter) {
|
133
125
|
width: columns-width($n, $context, $total, $gutter);
|
134
126
|
}
|
135
127
|
|
@@ -145,11 +137,10 @@
|
|
145
137
|
// Defaults to true.
|
146
138
|
//
|
147
139
|
@mixin column-gutter(
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
) {
|
140
|
+
$context: null,
|
141
|
+
$total: $shelves-columns,
|
142
|
+
$gutter: $shelves-gutter,
|
143
|
+
$reset-first: true) {
|
153
144
|
margin-left: column-gutter($context, $total, $gutter);
|
154
145
|
|
155
146
|
@if $reset-first {
|
@@ -35,26 +35,25 @@
|
|
35
35
|
// Defaults to false.
|
36
36
|
//
|
37
37
|
@mixin shelves(
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
) {
|
38
|
+
$prefixes: $shelves-prefixes,
|
39
|
+
$suffixes: $shelves-suffixes,
|
40
|
+
$pushes: $shelves-pushes,
|
41
|
+
$pulls: $shelves-pulls,
|
42
|
+
$nested: $shelves-nested,
|
43
|
+
$nested-prefixes: $shelves-nested-prefixes,
|
44
|
+
$nested-suffixes: $shelves-nested-suffixes,
|
45
|
+
$nested-pushes: $shelves-nested-pushes,
|
46
|
+
$nested-pulls: $shelves-nested-pulls,
|
47
|
+
$tablet: $shelves-tablet,
|
48
|
+
$tablet-prefixes: $shelves-tablet-prefixes,
|
49
|
+
$tablet-suffixes: $shelves-tablet-suffixes,
|
50
|
+
$tablet-pushes: $shelves-tablet-pushes,
|
51
|
+
$tablet-pulls: $shelves-tablet-pulls,
|
52
|
+
$mobile: $shelves-mobile,
|
53
|
+
$mobile-prefixes: $shelves-mobile-prefixes,
|
54
|
+
$mobile-suffixes: $shelves-mobile-suffixes,
|
55
|
+
$mobile-pushes: $shelves-mobile-pushes,
|
56
|
+
$mobile-pulls: $shelves-mobile-pulls) {
|
58
57
|
@include shelves-base($reset-if-tablet: false, $reset-if-mobile: false);
|
59
58
|
@include shelves-columns(
|
60
59
|
$prefixes: $prefixes,
|
@@ -88,7 +87,7 @@
|
|
88
87
|
@if $tablet {
|
89
88
|
@media screen and (max-width: $shelves-tablet-breakpoint) {
|
90
89
|
@if $shelves-tablet-margin != $shelves-margin {
|
91
|
-
.#{$shelves-
|
90
|
+
.#{$shelves-row-name} {
|
92
91
|
@include container($shelves-tablet-margin);
|
93
92
|
}
|
94
93
|
}
|
@@ -119,7 +118,7 @@
|
|
119
118
|
@if $mobile {
|
120
119
|
@media screen and (max-width: $shelves-mobile-breakpoint) {
|
121
120
|
@if $shelves-mobile-margin != if($tablet, $shelves-margin, $shelves-tablet-margin) {
|
122
|
-
.#{$shelves-
|
121
|
+
.#{$shelves-row-name} {
|
123
122
|
@include container($shelves-mobile-margin);
|
124
123
|
}
|
125
124
|
}
|
@@ -157,12 +156,14 @@
|
|
157
156
|
// mobile sizes. Defaults to false.
|
158
157
|
//
|
159
158
|
@mixin shelves-base($reset-if-tablet: true, $reset-if-mobile: false) {
|
160
|
-
.#{$shelves-container-name} {
|
161
|
-
@include container;
|
162
|
-
}
|
163
|
-
|
164
159
|
.#{$shelves-row-name} {
|
160
|
+
@include container;
|
165
161
|
@include row($reset-if-tablet: $reset-if-tablet, $reset-if-mobile: $reset-if-mobile);
|
162
|
+
|
163
|
+
.#{$shelves-row-name} {
|
164
|
+
@include reset-container;
|
165
|
+
@include reset-row;
|
166
|
+
}
|
166
167
|
}
|
167
168
|
|
168
169
|
#{columns-selector($shelves-column-name)} {
|
@@ -200,17 +201,16 @@
|
|
200
201
|
// $pulls - Include pull classes. Deafults to true.
|
201
202
|
//
|
202
203
|
@mixin shelves-columns(
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
) {
|
204
|
+
$column-name: $shelves-column-name,
|
205
|
+
$start: 1,
|
206
|
+
$end: null,
|
207
|
+
$context: null,
|
208
|
+
$total: $shelves-columns,
|
209
|
+
$gutter: $shelves-gutter,
|
210
|
+
$prefixes: true,
|
211
|
+
$suffixes: true,
|
212
|
+
$pushes: true,
|
213
|
+
$pulls: true) {
|
214
214
|
$context: $total !default;
|
215
215
|
$end: $context !default;
|
216
216
|
|
@@ -10,11 +10,10 @@
|
|
10
10
|
// Defaults to the value of $shelves-gutter.
|
11
11
|
//
|
12
12
|
@mixin column-prefix(
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
) {
|
13
|
+
$n,
|
14
|
+
$context: null,
|
15
|
+
$total: $shelves-columns,
|
16
|
+
$gutter: $shelves-gutter) {
|
18
17
|
padding-left: columns-distance($n, $context, $total, $gutter);
|
19
18
|
}
|
20
19
|
|
@@ -30,11 +29,10 @@
|
|
30
29
|
// Defaults to the value of $shelves-gutter.
|
31
30
|
//
|
32
31
|
@mixin column-suffix(
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
) {
|
32
|
+
$n,
|
33
|
+
$context: null,
|
34
|
+
$total: $shelves-columns,
|
35
|
+
$gutter: $shelves-gutter) {
|
38
36
|
padding-right: columns-distance($n, $context, $total, $gutter);
|
39
37
|
}
|
40
38
|
|
@@ -50,11 +48,10 @@
|
|
50
48
|
// Defaults to the value of $shelves-gutter.
|
51
49
|
//
|
52
50
|
@mixin column-push(
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
) {
|
51
|
+
$n,
|
52
|
+
$context: null,
|
53
|
+
$total: $shelves-columns,
|
54
|
+
$gutter: $shelves-gutter) {
|
58
55
|
left: columns-distance($n, $context, $total, $gutter);
|
59
56
|
}
|
60
57
|
|
@@ -70,10 +67,9 @@
|
|
70
67
|
// Defaults to the value of $shelves-gutter.
|
71
68
|
//
|
72
69
|
@mixin column-pull(
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
) {
|
70
|
+
$n,
|
71
|
+
$context: null,
|
72
|
+
$total: $shelves-columns,
|
73
|
+
$gutter: $shelves-gutter) {
|
78
74
|
right: columns-distance($n, $context, $total, $gutter);
|
79
75
|
}
|
@@ -1,10 +1,16 @@
|
|
1
|
+
// Reset container by removing the outer padding.
|
2
|
+
@mixin reset-container {
|
3
|
+
padding-left: 0;
|
4
|
+
padding-right: 0;
|
5
|
+
}
|
6
|
+
|
1
7
|
// Reset a row to expand to the full width of
|
2
8
|
// its container and remove margins.
|
3
9
|
@mixin reset-row {
|
4
|
-
margin-left: 0;
|
5
10
|
margin-right: 0;
|
6
|
-
|
11
|
+
margin-left: 0;
|
7
12
|
min-width: 0;
|
13
|
+
max-width: none;
|
8
14
|
}
|
9
15
|
|
10
16
|
// Resets a column to expand to the full width of
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: shelves
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.6.0
|
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: 2013-02-12 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,10 +21,15 @@ dependencies:
|
|
21
21
|
version: '3.2'
|
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.2'
|
25
30
|
- !ruby/object:Gem::Dependency
|
26
31
|
name: choice
|
27
|
-
requirement:
|
32
|
+
requirement: !ruby/object:Gem::Requirement
|
28
33
|
none: false
|
29
34
|
requirements:
|
30
35
|
- - ~>
|
@@ -32,10 +37,15 @@ dependencies:
|
|
32
37
|
version: '0.1'
|
33
38
|
type: :runtime
|
34
39
|
prerelease: false
|
35
|
-
version_requirements:
|
40
|
+
version_requirements: !ruby/object:Gem::Requirement
|
41
|
+
none: false
|
42
|
+
requirements:
|
43
|
+
- - ~>
|
44
|
+
- !ruby/object:Gem::Version
|
45
|
+
version: '0.1'
|
36
46
|
- !ruby/object:Gem::Dependency
|
37
47
|
name: rake
|
38
|
-
requirement:
|
48
|
+
requirement: !ruby/object:Gem::Requirement
|
39
49
|
none: false
|
40
50
|
requirements:
|
41
51
|
- - ~>
|
@@ -43,7 +53,12 @@ dependencies:
|
|
43
53
|
version: '10.0'
|
44
54
|
type: :development
|
45
55
|
prerelease: false
|
46
|
-
version_requirements:
|
56
|
+
version_requirements: !ruby/object:Gem::Requirement
|
57
|
+
none: false
|
58
|
+
requirements:
|
59
|
+
- - ~>
|
60
|
+
- !ruby/object:Gem::Version
|
61
|
+
version: '10.0'
|
47
62
|
description: The only responsive, fluid CSS grid with infinitely nestable columns.
|
48
63
|
email:
|
49
64
|
- me@petebrowne.com
|
@@ -58,6 +73,7 @@ files:
|
|
58
73
|
- README.md
|
59
74
|
- Rakefile
|
60
75
|
- bin/shelves
|
76
|
+
- component.json
|
61
77
|
- lib/shelves.rb
|
62
78
|
- lib/shelves/cli.rb
|
63
79
|
- lib/shelves/extensions/compass.rb
|
@@ -86,21 +102,15 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
86
102
|
- - ! '>='
|
87
103
|
- !ruby/object:Gem::Version
|
88
104
|
version: '0'
|
89
|
-
segments:
|
90
|
-
- 0
|
91
|
-
hash: 602854420926794406
|
92
105
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
93
106
|
none: false
|
94
107
|
requirements:
|
95
108
|
- - ! '>='
|
96
109
|
- !ruby/object:Gem::Version
|
97
110
|
version: '0'
|
98
|
-
segments:
|
99
|
-
- 0
|
100
|
-
hash: 602854420926794406
|
101
111
|
requirements: []
|
102
112
|
rubyforge_project:
|
103
|
-
rubygems_version: 1.8.
|
113
|
+
rubygems_version: 1.8.23
|
104
114
|
signing_key:
|
105
115
|
specification_version: 3
|
106
116
|
summary: The only responsive, fluid CSS grid with infinitely nestable columns.
|