shelves 0.1.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/.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
|
+
|