shelves 0.2.1 → 0.5.0

Sign up to get free protection for your applications and to get access to all the features.
data/Rakefile CHANGED
@@ -1,22 +1,9 @@
1
1
  #!/usr/bin/env rake
2
2
  require 'bundler/gem_tasks'
3
3
 
4
+ task :default => :generate
5
+
4
6
  desc 'Generate shelves.css'
5
7
  task :generate do
6
- require 'sprockets'
7
- require 'sprockets-sass'
8
- require 'sass'
9
- require 'compass'
10
-
11
- Compass.configuration do |compass|
12
- compass.output_style = :compact
13
- compass.line_comments = false
14
- end
15
-
16
- env = Sprockets::Environment.new
17
- env.append_path 'scss'
18
-
19
- File.open 'css/shelves.css', 'w' do |f|
20
- f.write env['shelves-grid.css'].to_s
21
- end
8
+ system './bin/shelves > ./css/shelves.css'
22
9
  end
data/bin/shelves ADDED
@@ -0,0 +1,7 @@
1
+ #!/usr/bin/env ruby
2
+
3
+ ENV['BUNDLE_GEMFILE'] ||= File.join(Dir.pwd, 'Gemfile')
4
+ require 'bundler/setup' if File.exist? ENV['BUNDLE_GEMFILE']
5
+
6
+ require 'shelves'
7
+ Shelves::CLI.run
data/lib/shelves.rb CHANGED
@@ -1,11 +1,13 @@
1
1
  require 'shelves/version'
2
2
 
3
3
  module Shelves
4
+ autoload :CLI, 'shelves/cli'
5
+
4
6
  # Returns the path to the root of the project.
5
7
  def self.root
6
8
  @root_path ||= File.expand_path '../..', __FILE__
7
9
  end
8
-
10
+
9
11
  # Returns the path to the main stylesheets directory.
10
12
  def self.stylesheets_path
11
13
  @stylesheets_path ||= File.join root, 'scss'
@@ -16,6 +18,6 @@ if defined?(::Rails)
16
18
  require 'shelves/extensions/rails'
17
19
  elsif defined?(::Sprockets) && Sprockets.respond_to?(:append_path)
18
20
  require 'shelves/extensions/sprockets'
19
- else
21
+ elsif defined?(::Compass)
20
22
  require 'shelves/extensions/compass'
21
23
  end
@@ -0,0 +1,265 @@
1
+ require 'choice'
2
+ require 'erb'
3
+ require 'sass'
4
+
5
+ Choice.options do
6
+ banner <<-BANNER
7
+ Shelves - The only responsive, fluid CSS grid with infinitely nestable columns.
8
+
9
+ Example Usage:
10
+ shelves --width 1140px --columns 16 > grid.css
11
+ BANNER
12
+
13
+ separator 'Base Options:'
14
+
15
+ option 'width' do
16
+ short '-w'
17
+ long '--width WIDTH'
18
+ desc 'The max width.'
19
+ desc '(default: 1040px)'
20
+ end
21
+
22
+ option 'columns' do
23
+ short '-c'
24
+ long '--columns COLUMNS'
25
+ desc 'The number of columns.'
26
+ desc '(default: 12)'
27
+ cast Integer
28
+ end
29
+
30
+ option 'margin' do
31
+ short '-m'
32
+ long '--margin MARGIN'
33
+ desc 'The outer margin.'
34
+ desc '(default: 20px)'
35
+ end
36
+
37
+ option 'gutter' do
38
+ short '-g'
39
+ long '--gutter GUTTER'
40
+ desc 'The column gutter.'
41
+ desc 'Will be converted to a percentage value.'
42
+ desc '(default: 20px)'
43
+ end
44
+
45
+ option 'skip-nested' do
46
+ short '-N'
47
+ long '--skip-nested'
48
+ desc 'Do not include nested columns.'
49
+ end
50
+
51
+ option 'skip-tablet' do
52
+ short '-T'
53
+ long '--skip-tablet'
54
+ desc 'Do not include tablet columns.'
55
+ end
56
+
57
+ option 'skip-mobile' do
58
+ short '-M'
59
+ long '--skip-mobile'
60
+ desc 'Do not include mobile columns.'
61
+ end
62
+
63
+ option 'version' do
64
+ short '-v'
65
+ long '--version'
66
+ desc 'Show version.'
67
+ action do
68
+ puts Shelves::VERSION
69
+ exit
70
+ end
71
+ end
72
+
73
+ option 'help' do
74
+ short '-h'
75
+ long '--help'
76
+ desc 'Show this message.'
77
+ end
78
+
79
+ separator ''
80
+ separator 'Tablet Options:'
81
+
82
+ option 'tablet-breakpoint' do
83
+ long '--tablet-breakpoint BREAKPOINT'
84
+ desc 'The breakpoint for tablets.'
85
+ desc '(default: 800px)'
86
+ end
87
+
88
+ option 'tablet-columns' do
89
+ long '--tablet-columns COLUMNS'
90
+ desc 'The number of columns for tablets.'
91
+ desc '(default: 6)'
92
+ cast Integer
93
+ end
94
+
95
+ option 'tablet-margin' do
96
+ long '--tablet-margin MARGIN'
97
+ desc 'The outer margin for tablets.'
98
+ desc '(default: 75% of margin)'
99
+ end
100
+
101
+ option 'tablet-gutter' do
102
+ long '--tablet-gutter GUTTER'
103
+ desc 'The column gutter for tablets.'
104
+ desc '(default: 150% of gutter)'
105
+ end
106
+
107
+ separator ''
108
+ separator 'Mobile Options:'
109
+
110
+ option 'mobile-breakpoint' do
111
+ long '--mobile-breakpoint BREAKPOINT'
112
+ desc 'The breakpoint for mobile.'
113
+ desc '(default: 480px)'
114
+ end
115
+
116
+ option 'mobile-columns' do
117
+ long '--mobile-columns COLUMNS'
118
+ desc 'The number of columns for mobile.'
119
+ desc '(default: 4)'
120
+ cast Integer
121
+ end
122
+
123
+ option 'mobile-margin' do
124
+ long '--mobile-margin MARGIN'
125
+ desc 'The outer margin for mobile.'
126
+ desc '(default: 50% of margin)'
127
+ end
128
+
129
+ option 'mobile-gutter' do
130
+ long '--mobile-gutter GUTTER'
131
+ desc 'The column gutter for mobile.'
132
+ desc '(default: 238% of gutter)'
133
+ end
134
+
135
+ separator ''
136
+ separator 'Advanced Options:'
137
+
138
+ option 'skip-ie7-support' do
139
+ long '--skip-ie7-support'
140
+ desc 'Skip legacy support for IE7.'
141
+ end
142
+
143
+ option 'skip-prefixes' do
144
+ long '--skip-prefixes'
145
+ desc 'Do not include prefix classes.'
146
+ end
147
+
148
+ option 'skip-suffixes' do
149
+ long '--skip-suffix'
150
+ desc 'Do not include suffix classes.'
151
+ end
152
+
153
+ option 'skip-pushes' do
154
+ long '--skip-push'
155
+ desc 'Do not include push classes.'
156
+ end
157
+
158
+ option 'skip-pulls' do
159
+ long '--skip-pull'
160
+ desc 'Do not include pull classes.'
161
+ end
162
+
163
+ option 'nested-prefixes' do
164
+ long '--nested-prefixes'
165
+ desc 'Include prefix classes for nested columns.'
166
+ end
167
+
168
+ option 'nested-suffixes' do
169
+ long '--nested-suffixes'
170
+ desc 'Include suffix classes for nested columns.'
171
+ end
172
+
173
+ option 'nested-pushes' do
174
+ long '--nested-pushes'
175
+ desc 'Include push classes for nested columns.'
176
+ end
177
+
178
+ option 'nested-pulls' do
179
+ long '--nested-pulls'
180
+ desc 'Include pull classes for nested columns.'
181
+ end
182
+
183
+ option 'tablet-prefixes' do
184
+ long '--tablet-prefixes'
185
+ desc 'Include prefix classes for tablet columns.'
186
+ end
187
+
188
+ option 'tablet-suffixes' do
189
+ long '--tablet-suffixes'
190
+ desc 'Include suffix classes for tablet columns.'
191
+ end
192
+
193
+ option 'tablet-pushes' do
194
+ long '--tablet-pushes'
195
+ desc 'Include push classes for tablet columns.'
196
+ end
197
+
198
+ option 'tablet-pulls' do
199
+ long '--tablet-pulls'
200
+ desc 'Include pull classes for tablet columns.'
201
+ end
202
+
203
+ option 'mobile-prefixes' do
204
+ long '--mobile-prefixes'
205
+ desc 'Include prefix classes for mobile columns.'
206
+ end
207
+
208
+ option 'mobile-suffixes' do
209
+ long '--mobile-suffixes'
210
+ desc 'Include suffix classes for mobile columns.'
211
+ end
212
+
213
+ option 'mobile-pushes' do
214
+ long '--mobile-pushes'
215
+ desc 'Include push classes for mobile columns.'
216
+ end
217
+
218
+ option 'mobile-pulls' do
219
+ long '--mobile-pulls'
220
+ desc 'Include pull classes for mobile columns.'
221
+ end
222
+ end
223
+
224
+ module Shelves
225
+ module CLI extend self
226
+ def run
227
+ settings = normalize_settings(Choice.choices)
228
+ sass_template = render_sass_template(settings)
229
+ sass_engine = Sass::Engine.new(sass_template,
230
+ :syntax => :scss,
231
+ :load_paths => [Shelves.stylesheets_path],
232
+ :style => :compact,
233
+ :line_comments => false
234
+ )
235
+
236
+ puts sass_engine.render
237
+ end
238
+
239
+ private
240
+
241
+ def render_sass_template(settings)
242
+ template = ERB.new <<-TEMPLATE
243
+ <% settings.each do |setting, value| %>
244
+ $shelves-<%= setting %>: <%= value %>;
245
+ <% end %>
246
+ @import "shelves";
247
+ @include shelves;
248
+ TEMPLATE
249
+ template.result(binding)
250
+ end
251
+
252
+ def normalize_settings(settings)
253
+ normalized_settings = {}
254
+ settings.each do |setting, value|
255
+ if setting =~ /^skip-(\w*)$/
256
+ setting = $1
257
+ value = false
258
+ end
259
+ normalized_settings[setting] = value
260
+ end
261
+
262
+ normalized_settings
263
+ end
264
+ end
265
+ end
@@ -1,3 +1,3 @@
1
1
  module Shelves
2
- VERSION = '0.2.1'
2
+ VERSION = '0.5.0'
3
3
  end
@@ -1,3 +1,2 @@
1
1
  @import "shelves";
2
-
3
2
  @include shelves;
data/scss/shelves.scss CHANGED
@@ -7,7 +7,6 @@ The only responsive, fluid CSS grid with infinitely nestable columns.
7
7
  Copyright (c) 2012, Pete Browne
8
8
  */
9
9
 
10
- @import "compass/utilities/general/clearfix";
11
10
  @import "shelves/settings";
12
11
  @import "shelves/functions";
13
12
  @import "shelves/mixins";
@@ -5,19 +5,17 @@
5
5
  // $context - The number of columns encapsulating the column.
6
6
  // Defaults to the the value of $total.
7
7
  // $total - The total number of columns in the grid.
8
- // Defaults to the value of $shelves-columns.
8
+ // Defaults to the value of $shelves-columns.
9
9
  // $gutter - The width of the gutter in the root context (in %).
10
10
  // Defaults to the value of $shelves-gutter.
11
11
  //
12
12
  @function column-width(
13
- $context: false,
14
- $total: $shelves-columns,
15
- $gutter: $shelves-gutter
13
+ $context: null,
14
+ $total: $shelves-columns,
15
+ $gutter: $shelves-gutter
16
16
  ) {
17
- @if $context == false {
18
- $context: $total;
19
- }
20
-
17
+ $context: $total !default;
18
+
21
19
  @if $context <= 1 {
22
20
  @return 100%;
23
21
  }
@@ -38,19 +36,17 @@
38
36
  // $context - The number of columns encapsulating the gutter.
39
37
  // Defaults to the the value of $total.
40
38
  // $total - The total number of columns in the grid.
41
- // Defaults to the value of $shelves-columns.
39
+ // Defaults to the value of $shelves-columns.
42
40
  // $gutter - The width of the gutter in the root context (in %).
43
41
  // Defaults to the value of $shelves-gutter.
44
42
  //
45
43
  @function column-gutter(
46
- $context: false,
47
- $total: $shelves-columns,
48
- $gutter: $shelves-gutter
44
+ $context: null,
45
+ $total: $shelves-columns,
46
+ $gutter: $shelves-gutter
49
47
  ) {
50
- @if $context == false {
51
- $context: $total;
52
- }
53
-
48
+ $context: $total !default;
49
+
54
50
  @if $context <= 1 {
55
51
  @return 0%;
56
52
  }
@@ -71,20 +67,18 @@
71
67
  // $context - The number of columns encapsulating the columns.
72
68
  // Defaults to the the value of $total.
73
69
  // $total - The total number of columns in the grid.
74
- // Defaults to the value of $shelves-columns.
70
+ // Defaults to the value of $shelves-columns.
75
71
  // $gutter - The width of the gutter in the root context (in %).
76
72
  // Defaults to the value of $shelves-gutter.
77
73
  //
78
74
  @function columns-width(
79
75
  $n,
80
- $context: false,
81
- $total: $shelves-columns,
82
- $gutter: $shelves-gutter
76
+ $context: null,
77
+ $total: $shelves-columns,
78
+ $gutter: $shelves-gutter
83
79
  ) {
84
- @if $context == false or $context > $total {
85
- $context: $total;
86
- }
87
-
80
+ $context: $total !default;
81
+
88
82
  @if $n <= 1 {
89
83
  @return column-width($context, $total, $gutter);
90
84
  }
@@ -94,7 +88,7 @@
94
88
  @else {
95
89
  $column-width: column-width($context, $total, $gutter);
96
90
  $column-gutter: column-gutter($context, $total, $gutter);
97
-
91
+
98
92
  @return $column-width * $n + $column-gutter * ($n - 1);
99
93
  }
100
94
  }
@@ -107,15 +101,15 @@
107
101
  // $context - The number of columns encapsulating the columns.
108
102
  // Defaults to the the value of $total.
109
103
  // $total - The total number of columns in the grid.
110
- // Defaults to the value of $shelves-columns.
104
+ // Defaults to the value of $shelves-columns.
111
105
  // $gutter - The width of the gutter in the root context (in %).
112
106
  // Defaults to the value of $shelves-gutter.
113
107
  //
114
108
  @function columns-distance(
115
109
  $n,
116
- $context: false,
117
- $total: $shelves-columns,
118
- $gutter: $shelves-gutter
110
+ $context: null,
111
+ $total: $shelves-columns,
112
+ $gutter: $shelves-gutter
119
113
  ) {
120
114
  @return columns-width($n, $context, $total, $gutter) + column-gutter($context, $total, $gutter);
121
115
  }
@@ -1,10 +1,12 @@
1
1
  // Default Grid Settings
2
- $shelves-width: 1040px !default;
3
- $shelves-max-width: $shelves-width !default;
4
- $shelves-min-width: 767px !default;
5
- $shelves-columns: 12 !default;
6
- $shelves-margin: 32px !default;
7
- $shelves-gutter: 24px !default;
2
+ $shelves-width: 1060px !default;
3
+ $shelves-max-width: $shelves-width !default;
4
+ $shelves-min-width: 767px !default;
5
+ $shelves-columns: 12 !default;
6
+ $shelves-margin: 20px !default;
7
+ $shelves-gutter: 20px !default;
8
+ $shelves-tablet-breakpoint: 800px !default;
9
+ $shelves-mobile-breakpoint: 480px !default;
8
10
 
9
11
  // Convert the gutter to a percentage if necessary.
10
12
  @if unit($shelves-gutter) != "%" {
@@ -13,23 +15,48 @@ $shelves-gutter: 24px !default;
13
15
 
14
16
  // Default Tablet Settings
15
17
  $shelves-tablet-columns: 6 !default;
16
- $shelves-tablet-margin: $shelves-margin * 0.75 !default;
17
- $shelves-tablet-gutter: $shelves-gutter * 1.5 !default;
18
+ $shelves-tablet-margin: $shelves-margin * 0.75 !default;
19
+ $shelves-tablet-gutter: $shelves-gutter * 1.5 !default;
18
20
 
19
21
  // Default Mobile Settings
20
22
  $shelves-mobile-columns: 4 !default;
21
- $shelves-mobile-margin: $shelves-margin * 0.5 !default;
22
- $shelves-mobile-gutter: $shelves-gutter * 2.375 !default;
23
+ $shelves-mobile-margin: $shelves-margin * 0.5 !default;
24
+ $shelves-mobile-gutter: $shelves-gutter * 2.375 !default;
23
25
 
24
26
  // Default Class Names
25
27
  // (Note the lack of the preceding ".")
26
- $shelves-container-name: "container" !default;
27
- $shelves-row-name: "row" !default;
28
- $shelves-column-name: "column" !default;
29
- $shelves-prefix-name: "prefix" !default;
30
- $shelves-suffix-name: "suffix" !default;
31
- $shelves-push-name: "push" !default;
32
- $shelves-pull-name: "pull" !default;
33
- $shelves-separator: "-" !default;
28
+ $shelves-container-name: "container" !default;
29
+ $shelves-row-name: "row" !default;
30
+ $shelves-column-name: "column" !default;
31
+ $shelves-prefix-name: "prefix" !default;
32
+ $shelves-suffix-name: "suffix" !default;
33
+ $shelves-push-name: "push" !default;
34
+ $shelves-pull-name: "pull" !default;
35
+ $shelves-separator: "-" !default;
34
36
  $shelves-tablet-column-name: "tablet-column" !default;
35
37
  $shelves-mobile-column-name: "mobile-column" !default;
38
+
39
+ // Default options for the grid generator
40
+ $shelves-prefixes: true !default;
41
+ $shelves-suffixes: true !default;
42
+ $shelves-pushes: true !default;
43
+ $shelves-pulls: true !default;
44
+ $shelves-nested: true !default;
45
+ $shelves-nested-prefixes: false !default;
46
+ $shelves-nested-suffixes: false !default;
47
+ $shelves-nested-pushes: false !default;
48
+ $shelves-nested-pulls: false !default;
49
+ $shelves-tablet: true !default;
50
+ $shelves-tablet-prefixes: false !default;
51
+ $shelves-tablet-suffixes: false !default;
52
+ $shelves-tablet-pushes: false !default;
53
+ $shelves-tablet-pulls: false !default;
54
+ $shelves-mobile: true !default;
55
+ $shelves-mobile-prefixes: false !default;
56
+ $shelves-mobile-suffixes: false !default;
57
+ $shelves-mobile-pushes: false !default;
58
+ $shelves-mobile-pulls: false !default;
59
+
60
+ // Support IE7
61
+ $legacy-support-for-ie7: true !default;
62
+ $shelves-ie7-support: $legacy-support-for-ie7 !default;
@@ -22,14 +22,14 @@
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,
25
+ $max-width: $shelves-max-width,
26
+ $min-width: $shelves-min-width,
27
27
  $reset-if-tablet: true,
28
28
  $reset-if-mobile: false
29
29
  ) {
30
- @include pie-clearfix;
30
+ @include shelves-clearfix;
31
31
  width: 100%;
32
-
32
+
33
33
  @if type-of($max-width) == 'number' {
34
34
  max-width: $max-width;
35
35
  margin-left: auto;
@@ -37,18 +37,18 @@
37
37
  }
38
38
  @if type-of($min-width) == 'number' {
39
39
  min-width: $min-width;
40
-
40
+
41
41
  .#{$shelves-row-name} {
42
42
  min-width: 0;
43
43
  }
44
44
  }
45
45
  @if $reset-if-tablet {
46
- @media screen and (max-width: 800px) {
46
+ @media screen and (max-width: $shelves-tablet-breakpoint) {
47
47
  @include reset-row;
48
48
  }
49
49
  }
50
50
  @if $reset-if-mobile {
51
- @media screen and (max-width: 480px) {
51
+ @media screen and (max-width: $shelves-mobile-breakpoint) {
52
52
  @include reset-row;
53
53
  }
54
54
  }
@@ -61,7 +61,7 @@
61
61
  // $context - The number of columns encapsulating the element.
62
62
  // Defaults to the the value of $total.
63
63
  // $total - The total number of columns in the grid.
64
- // Defaults to the value of $shelves-columns.
64
+ // Defaults to the value of $shelves-columns.
65
65
  // $gutter - The width of the gutter in the root context (in %).
66
66
  // Defaults to the value of $shelves-gutter.
67
67
  // $reset-if-tablet - Include styles for resetting the column at
@@ -71,9 +71,9 @@
71
71
  //
72
72
  @mixin column(
73
73
  $n,
74
- $context: false,
75
- $total: $shelves-columns,
76
- $gutter: $shelves-gutter,
74
+ $context: null,
75
+ $total: $shelves-columns,
76
+ $gutter: $shelves-gutter,
77
77
  $reset-if-tablet: true,
78
78
  $reset-if-mobile: false
79
79
  ) {
@@ -96,19 +96,19 @@
96
96
  float: left;
97
97
  min-height: 1px;
98
98
  position: relative;
99
-
100
- @if $legacy-support-for-ie7 {
99
+
100
+ @if $shelves-ie7-support {
101
101
  // IE6-7 incorrectly rounds up percentage widths (breaking layouts)
102
102
  // http://ejohn.org/blog/sub-pixel-problems-in-css/
103
103
  *margin-right: -1px;
104
104
  }
105
105
  @if $reset-if-tablet {
106
- @media screen and (max-width: 800px) {
106
+ @media screen and (max-width: $shelves-tablet-breakpoint) {
107
107
  @include reset-column;
108
108
  }
109
109
  }
110
110
  @if $reset-if-mobile {
111
- @media screen and (max-width: 480px) {
111
+ @media screen and (max-width: $shelves-mobile-breakpoint) {
112
112
  @include reset-column;
113
113
  }
114
114
  }
@@ -120,15 +120,15 @@
120
120
  // $context - The number of columns encapsulating the element.
121
121
  // Defaults to the the value of $total.
122
122
  // $total - The total number of columns in the grid.
123
- // Defaults to the value of $shelves-columns.
123
+ // Defaults to the value of $shelves-columns.
124
124
  // $gutter - The width of the gutter in the root context (in %).
125
125
  // Defaults to the value of $shelves-gutter.
126
126
  //
127
127
  @mixin columns-width(
128
128
  $n,
129
- $context: false,
130
- $total: $shelves-columns,
131
- $gutter: $shelves-gutter
129
+ $context: null,
130
+ $total: $shelves-columns,
131
+ $gutter: $shelves-gutter
132
132
  ) {
133
133
  width: columns-width($n, $context, $total, $gutter);
134
134
  }
@@ -138,23 +138,41 @@
138
138
  // $context - The number of columns encapsulating the element.
139
139
  // Defaults to the the value of $total.
140
140
  // $total - The total number of columns in the grid.
141
- // Defaults to the value of $shelves-columns.
141
+ // Defaults to the value of $shelves-columns.
142
142
  // $gutter - The width of the gutter in the root context (in %).
143
143
  // Defaults to the value of $shelves-gutter.
144
144
  // $reset-first - Removes the gutter for the first column in a row.
145
145
  // Defaults to true.
146
146
  //
147
147
  @mixin column-gutter(
148
- $context: false,
149
- $total: $shelves-columns,
150
- $gutter: $shelves-gutter,
148
+ $context: null,
149
+ $total: $shelves-columns,
150
+ $gutter: $shelves-gutter,
151
151
  $reset-first: true
152
152
  ) {
153
153
  margin-left: column-gutter($context, $total, $gutter);
154
-
154
+
155
155
  @if $reset-first {
156
156
  &:first-child {
157
157
  @include reset-column-gutter;
158
158
  }
159
159
  }
160
160
  }
161
+
162
+ // Clearfix mixin based on micro-clearfix:
163
+ // http://nicolasgallagher.com/micro-clearfix-hack/
164
+ @mixin shelves-clearfix {
165
+ &:before,
166
+ &:after {
167
+ content: " ";
168
+ display: table;
169
+ }
170
+
171
+ &:after {
172
+ clear: both;
173
+ }
174
+
175
+ @if $shelves-ie7-support {
176
+ *zoom: 1;
177
+ }
178
+ }
@@ -9,7 +9,7 @@
9
9
  // Defaults to true.
10
10
  // $nested-prefixes - Include prefix classes for neseted columns.
11
11
  // Defaults to true.
12
- // $nested-suffixes - Include suffix classes for neseted columns.
12
+ // $nested-suffixes - Include suffix classes for neseted columns.
13
13
  // Defaults to true.
14
14
  // $nested-pushes - Include push classes for neseted columns.
15
15
  // Defaults to false.
@@ -18,7 +18,7 @@
18
18
  // $tablet - Include tablet columns & resets. Defaults to true.
19
19
  // $tablet-prefixes - Include prefix classes for tablet columns.
20
20
  // Defaults to false.
21
- // $tablet-suffixes - Include suffix classes for tablet columns.
21
+ // $tablet-suffixes - Include suffix classes for tablet columns.
22
22
  // Defaults to false.
23
23
  // $tablet-pushes - Include push classes for tablet columns.
24
24
  // Defaults to false.
@@ -27,7 +27,7 @@
27
27
  // $mobile - Include mobile columns & resets. Defaults to true.
28
28
  // $mobile-prefixes - Include prefix classes for mobile columns.
29
29
  // Defaults to false.
30
- // $mobile-suffixes - Include suffix classes for mobile columns.
30
+ // $mobile-suffixes - Include suffix classes for mobile columns.
31
31
  // Defaults to false.
32
32
  // $mobile-pushes - Include push classes for mobile columns.
33
33
  // Defaults to false.
@@ -35,67 +35,66 @@
35
35
  // Defaults to false.
36
36
  //
37
37
  @mixin shelves(
38
- $prefixes: true,
39
- $suffixes: true,
40
- $pushes: true,
41
- $pulls: true,
42
- $nested: true,
43
- $nested-prefixes: true,
44
- $nested-suffixes: true,
45
- $nested-pushes: false,
46
- $nested-pulls: false,
47
- $tablet: true,
48
- $tablet-prefixes: false,
49
- $tablet-suffixes: false,
50
- $tablet-pushes: false,
51
- $tablet-pulls: false,
52
- $mobile: true,
53
- $mobile-prefixes: false,
54
- $mobile-suffixes: false,
55
- $mobile-pushes: false,
56
- $mobile-pulls: false
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
57
  ) {
58
-
59
58
  @include shelves-base($reset-if-tablet: false, $reset-if-mobile: false);
60
59
  @include shelves-columns(
61
60
  $prefixes: $prefixes,
62
61
  $suffixes: $suffixes,
63
- $pushes: $pushes,
64
- $pulls: $pulls
62
+ $pushes: $pushes,
63
+ $pulls: $pulls
65
64
  );
66
-
65
+
67
66
  @if $nested {
68
67
  @for $i from 1 to $shelves-columns - 1 {
69
68
  // Loop background through the columns
70
69
  // to cascade the nested column properties.
71
70
  $i: $shelves-columns - $i;
72
-
71
+
73
72
  #{column-selector($shelves-column-name, $i)} {
74
73
  #{columns-selector($shelves-column-name)} {
75
74
  @include column-gutter($i, $reset-first: false);
76
75
  }
77
-
76
+
78
77
  @include shelves-columns(
79
- $context: $i,
78
+ $context: $i,
80
79
  $prefixes: $nested-prefixes,
81
80
  $suffixes: $nested-suffixes,
82
- $pushes: $nested-pushes,
83
- $pulls: $nested-pulls
81
+ $pushes: $nested-pushes,
82
+ $pulls: $nested-pulls
84
83
  );
85
- }
84
+ }
86
85
  }
87
86
  }
88
-
87
+
89
88
  @if $tablet {
90
- @media screen and (max-width: 800px) {
89
+ @media screen and (max-width: $shelves-tablet-breakpoint) {
91
90
  @if $shelves-tablet-margin != $shelves-margin {
92
91
  .#{$shelves-container-name} {
93
92
  @include container($shelves-tablet-margin);
94
93
  }
95
94
  }
96
-
95
+
97
96
  @include shelves-resets;
98
-
97
+
99
98
  // Use the extra specificity from the row class
100
99
  // to apply tablet column properties even when nested
101
100
  .#{$shelves-row-name} {
@@ -103,30 +102,30 @@
103
102
  @include column-base($reset-if-tablet: false, $reset-if-mobile: false);
104
103
  @include column-gutter($total: $shelves-tablet-columns, $gutter: $shelves-tablet-gutter);
105
104
  }
106
-
105
+
107
106
  @include shelves-columns(
108
107
  $column-name: $shelves-tablet-column-name,
109
- $total: $shelves-tablet-columns,
110
- $gutter: $shelves-tablet-gutter,
111
- $prefixes: $tablet-prefixes,
112
- $suffixes: $tablet-suffixes,
113
- $pushes: $tablet-pushes,
114
- $pulls: $tablet-pulls
108
+ $total: $shelves-tablet-columns,
109
+ $gutter: $shelves-tablet-gutter,
110
+ $prefixes: $tablet-prefixes,
111
+ $suffixes: $tablet-suffixes,
112
+ $pushes: $tablet-pushes,
113
+ $pulls: $tablet-pulls
115
114
  );
116
115
  }
117
116
  }
118
117
  }
119
-
118
+
120
119
  @if $mobile {
121
- @media screen and (max-width: 480px) {
120
+ @media screen and (max-width: $shelves-mobile-breakpoint) {
122
121
  @if $shelves-mobile-margin != if($tablet, $shelves-margin, $shelves-tablet-margin) {
123
122
  .#{$shelves-container-name} {
124
123
  @include container($shelves-mobile-margin);
125
124
  }
126
125
  }
127
-
126
+
128
127
  @include shelves-resets($reset-row: $tablet == false);
129
-
128
+
130
129
  // Use the extra specificity from the row class
131
130
  // to apply mobile column properties even when nested
132
131
  .#{$shelves-row-name} {
@@ -134,15 +133,15 @@
134
133
  @include column-base($reset-if-tablet: false, $reset-if-mobile: false);
135
134
  @include column-gutter($total: $shelves-mobile-columns, $gutter: $shelves-mobile-gutter);
136
135
  }
137
-
136
+
138
137
  @include shelves-columns(
139
138
  $column-name: $shelves-mobile-column-name,
140
- $total: $shelves-mobile-columns,
141
- $gutter: $shelves-mobile-gutter,
142
- $prefixes: $mobile-prefixes,
143
- $suffixes: $mobile-suffixes,
144
- $pushes: $mobile-pushes,
145
- $pulls: $mobile-pulls
139
+ $total: $shelves-mobile-columns,
140
+ $gutter: $shelves-mobile-gutter,
141
+ $prefixes: $mobile-prefixes,
142
+ $suffixes: $mobile-suffixes,
143
+ $pushes: $mobile-pushes,
144
+ $pulls: $mobile-pulls
146
145
  );
147
146
  }
148
147
  }
@@ -161,16 +160,16 @@
161
160
  .#{$shelves-container-name} {
162
161
  @include container;
163
162
  }
164
-
163
+
165
164
  .#{$shelves-row-name} {
166
165
  @include row($reset-if-tablet: $reset-if-tablet, $reset-if-mobile: $reset-if-mobile);
167
166
  }
168
-
167
+
169
168
  #{columns-selector($shelves-column-name)} {
170
169
  @include column-base($reset-if-tablet: $reset-if-tablet, $reset-if-mobile: $reset-if-mobile);
171
170
  @include column-gutter($reset-first: false);
172
171
  }
173
-
172
+
174
173
  .#{$shelves-row-name} {
175
174
  #{columns-selector($shelves-column-name)} {
176
175
  &:first-child {
@@ -192,7 +191,7 @@
192
191
  // $context - The context of generated classes.
193
192
  // Defaults to the value of $total.
194
193
  // $total - The total number of columns in the grid.
195
- // Defaults to the value of $shelves-columns.
194
+ // Defaults to the value of $shelves-columns.
196
195
  // $gutter - The width of the gutter in the root context (in %).
197
196
  // Defaults to the value of $shelves-gutter.
198
197
  // $prefixes - Include prefix classes. Deafults to true.
@@ -202,22 +201,19 @@
202
201
  //
203
202
  @mixin shelves-columns(
204
203
  $column-name: $shelves-column-name,
205
- $start: 1,
206
- $end: false,
207
- $context: false,
208
- $total: $shelves-columns,
209
- $gutter: $shelves-gutter,
210
- $prefixes: true,
211
- $suffixes: true,
212
- $pushes: true,
213
- $pulls: true
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
214
213
  ) {
215
- @if $context == false or $context > $total {
216
- $context: $total;
217
- }
218
- @if $end == false or $end > $context {
219
- $end: $context;
220
- }
214
+ $context: $total !default;
215
+ $end: $context !default;
216
+
221
217
  @for $i from $start to $end {
222
218
  #{column-selector($column-name, $i)} {
223
219
  @include columns-width($i, $context, $total, $gutter);
@@ -5,15 +5,15 @@
5
5
  // $context - The number of columns encapsulating the element.
6
6
  // Defaults to the the value of $total.
7
7
  // $total - The total number of columns in the grid.
8
- // Defaults to the value of $shelves-columns.
8
+ // Defaults to the value of $shelves-columns.
9
9
  // $gutter - The width of the gutter in the root context (in %).
10
10
  // Defaults to the value of $shelves-gutter.
11
11
  //
12
12
  @mixin column-prefix(
13
13
  $n,
14
- $context: false,
15
- $total: $shelves-columns,
16
- $gutter: $shelves-gutter
14
+ $context: null,
15
+ $total: $shelves-columns,
16
+ $gutter: $shelves-gutter
17
17
  ) {
18
18
  padding-left: columns-distance($n, $context, $total, $gutter);
19
19
  }
@@ -25,15 +25,15 @@
25
25
  // $context - The number of columns encapsulating the element.
26
26
  // Defaults to the the value of $total.
27
27
  // $total - The total number of columns in the grid.
28
- // Defaults to the value of $shelves-columns.
28
+ // Defaults to the value of $shelves-columns.
29
29
  // $gutter - The width of the gutter in the root context (in %).
30
30
  // Defaults to the value of $shelves-gutter.
31
31
  //
32
32
  @mixin column-suffix(
33
33
  $n,
34
- $context: false,
35
- $total: $shelves-columns,
36
- $gutter: $shelves-gutter
34
+ $context: null,
35
+ $total: $shelves-columns,
36
+ $gutter: $shelves-gutter
37
37
  ) {
38
38
  padding-right: columns-distance($n, $context, $total, $gutter);
39
39
  }
@@ -45,15 +45,15 @@
45
45
  // $context - The number of columns encapsulating the element.
46
46
  // Defaults to the the value of $total.
47
47
  // $total - The total number of columns in the grid.
48
- // Defaults to the value of $shelves-columns.
48
+ // Defaults to the value of $shelves-columns.
49
49
  // $gutter - The width of the gutter in the root context (in %).
50
50
  // Defaults to the value of $shelves-gutter.
51
51
  //
52
52
  @mixin column-push(
53
53
  $n,
54
- $context: false,
55
- $total: $shelves-columns,
56
- $gutter: $shelves-gutter
54
+ $context: null,
55
+ $total: $shelves-columns,
56
+ $gutter: $shelves-gutter
57
57
  ) {
58
58
  left: columns-distance($n, $context, $total, $gutter);
59
59
  }
@@ -65,15 +65,15 @@
65
65
  // $context - The number of columns encapsulating the element.
66
66
  // Defaults to the the value of $total.
67
67
  // $total - The total number of columns in the grid.
68
- // Defaults to the value of $shelves-columns.
68
+ // Defaults to the value of $shelves-columns.
69
69
  // $gutter - The width of the gutter in the root context (in %).
70
70
  // Defaults to the value of $shelves-gutter.
71
71
  //
72
72
  @mixin column-pull(
73
73
  $n,
74
- $context: false,
75
- $total: $shelves-columns,
76
- $gutter: $shelves-gutter
74
+ $context: null,
75
+ $total: $shelves-columns,
76
+ $gutter: $shelves-gutter
77
77
  ) {
78
78
  right: columns-distance($n, $context, $total, $gutter);
79
79
  }
@@ -17,8 +17,8 @@
17
17
  @include reset-column-pull;
18
18
  float: none;
19
19
  width: auto;
20
-
21
- @if $legacy-support-for-ie7 {
20
+
21
+ @if $shelves-ie7-support {
22
22
  *margin-right: 0px;
23
23
  }
24
24
  }
data/shelves.gemspec CHANGED
@@ -15,9 +15,8 @@ Gem::Specification.new do |gem|
15
15
  gem.name = 'shelves'
16
16
  gem.require_paths = ['lib']
17
17
  gem.version = Shelves::VERSION
18
-
19
- gem.add_runtime_dependency 'sass', '~> 3.1'
20
- gem.add_runtime_dependency 'compass', '~> 0.12'
21
- gem.add_development_dependency 'sprockets', '~> 2.3'
22
- gem.add_development_dependency 'sprockets-sass', '~> 0.7'
18
+
19
+ gem.add_runtime_dependency 'sass', '~> 3.2'
20
+ gem.add_runtime_dependency 'choice', '~> 0.1'
21
+ gem.add_development_dependency 'rake', '~> 10.0'
23
22
  end
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.2.1
4
+ version: 0.5.0
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,56 +9,46 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2012-04-21 00:00:00.000000000 Z
12
+ date: 2012-12-31 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: sass
16
- requirement: &70282995955920 !ruby/object:Gem::Requirement
16
+ requirement: &70316886411000 !ruby/object:Gem::Requirement
17
17
  none: false
18
18
  requirements:
19
19
  - - ~>
20
20
  - !ruby/object:Gem::Version
21
- version: '3.1'
21
+ version: '3.2'
22
22
  type: :runtime
23
23
  prerelease: false
24
- version_requirements: *70282995955920
24
+ version_requirements: *70316886411000
25
25
  - !ruby/object:Gem::Dependency
26
- name: compass
27
- requirement: &70282995952420 !ruby/object:Gem::Requirement
26
+ name: choice
27
+ requirement: &70316886410360 !ruby/object:Gem::Requirement
28
28
  none: false
29
29
  requirements:
30
30
  - - ~>
31
31
  - !ruby/object:Gem::Version
32
- version: '0.12'
32
+ version: '0.1'
33
33
  type: :runtime
34
34
  prerelease: false
35
- version_requirements: *70282995952420
35
+ version_requirements: *70316886410360
36
36
  - !ruby/object:Gem::Dependency
37
- name: sprockets
38
- requirement: &70282995949260 !ruby/object:Gem::Requirement
37
+ name: rake
38
+ requirement: &70316886409620 !ruby/object:Gem::Requirement
39
39
  none: false
40
40
  requirements:
41
41
  - - ~>
42
42
  - !ruby/object:Gem::Version
43
- version: '2.3'
43
+ version: '10.0'
44
44
  type: :development
45
45
  prerelease: false
46
- version_requirements: *70282995949260
47
- - !ruby/object:Gem::Dependency
48
- name: sprockets-sass
49
- requirement: &70282995946200 !ruby/object:Gem::Requirement
50
- none: false
51
- requirements:
52
- - - ~>
53
- - !ruby/object:Gem::Version
54
- version: '0.7'
55
- type: :development
56
- prerelease: false
57
- version_requirements: *70282995946200
46
+ version_requirements: *70316886409620
58
47
  description: The only responsive, fluid CSS grid with infinitely nestable columns.
59
48
  email:
60
49
  - me@petebrowne.com
61
- executables: []
50
+ executables:
51
+ - shelves
62
52
  extensions: []
63
53
  extra_rdoc_files: []
64
54
  files:
@@ -67,7 +57,9 @@ files:
67
57
  - LICENSE
68
58
  - README.md
69
59
  - Rakefile
60
+ - bin/shelves
70
61
  - lib/shelves.rb
62
+ - lib/shelves/cli.rb
71
63
  - lib/shelves/extensions/compass.rb
72
64
  - lib/shelves/extensions/rails.rb
73
65
  - lib/shelves/extensions/sprockets.rb
@@ -94,12 +86,18 @@ required_ruby_version: !ruby/object:Gem::Requirement
94
86
  - - ! '>='
95
87
  - !ruby/object:Gem::Version
96
88
  version: '0'
89
+ segments:
90
+ - 0
91
+ hash: 602854420926794406
97
92
  required_rubygems_version: !ruby/object:Gem::Requirement
98
93
  none: false
99
94
  requirements:
100
95
  - - ! '>='
101
96
  - !ruby/object:Gem::Version
102
97
  version: '0'
98
+ segments:
99
+ - 0
100
+ hash: 602854420926794406
103
101
  requirements: []
104
102
  rubyforge_project:
105
103
  rubygems_version: 1.8.11