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 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
- TODO: Add longer description & Feature list.
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 SCSS Users (Compass & Rails)
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
 
@@ -0,0 +1,13 @@
1
+ {
2
+ "name": "shelves",
3
+ "version": "0.6.0",
4
+ "main": ["css/shelves.css", "scss/shelves.scss"],
5
+ "ignore": [
6
+ "*.gemspec",
7
+ "bin",
8
+ "lib",
9
+ "Gemfile",
10
+ "Gemfile.lock",
11
+ "Rakefile"
12
+ ]
13
+ }
@@ -1,3 +1,3 @@
1
1
  module Shelves
2
- VERSION = '0.5.0'
2
+ VERSION = '0.6.0'
3
3
  end
@@ -10,10 +10,9 @@
10
10
  // Defaults to the value of $shelves-gutter.
11
11
  //
12
12
  @function column-width(
13
- $context: null,
14
- $total: $shelves-columns,
15
- $gutter: $shelves-gutter
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
- $context: null,
45
- $total: $shelves-columns,
46
- $gutter: $shelves-gutter
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
- $n,
76
- $context: null,
77
- $total: $shelves-columns,
78
- $gutter: $shelves-gutter
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
- $n,
110
- $context: null,
111
- $total: $shelves-columns,
112
- $gutter: $shelves-gutter
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
 
@@ -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
- $max-width: $shelves-max-width,
26
- $min-width: $shelves-min-width,
27
- $reset-if-tablet: true,
28
- $reset-if-mobile: false
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
- $n,
74
- $context: null,
75
- $total: $shelves-columns,
76
- $gutter: $shelves-gutter,
77
- $reset-if-tablet: true,
78
- $reset-if-mobile: false
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
- $n,
129
- $context: null,
130
- $total: $shelves-columns,
131
- $gutter: $shelves-gutter
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
- $context: null,
149
- $total: $shelves-columns,
150
- $gutter: $shelves-gutter,
151
- $reset-first: true
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
- $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
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-container-name} {
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-container-name} {
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
- $column-name: $shelves-column-name,
204
- $start: 1,
205
- $end: null,
206
- $context: null,
207
- $total: $shelves-columns,
208
- $gutter: $shelves-gutter,
209
- $prefixes: true,
210
- $suffixes: true,
211
- $pushes: true,
212
- $pulls: true
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
- $n,
14
- $context: null,
15
- $total: $shelves-columns,
16
- $gutter: $shelves-gutter
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
- $n,
34
- $context: null,
35
- $total: $shelves-columns,
36
- $gutter: $shelves-gutter
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
- $n,
54
- $context: null,
55
- $total: $shelves-columns,
56
- $gutter: $shelves-gutter
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
- $n,
74
- $context: null,
75
- $total: $shelves-columns,
76
- $gutter: $shelves-gutter
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
- width: 100%;
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.5.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: 2012-12-31 00:00:00.000000000 Z
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: &70316886411000 !ruby/object:Gem::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: *70316886411000
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: &70316886410360 !ruby/object:Gem::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: *70316886410360
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: &70316886409620 !ruby/object:Gem::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: *70316886409620
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.11
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.