shelves 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +17 -0
- data/Gemfile +2 -0
- data/LICENSE +22 -0
- data/README.md +41 -0
- data/Rakefile +22 -0
- data/lib/shelves.rb +21 -0
- data/lib/shelves/extensions/compass.rb +3 -0
- data/lib/shelves/extensions/rails.rb +11 -0
- data/lib/shelves/extensions/sprockets.rb +9 -0
- data/lib/shelves/version.rb +3 -0
- data/scss/shelves-grid.scss +3 -0
- data/scss/shelves.scss +13 -0
- data/scss/shelves/_functions.scss +104 -0
- data/scss/shelves/_mixins.scss +4 -0
- data/scss/shelves/_settings.scss +27 -0
- data/scss/shelves/mixins/_base.scss +111 -0
- data/scss/shelves/mixins/_generators.scss +200 -0
- data/scss/shelves/mixins/_modifiers.scss +43 -0
- data/scss/shelves/mixins/_resets.scss +50 -0
- data/shelves.gemspec +23 -0
- metadata +144 -0
data/.gitignore
ADDED
data/Gemfile
ADDED
data/LICENSE
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2012 Pete Browne
|
2
|
+
|
3
|
+
MIT License
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
6
|
+
a copy of this software and associated documentation files (the
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
11
|
+
the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be
|
14
|
+
included in all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,41 @@
|
|
1
|
+
Shelves CSS Grid
|
2
|
+
================
|
3
|
+
|
4
|
+
**The only responsive, fluid CSS grid with infinitely nestable columns.**
|
5
|
+
|
6
|
+
TODO: Add longer description & Feature list.
|
7
|
+
|
8
|
+
|
9
|
+
Installation
|
10
|
+
------------
|
11
|
+
|
12
|
+
### For CSS Users
|
13
|
+
|
14
|
+
Download the latest distribution of [the CSS file](https://raw.github.com/petebrowne/shelves/master/css/shelves.css) and go to town.
|
15
|
+
|
16
|
+
### For SCSS Users (Compass & Rails)
|
17
|
+
|
18
|
+
Add the shelves gem to your Gemfile and import it:
|
19
|
+
|
20
|
+
``` ruby
|
21
|
+
# ...
|
22
|
+
gem 'shelves'
|
23
|
+
# ...
|
24
|
+
```
|
25
|
+
|
26
|
+
``` scss
|
27
|
+
// @import "shelves"; // Import just the mixins
|
28
|
+
@import "shelves-grid"; // Import mixins & default grid
|
29
|
+
```
|
30
|
+
|
31
|
+
|
32
|
+
Usage
|
33
|
+
-----
|
34
|
+
|
35
|
+
TODO...
|
36
|
+
|
37
|
+
|
38
|
+
Copyright
|
39
|
+
---------
|
40
|
+
|
41
|
+
Copyright (c) 2012 [Pete Browne](http://petebrowne.com). See LICENSE for details.
|
data/Rakefile
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
#!/usr/bin/env rake
|
2
|
+
require 'bundler/gem_tasks'
|
3
|
+
|
4
|
+
desc 'Generate shelves.css'
|
5
|
+
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
|
22
|
+
end
|
data/lib/shelves.rb
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
require 'shelves/version'
|
2
|
+
|
3
|
+
module Shelves
|
4
|
+
# Returns the path to the root of the project.
|
5
|
+
def self.root
|
6
|
+
@root_path ||= File.expand_path '../..', __FILE__
|
7
|
+
end
|
8
|
+
|
9
|
+
# Returns the path to the main stylesheets directory.
|
10
|
+
def self.stylesheets_path
|
11
|
+
@stylesheets_path ||= File.join root, 'scss'
|
12
|
+
end
|
13
|
+
end
|
14
|
+
|
15
|
+
if defined? ::Rails
|
16
|
+
require 'shelves/extensions/rails'
|
17
|
+
elsif defined? ::Sprockets::Plugin
|
18
|
+
require 'shelves/extensions/sprockets'
|
19
|
+
else
|
20
|
+
require 'shelves/extensions/compass'
|
21
|
+
end
|
@@ -0,0 +1,11 @@
|
|
1
|
+
require 'rails/engine'
|
2
|
+
|
3
|
+
module Shelves
|
4
|
+
module Extensions
|
5
|
+
class Rails < ::Rails::Engine
|
6
|
+
initializer :append_shelves_asset_path, :after => :append_assets_path, :group => :all do |app|
|
7
|
+
app.config.assets.paths.unshift Shelves.stylesheets_path
|
8
|
+
end
|
9
|
+
end
|
10
|
+
end
|
11
|
+
end
|
data/scss/shelves.scss
ADDED
@@ -0,0 +1,13 @@
|
|
1
|
+
/*
|
2
|
+
SHELVES
|
3
|
+
-------
|
4
|
+
|
5
|
+
The only responsive, fluid CSS grid with infinitely nestable columns.
|
6
|
+
|
7
|
+
Copyright (c) 2012, Pete Browne
|
8
|
+
*/
|
9
|
+
|
10
|
+
@import "compass/utilities/general/clearfix";
|
11
|
+
@import "shelves/settings";
|
12
|
+
@import "shelves/functions";
|
13
|
+
@import "shelves/mixins";
|
@@ -0,0 +1,104 @@
|
|
1
|
+
// Returns the width of a single column (without gutters) as
|
2
|
+
// a percentage. If given a $context, this returns the column
|
3
|
+
// width relative to that number of columns.
|
4
|
+
//
|
5
|
+
// $context - The number of columns encapsulating the column.
|
6
|
+
// Defaults to the full width of the grid.
|
7
|
+
//
|
8
|
+
@function column-width($context: $shelves-columns) {
|
9
|
+
@if $context >= $shelves-columns {
|
10
|
+
@return $shelves-column-width;
|
11
|
+
}
|
12
|
+
@else {
|
13
|
+
@return $shelves-column-width * (100% / columns-width($context));
|
14
|
+
}
|
15
|
+
}
|
16
|
+
|
17
|
+
// Returns the width of the gutter as a percentage. If given a $context,
|
18
|
+
// this returns the gutter width relative to that number of columns.
|
19
|
+
//
|
20
|
+
// $context - The number of columns encapsulating the gutter.
|
21
|
+
// Defaults to the full width of the grid.
|
22
|
+
//
|
23
|
+
@function column-gutter($context: $shelves-columns) {
|
24
|
+
@if $context >= $shelves-columns {
|
25
|
+
@return $shelves-gutter;
|
26
|
+
}
|
27
|
+
@else {
|
28
|
+
@return $shelves-gutter * (100% / columns-width($context));
|
29
|
+
}
|
30
|
+
}
|
31
|
+
|
32
|
+
// Returns the total width (including gutters) of the given
|
33
|
+
// number of columns. If given a $context, this returns the
|
34
|
+
// width relative to that number of columns.
|
35
|
+
//
|
36
|
+
// $n - The number of columns to measure.
|
37
|
+
// $context - The number of columns encapsulating the columns.
|
38
|
+
// Defaults to the full width of the grid.
|
39
|
+
//
|
40
|
+
@function columns-width($n, $context: $shelves-columns) {
|
41
|
+
@if $n >= $shelves-columns {
|
42
|
+
@return 100%;
|
43
|
+
}
|
44
|
+
|
45
|
+
$column-width: $shelves-column-width;
|
46
|
+
$column-gutter: $shelves-gutter;
|
47
|
+
|
48
|
+
@if $context < $shelves-columns {
|
49
|
+
$column-width: column-width($context);
|
50
|
+
$column-gutter: column-gutter($context);
|
51
|
+
}
|
52
|
+
|
53
|
+
@return $column-width * $n + $column-gutter * ($n - 1);
|
54
|
+
}
|
55
|
+
|
56
|
+
// Returns the total distance to shift a column the given
|
57
|
+
// number of columns. If given a $context, this returns the
|
58
|
+
// distance relative to that number of columns.
|
59
|
+
//
|
60
|
+
// $n - The number of columns to measure.
|
61
|
+
// $context - The number of columns encapsulating the columns.
|
62
|
+
// Defaults to the full width of the grid.
|
63
|
+
//
|
64
|
+
@function columns-distance($n, $context: $shelves-columns) {
|
65
|
+
@return columns-width($n, $context) + column-gutter($context);
|
66
|
+
}
|
67
|
+
|
68
|
+
// Returns a column selector with the given class name,
|
69
|
+
// appended with the given index.
|
70
|
+
//
|
71
|
+
// $class-name - The class name to build the selector from.
|
72
|
+
// It should NOT have a preceding ".".
|
73
|
+
// $index - The index to append at the end. It will
|
74
|
+
// be separated by $separator.
|
75
|
+
// $separator - The separator between the class name and index.
|
76
|
+
// Defaults to $shelves-separator.
|
77
|
+
//
|
78
|
+
@function column-selector($class-name, $index, $separator: $shelves-separator) {
|
79
|
+
@return ".#{$class-name}#{$separator}#{$index}";
|
80
|
+
}
|
81
|
+
|
82
|
+
// Returns a list consisting of a range of numbers leading up to
|
83
|
+
// the last number.
|
84
|
+
//
|
85
|
+
// range(1, 6); // 1, 2, 3, 4, 5
|
86
|
+
// range(1, 6, $step: 2); // 1, 3, 5
|
87
|
+
//
|
88
|
+
// Arguments:
|
89
|
+
//
|
90
|
+
// $start - The start of the range.
|
91
|
+
// $end - The end of the range. This is exclusive, so this
|
92
|
+
// number will not be in the returned range.
|
93
|
+
// $step - Step by the given number to create the range.
|
94
|
+
// Defaults to 1.
|
95
|
+
//
|
96
|
+
@function range($start, $end, $step: 1) {
|
97
|
+
$list: $start;
|
98
|
+
$i: $start + $step;
|
99
|
+
@while $i < $end {
|
100
|
+
$list: join($list, $i);
|
101
|
+
$i: $i + $step;
|
102
|
+
}
|
103
|
+
@return $list;
|
104
|
+
}
|
@@ -0,0 +1,27 @@
|
|
1
|
+
// Default Grid Settings
|
2
|
+
$shelves-width: 1140px !default;
|
3
|
+
$shelves-max-width: $shelves-width !default;
|
4
|
+
$shelves-min-width: 767px !default;
|
5
|
+
$shelves-columns: 12 !default;
|
6
|
+
$shelves-mobile-columns: 4 !default;
|
7
|
+
$shelves-margin: 20px !default;
|
8
|
+
$shelves-gutter: 20px !default;
|
9
|
+
|
10
|
+
// Calculate the column width and gutter
|
11
|
+
@if unit($shelves-gutter) != "%" {
|
12
|
+
$shelves-gutter: percentage($shelves-gutter / $shelves-max-width);
|
13
|
+
}
|
14
|
+
$shelves-column-width: (100% - ($shelves-columns - 1) * $shelves-gutter) / $shelves-columns !default;
|
15
|
+
|
16
|
+
// Default Class Names
|
17
|
+
// (Note the lack of the preceding ".")
|
18
|
+
$shelves-container-name: "container" !default;
|
19
|
+
$shelves-row-name: "row" !default;
|
20
|
+
$shelves-column-name: "column" !default;
|
21
|
+
$shelves-prefix-name: "prefix" !default;
|
22
|
+
$shelves-suffix-name: "suffix" !default;
|
23
|
+
$shelves-push-name: "push" !default;
|
24
|
+
$shelves-pull-name: "pull" !default;
|
25
|
+
$shelves-separator: "-" !default;
|
26
|
+
$shelves-mobile-column-name: "mobile-column" !default;
|
27
|
+
$shelves-columns-selector: "[class*=\"#{$shelves-column-name}#{$shelves-separator}\"]" !default;
|
@@ -0,0 +1,111 @@
|
|
1
|
+
// Includes the styles for the container element - namely
|
2
|
+
// some outer margins for fluid sizes.
|
3
|
+
//
|
4
|
+
// $margin - The outer margins. Defaults to $shelves-margin.
|
5
|
+
//
|
6
|
+
@mixin container($margin: $shelves-margin) {
|
7
|
+
padding-left: $margin;
|
8
|
+
padding-right: $margin;
|
9
|
+
}
|
10
|
+
|
11
|
+
// Includes the styles for the row element. This includes
|
12
|
+
// a clearfix, widths, and centering.
|
13
|
+
//
|
14
|
+
// $max-width - The max width of the row element. If this is
|
15
|
+
// false, the row is completely fluid. Defaults
|
16
|
+
// to $shelves-max-width.
|
17
|
+
// $min-width - The min width, for browsers that don't support
|
18
|
+
// media queries. Defaults to $shelves-min-width.
|
19
|
+
// $mobile-reset - Include styles for resetting the row at
|
20
|
+
// mobile sizes. Defaults to true.
|
21
|
+
//
|
22
|
+
@mixin row($max-width: $shelves-max-width, $min-width: $shelves-min-width, $mobile-reset: true) {
|
23
|
+
@include pie-clearfix;
|
24
|
+
width: 100%;
|
25
|
+
|
26
|
+
@if $max-width != false {
|
27
|
+
max-width: $max-width;
|
28
|
+
margin-left: auto;
|
29
|
+
margin-right: auto;
|
30
|
+
}
|
31
|
+
|
32
|
+
@if $min-width != false {
|
33
|
+
min-width: $min-width;
|
34
|
+
|
35
|
+
.#{$shelves-row-name} {
|
36
|
+
min-width: 0;
|
37
|
+
}
|
38
|
+
}
|
39
|
+
|
40
|
+
@if $mobile-reset != false {
|
41
|
+
@media screen and (max-width: 767px) {
|
42
|
+
@include reset-row;
|
43
|
+
}
|
44
|
+
}
|
45
|
+
}
|
46
|
+
|
47
|
+
// Creates a column that spans the given number of
|
48
|
+
// grid columns.
|
49
|
+
//
|
50
|
+
// $n - The number of columns the element should span.
|
51
|
+
// $context - The number of columns encapsulating the element.
|
52
|
+
// Defaults to the full width of the grid.
|
53
|
+
// $mobile-reset - Include styles for resetting the column at
|
54
|
+
// mobile sizes. Defaults to true.
|
55
|
+
//
|
56
|
+
@mixin column($n, $context: $shelves-columns, $mobile-reset: true) {
|
57
|
+
@include column-base($mobile-reset);
|
58
|
+
@include column-gutter($context);
|
59
|
+
@include columns-width($n, $context);
|
60
|
+
}
|
61
|
+
|
62
|
+
// Sets up an element to be a column in the grid system.
|
63
|
+
// This is used internally to generate grids, Use column($n)
|
64
|
+
// instead to create fully functioning columns.
|
65
|
+
//
|
66
|
+
// $mobile-reset - Include styles for resetting the column at
|
67
|
+
// mobile sizes. Defaults to true.
|
68
|
+
//
|
69
|
+
@mixin column-base($mobile-reset: true) {
|
70
|
+
display: block;
|
71
|
+
float: left;
|
72
|
+
min-height: 1px;
|
73
|
+
position: relative;
|
74
|
+
|
75
|
+
@if $legacy-support-for-ie7 {
|
76
|
+
*margin-right: -1px;
|
77
|
+
}
|
78
|
+
|
79
|
+
@if $mobile-reset != false {
|
80
|
+
@media screen and (max-width: 767px) {
|
81
|
+
@include reset-column;
|
82
|
+
}
|
83
|
+
}
|
84
|
+
}
|
85
|
+
|
86
|
+
// Sets the width of the element to the given number of columns.
|
87
|
+
//
|
88
|
+
// $n - The number of columns the element should span.
|
89
|
+
// $context - The number of columns encapsulating the element.
|
90
|
+
// Defaults to the full width of the grid.
|
91
|
+
//
|
92
|
+
@mixin columns-width($n, $context: $shelves-columns) {
|
93
|
+
width: columns-width($n, $context);
|
94
|
+
}
|
95
|
+
|
96
|
+
// Includes the gutter for a column on the grid.
|
97
|
+
//
|
98
|
+
// $context - The number of columns encapsulating the element.
|
99
|
+
// Defaults to the full width of the grid.
|
100
|
+
// $include-first-column - Includes the styles for removing the gutter
|
101
|
+
// on the first column in a row. Defaults to true.
|
102
|
+
//
|
103
|
+
@mixin column-gutter($context: $shelves-columns, $include-first-column: true) {
|
104
|
+
margin-left: column-gutter($context);
|
105
|
+
|
106
|
+
@if $include-first-column == true {
|
107
|
+
&:first-child {
|
108
|
+
@include reset-column-gutter;
|
109
|
+
}
|
110
|
+
}
|
111
|
+
}
|
@@ -0,0 +1,200 @@
|
|
1
|
+
// Generates the entire grid, made up of reusable classes for a modular OOCSS
|
2
|
+
// approach to using the grid. All of the class names can be customized.
|
3
|
+
//
|
4
|
+
// $include-nested-columns - Include nested columns in the default grid.
|
5
|
+
// Defaults to true.
|
6
|
+
// $include-mobile-resets - Include mobile resets (remove grid for mobile
|
7
|
+
// sizes). Defaults to true.
|
8
|
+
// $include-mobile-columns - Include mobile columns (special column classes
|
9
|
+
// for mobile sizes). Defaults to true.
|
10
|
+
// $include-prefix - Include prefix classes. Deafults to true.
|
11
|
+
// $include-suffix - Include suffix classes. Deafults to true.
|
12
|
+
// $include-push - Include push classes. Deafults to true.
|
13
|
+
// $include-pull - Include pull classes. Deafults to true.
|
14
|
+
// $include-nested-prefix - Include prefix classes for neseted columns.
|
15
|
+
// Defaults to true.
|
16
|
+
// $include-nested-suffix - Include suffix classes for neseted columns.
|
17
|
+
// Defaults to true.
|
18
|
+
// $include-nested-push - Include push classes for neseted columns.
|
19
|
+
// Defaults to false.
|
20
|
+
// $include-nested-pull - Include pull classes for neseted columns.
|
21
|
+
// Defaults to false.
|
22
|
+
//
|
23
|
+
@mixin shelves(
|
24
|
+
$include-nested-columns: true,
|
25
|
+
$include-mobile-resets: true,
|
26
|
+
$include-mobile-columns: true,
|
27
|
+
$include-prefix: true,
|
28
|
+
$include-suffix: true,
|
29
|
+
$include-push: true,
|
30
|
+
$include-pull: true,
|
31
|
+
$include-nested-prefix: true,
|
32
|
+
$include-nested-suffix: true,
|
33
|
+
$include-nested-push: false,
|
34
|
+
$include-nested-pull: false
|
35
|
+
) {
|
36
|
+
|
37
|
+
@include shelves-base;
|
38
|
+
@include shelves-columns(
|
39
|
+
$include-column-gutter: false,
|
40
|
+
$include-prefix: $include-prefix,
|
41
|
+
$include-suffix: $include-suffix,
|
42
|
+
$include-push: $include-push,
|
43
|
+
$include-pull: $include-pull
|
44
|
+
);
|
45
|
+
|
46
|
+
@if $include-nested-columns == true {
|
47
|
+
@for $i from 1 to $shelves-columns - 1 {
|
48
|
+
// Loop background through the columns
|
49
|
+
// to cascade the nested column properties.
|
50
|
+
$i: $shelves-columns - $i;
|
51
|
+
|
52
|
+
#{column-selector($shelves-column-name, $i)} {
|
53
|
+
@include shelves-columns(
|
54
|
+
$start: 1,
|
55
|
+
$end: $i,
|
56
|
+
$context: $i,
|
57
|
+
$include-column-gutter: true,
|
58
|
+
$include-prefix: $include-nested-prefix,
|
59
|
+
$include-suffix: $include-nested-suffix,
|
60
|
+
$include-push: $include-nested-push,
|
61
|
+
$include-pull: $include-nested-pull
|
62
|
+
);
|
63
|
+
}
|
64
|
+
}
|
65
|
+
}
|
66
|
+
|
67
|
+
@media screen and (max-width: 767px) {
|
68
|
+
@if $include-mobile-resets == true {
|
69
|
+
@include shelves-resets;
|
70
|
+
}
|
71
|
+
@if $include-mobile-columns == true {
|
72
|
+
@include shelves-mobile-columns;
|
73
|
+
}
|
74
|
+
}
|
75
|
+
}
|
76
|
+
|
77
|
+
// Generates the grid's base classes, namely the
|
78
|
+
// the row and container elements.
|
79
|
+
@mixin shelves-base {
|
80
|
+
.#{$shelves-container-name} {
|
81
|
+
@include container;
|
82
|
+
}
|
83
|
+
|
84
|
+
.#{$shelves-row-name} {
|
85
|
+
@include row($mobile-reset: false);
|
86
|
+
}
|
87
|
+
|
88
|
+
#{$shelves-columns-selector}, {
|
89
|
+
@include column-base($mobile-reset: false);
|
90
|
+
@include column-gutter($include-first-column: false);
|
91
|
+
|
92
|
+
&,
|
93
|
+
& #{$shelves-columns-selector} {
|
94
|
+
&:first-child {
|
95
|
+
@include reset-column-gutter;
|
96
|
+
}
|
97
|
+
}
|
98
|
+
}
|
99
|
+
}
|
100
|
+
|
101
|
+
// Generates the classes used for laying out and modifying
|
102
|
+
// the columns. This can be used in different contexts, varying
|
103
|
+
// the number of columns if necessary.
|
104
|
+
//
|
105
|
+
// $start - Index to start the loop at. Defaults to 1.
|
106
|
+
// $end - Where to end the loop. Defaults to $shelves-columns.
|
107
|
+
// $context - The context of generated classes.
|
108
|
+
// Defaults to $shelves-columns.
|
109
|
+
// $include-column-gutter - Include generic column gutter for the given context.
|
110
|
+
// Defaults to true.
|
111
|
+
// $include-prefix - Include prefix classes. Deafults to true.
|
112
|
+
// $include-suffix - Include suffix classes. Deafults to true.
|
113
|
+
// $include-push - Include push classes. Deafults to true.
|
114
|
+
// $include-pull - Include pull classes. Deafults to true.
|
115
|
+
//
|
116
|
+
@mixin shelves-columns(
|
117
|
+
$start: 1,
|
118
|
+
$end: $shelves-columns,
|
119
|
+
$context: $shelves-columns,
|
120
|
+
$include-column-gutter: true,
|
121
|
+
$include-prefix: true,
|
122
|
+
$include-suffix: true,
|
123
|
+
$include-push: true,
|
124
|
+
$include-pull: true
|
125
|
+
) {
|
126
|
+
@if $include-column-gutter {
|
127
|
+
#{$shelves-columns-selector} {
|
128
|
+
@include column-gutter($context, false);
|
129
|
+
}
|
130
|
+
}
|
131
|
+
|
132
|
+
@for $i from $start to $end {
|
133
|
+
#{column-selector($shelves-column-name, $i)} {
|
134
|
+
@include columns-width($i, $context);
|
135
|
+
}
|
136
|
+
}
|
137
|
+
|
138
|
+
@if $include-prefix == true {
|
139
|
+
@for $i from $start to $end {
|
140
|
+
#{column-selector($shelves-prefix-name, $i)} {
|
141
|
+
@include column-prefix($i, $context);
|
142
|
+
}
|
143
|
+
}
|
144
|
+
}
|
145
|
+
|
146
|
+
@if $include-suffix == true {
|
147
|
+
@for $i from $start to $end {
|
148
|
+
#{column-selector($shelves-suffix-name, $i)} {
|
149
|
+
@include column-suffix($i, $context);
|
150
|
+
}
|
151
|
+
}
|
152
|
+
}
|
153
|
+
|
154
|
+
@if $include-push == true {
|
155
|
+
@for $i from $start to $end {
|
156
|
+
#{column-selector($shelves-push-name, $i)} {
|
157
|
+
@include column-push($i, $context);
|
158
|
+
}
|
159
|
+
}
|
160
|
+
}
|
161
|
+
|
162
|
+
@if $include-pull == true {
|
163
|
+
@for $i from $start to $end {
|
164
|
+
#{column-selector($shelves-pull-name, $i)} {
|
165
|
+
@include column-pull($i, $context);
|
166
|
+
}
|
167
|
+
}
|
168
|
+
}
|
169
|
+
}
|
170
|
+
|
171
|
+
// Resets the row and column elements so they take up
|
172
|
+
// the full width of their parent element. All modifying
|
173
|
+
// effects are removed from columns as well.
|
174
|
+
@mixin shelves-resets {
|
175
|
+
.#{$shelves-row-name} {
|
176
|
+
@include reset-row;
|
177
|
+
}
|
178
|
+
|
179
|
+
#{$shelves-columns-selector} {
|
180
|
+
&,
|
181
|
+
& #{$shelves-columns-selector} {
|
182
|
+
@include reset-column;
|
183
|
+
}
|
184
|
+
}
|
185
|
+
}
|
186
|
+
|
187
|
+
// Generates the classes for columns on mobile devices.
|
188
|
+
@mixin shelves-mobile-columns {
|
189
|
+
.#{$shelves-mobile-column-name} {
|
190
|
+
@include column-base($mobile-reset: false);
|
191
|
+
@include column-gutter($include-first-column: false);
|
192
|
+
|
193
|
+
$mobile-step: floor($shelves-columns / $shelves-mobile-columns);
|
194
|
+
@each $i in range($start: $mobile-step, $end: $shelves-columns, $step: $mobile-step) {
|
195
|
+
&#{column-selector($shelves-column-name, $i)} {
|
196
|
+
@include columns-width($i);
|
197
|
+
}
|
198
|
+
}
|
199
|
+
}
|
200
|
+
}
|
@@ -0,0 +1,43 @@
|
|
1
|
+
// Adds a padding suffix (which shifts the column to the right)
|
2
|
+
// spanning the given number of columns.
|
3
|
+
//
|
4
|
+
// $n - The number of columns to pad.
|
5
|
+
// $context - The number of columns encapsulating the element.
|
6
|
+
// Defaults to the full width of the grid.
|
7
|
+
//
|
8
|
+
@mixin column-prefix($n, $context: $shelves-columns) {
|
9
|
+
padding-left: columns-distance($n, $context);
|
10
|
+
}
|
11
|
+
|
12
|
+
// Adds a padding suffix (which shifts the column to the left)
|
13
|
+
// spanning the given number of columns.
|
14
|
+
//
|
15
|
+
// $n - The number of columns to pad.
|
16
|
+
// $context - The number of columns encapsulating the element.
|
17
|
+
// Defaults to the full width of the grid.
|
18
|
+
//
|
19
|
+
@mixin column-suffix($n, $context: $shelves-columns) {
|
20
|
+
padding-right: columns-distance($n, $context);
|
21
|
+
}
|
22
|
+
|
23
|
+
// Reorder the content by shifting the column to the right. This
|
24
|
+
// is often used in conjunction with column-pull($n).
|
25
|
+
//
|
26
|
+
// $n - The number of columns to shift.
|
27
|
+
// $context - The number of columns encapsulating the element.
|
28
|
+
// Defaults to the full width of the grid.
|
29
|
+
//
|
30
|
+
@mixin column-push($n, $context: $shelves-columns) {
|
31
|
+
left: columns-distance($n, $context);
|
32
|
+
}
|
33
|
+
|
34
|
+
// Reorder the content by shifting the column to the left. This
|
35
|
+
// is often used in conjunction with column-push($n).
|
36
|
+
//
|
37
|
+
// $n - The number of columns to shift.
|
38
|
+
// $context - The number of columns encapsulating the element.
|
39
|
+
// Defaults to the full width of the grid.
|
40
|
+
//
|
41
|
+
@mixin column-pull($n, $context: $shelves-columns) {
|
42
|
+
right: columns-distance($n, $context);
|
43
|
+
}
|
@@ -0,0 +1,50 @@
|
|
1
|
+
// Reset a row to expand to the full width of
|
2
|
+
// its container and remove margins.
|
3
|
+
@mixin reset-row {
|
4
|
+
margin-left: 0;
|
5
|
+
margin-right: 0;
|
6
|
+
width: 100%;
|
7
|
+
min-width: 0;
|
8
|
+
}
|
9
|
+
|
10
|
+
// Resets a column to expand to the full width of
|
11
|
+
// its container and remove float & margins.
|
12
|
+
@mixin reset-column {
|
13
|
+
@include reset-column-gutter;
|
14
|
+
@include reset-column-prefix;
|
15
|
+
@include reset-column-suffix;
|
16
|
+
@include reset-column-push;
|
17
|
+
@include reset-column-pull;
|
18
|
+
float: none;
|
19
|
+
width: auto;
|
20
|
+
|
21
|
+
@if $legacy-support-for-ie7 {
|
22
|
+
*margin-right: 0px;
|
23
|
+
}
|
24
|
+
}
|
25
|
+
|
26
|
+
// Removes the gutter of a column in a grid. This is usually added
|
27
|
+
// to the first column in a row.
|
28
|
+
@mixin reset-column-gutter {
|
29
|
+
margin-left: 0;
|
30
|
+
}
|
31
|
+
|
32
|
+
// Removes the padding prefix added to a column.
|
33
|
+
@mixin reset-column-prefix {
|
34
|
+
padding-left: 0;
|
35
|
+
}
|
36
|
+
|
37
|
+
// Removes the padding suffix added to a column.
|
38
|
+
@mixin reset-column-suffix {
|
39
|
+
padding-right: 0;
|
40
|
+
}
|
41
|
+
|
42
|
+
// Removes the column shifting added with a column-push($n).
|
43
|
+
@mixin reset-column-push {
|
44
|
+
left: auto;
|
45
|
+
}
|
46
|
+
|
47
|
+
// Removes the column shifting added with a column-pull($n).
|
48
|
+
@mixin reset-column-pull {
|
49
|
+
right: auto;
|
50
|
+
}
|
data/shelves.gemspec
ADDED
@@ -0,0 +1,23 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
$:.push File.expand_path('../lib', __FILE__)
|
3
|
+
require 'shelves/version'
|
4
|
+
|
5
|
+
Gem::Specification.new do |gem|
|
6
|
+
gem.authors = ['Pete Browne']
|
7
|
+
gem.email = ['me@petebrowne.com']
|
8
|
+
gem.description = %q{The only responsive, fluid CSS grid with infinitely nestable columns.}
|
9
|
+
gem.summary = %q{The only responsive, fluid CSS grid with infinitely nestable columns.}
|
10
|
+
gem.homepage = 'https://github.com/petebrowne/shelves'
|
11
|
+
|
12
|
+
gem.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
|
13
|
+
gem.files = `git ls-files`.split("\n").reject{ |f| File.fnmatch?('css/*', f) }
|
14
|
+
gem.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
|
15
|
+
gem.name = 'shelves'
|
16
|
+
gem.require_paths = ['lib']
|
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'
|
23
|
+
end
|
metadata
ADDED
@@ -0,0 +1,144 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: shelves
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
hash: 27
|
5
|
+
prerelease:
|
6
|
+
segments:
|
7
|
+
- 0
|
8
|
+
- 1
|
9
|
+
- 0
|
10
|
+
version: 0.1.0
|
11
|
+
platform: ruby
|
12
|
+
authors:
|
13
|
+
- Pete Browne
|
14
|
+
autorequire:
|
15
|
+
bindir: bin
|
16
|
+
cert_chain: []
|
17
|
+
|
18
|
+
date: 2012-03-22 00:00:00 Z
|
19
|
+
dependencies:
|
20
|
+
- !ruby/object:Gem::Dependency
|
21
|
+
name: sass
|
22
|
+
prerelease: false
|
23
|
+
requirement: &id001 !ruby/object:Gem::Requirement
|
24
|
+
none: false
|
25
|
+
requirements:
|
26
|
+
- - ~>
|
27
|
+
- !ruby/object:Gem::Version
|
28
|
+
hash: 5
|
29
|
+
segments:
|
30
|
+
- 3
|
31
|
+
- 1
|
32
|
+
version: "3.1"
|
33
|
+
type: :runtime
|
34
|
+
version_requirements: *id001
|
35
|
+
- !ruby/object:Gem::Dependency
|
36
|
+
name: compass
|
37
|
+
prerelease: false
|
38
|
+
requirement: &id002 !ruby/object:Gem::Requirement
|
39
|
+
none: false
|
40
|
+
requirements:
|
41
|
+
- - ~>
|
42
|
+
- !ruby/object:Gem::Version
|
43
|
+
hash: 19
|
44
|
+
segments:
|
45
|
+
- 0
|
46
|
+
- 12
|
47
|
+
version: "0.12"
|
48
|
+
type: :runtime
|
49
|
+
version_requirements: *id002
|
50
|
+
- !ruby/object:Gem::Dependency
|
51
|
+
name: sprockets
|
52
|
+
prerelease: false
|
53
|
+
requirement: &id003 !ruby/object:Gem::Requirement
|
54
|
+
none: false
|
55
|
+
requirements:
|
56
|
+
- - ~>
|
57
|
+
- !ruby/object:Gem::Version
|
58
|
+
hash: 5
|
59
|
+
segments:
|
60
|
+
- 2
|
61
|
+
- 3
|
62
|
+
version: "2.3"
|
63
|
+
type: :development
|
64
|
+
version_requirements: *id003
|
65
|
+
- !ruby/object:Gem::Dependency
|
66
|
+
name: sprockets-sass
|
67
|
+
prerelease: false
|
68
|
+
requirement: &id004 !ruby/object:Gem::Requirement
|
69
|
+
none: false
|
70
|
+
requirements:
|
71
|
+
- - ~>
|
72
|
+
- !ruby/object:Gem::Version
|
73
|
+
hash: 5
|
74
|
+
segments:
|
75
|
+
- 0
|
76
|
+
- 7
|
77
|
+
version: "0.7"
|
78
|
+
type: :development
|
79
|
+
version_requirements: *id004
|
80
|
+
description: The only responsive, fluid CSS grid with infinitely nestable columns.
|
81
|
+
email:
|
82
|
+
- me@petebrowne.com
|
83
|
+
executables: []
|
84
|
+
|
85
|
+
extensions: []
|
86
|
+
|
87
|
+
extra_rdoc_files: []
|
88
|
+
|
89
|
+
files:
|
90
|
+
- .gitignore
|
91
|
+
- Gemfile
|
92
|
+
- LICENSE
|
93
|
+
- README.md
|
94
|
+
- Rakefile
|
95
|
+
- lib/shelves.rb
|
96
|
+
- lib/shelves/extensions/compass.rb
|
97
|
+
- lib/shelves/extensions/rails.rb
|
98
|
+
- lib/shelves/extensions/sprockets.rb
|
99
|
+
- lib/shelves/version.rb
|
100
|
+
- scss/shelves-grid.scss
|
101
|
+
- scss/shelves.scss
|
102
|
+
- scss/shelves/_functions.scss
|
103
|
+
- scss/shelves/_mixins.scss
|
104
|
+
- scss/shelves/_settings.scss
|
105
|
+
- scss/shelves/mixins/_base.scss
|
106
|
+
- scss/shelves/mixins/_generators.scss
|
107
|
+
- scss/shelves/mixins/_modifiers.scss
|
108
|
+
- scss/shelves/mixins/_resets.scss
|
109
|
+
- shelves.gemspec
|
110
|
+
homepage: https://github.com/petebrowne/shelves
|
111
|
+
licenses: []
|
112
|
+
|
113
|
+
post_install_message:
|
114
|
+
rdoc_options: []
|
115
|
+
|
116
|
+
require_paths:
|
117
|
+
- lib
|
118
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
119
|
+
none: false
|
120
|
+
requirements:
|
121
|
+
- - ">="
|
122
|
+
- !ruby/object:Gem::Version
|
123
|
+
hash: 3
|
124
|
+
segments:
|
125
|
+
- 0
|
126
|
+
version: "0"
|
127
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
128
|
+
none: false
|
129
|
+
requirements:
|
130
|
+
- - ">="
|
131
|
+
- !ruby/object:Gem::Version
|
132
|
+
hash: 3
|
133
|
+
segments:
|
134
|
+
- 0
|
135
|
+
version: "0"
|
136
|
+
requirements: []
|
137
|
+
|
138
|
+
rubyforge_project:
|
139
|
+
rubygems_version: 1.8.11
|
140
|
+
signing_key:
|
141
|
+
specification_version: 3
|
142
|
+
summary: The only responsive, fluid CSS grid with infinitely nestable columns.
|
143
|
+
test_files: []
|
144
|
+
|