shelves 0.6.0 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.md +5 -50
- data/component.json +1 -1
- data/lib/shelves/cli.rb +21 -5
- data/lib/shelves/version.rb +1 -1
- data/scss/shelves-grid.scss +146 -1
- data/scss/shelves.scss +1 -1
- data/scss/shelves/_functions.scss +79 -60
- data/scss/shelves/_mixins.scss +5 -3
- data/scss/shelves/_variables.scss +98 -0
- data/scss/shelves/mixins/_column.scss +226 -0
- data/scss/shelves/mixins/_context.scss +69 -0
- data/scss/shelves/mixins/_generators.scss +76 -204
- data/scss/shelves/mixins/_media.scss +150 -0
- data/scss/shelves/mixins/_row.scss +65 -0
- data/scss/shelves/mixins/_utils.scss +56 -0
- metadata +8 -6
- data/scss/shelves/_settings.scss +0 -61
- data/scss/shelves/mixins/_base.scss +0 -169
- data/scss/shelves/mixins/_modifiers.scss +0 -75
- data/scss/shelves/mixins/_resets.scss +0 -56
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
// Media query shortcut for min-width breakpoints.
|
|
2
|
+
//
|
|
3
|
+
// $min-width - The min width to use as a breakpoint.
|
|
4
|
+
//
|
|
5
|
+
@mixin min-screen($min-width) {
|
|
6
|
+
@media screen and (min-width: $min-width) {
|
|
7
|
+
@content;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
// Media query shortcut for max-width breakpoints.
|
|
12
|
+
//
|
|
13
|
+
// $max-width - The max width to use as a breakpoint.
|
|
14
|
+
//
|
|
15
|
+
@mixin max-screen($max-width) {
|
|
16
|
+
@media screen and (max-width: $max-width) {
|
|
17
|
+
@content;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// Media query shortcut for min-width & max-width breakpoints.
|
|
22
|
+
//
|
|
23
|
+
// $min-width - The min width to use as a breakpoint.
|
|
24
|
+
// $max-width - The max width to use as a breakpoint.
|
|
25
|
+
//
|
|
26
|
+
@mixin screen($min-width: null, $max-width: null) {
|
|
27
|
+
@if $min-width and $max-width {
|
|
28
|
+
@media screen and (min-width: $min-width) and (max-width: $max-width) {
|
|
29
|
+
@content;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
@else if $min-width {
|
|
33
|
+
@include min-screen($min-width) {
|
|
34
|
+
@content;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
@else if $max-width {
|
|
38
|
+
@include max-screen($max-width) {
|
|
39
|
+
@content;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// Media query shortcut for targeting only desktop device sizes (widths above
|
|
45
|
+
// the tablet breakpoint).
|
|
46
|
+
//
|
|
47
|
+
// $breakpoint - The min width to use as a breakpoint.
|
|
48
|
+
// Defaults to the value of $shelves-tablet-breakpoint.
|
|
49
|
+
// $columns - The number of columns in the grid.
|
|
50
|
+
// Defaults to the value of $shelves-columns.
|
|
51
|
+
// $gutter - The width of the gutter in the grid.
|
|
52
|
+
// Defaults to the value of $shelves-gutter.
|
|
53
|
+
//
|
|
54
|
+
@mixin on-desktop(
|
|
55
|
+
$breakpoint: $shelves-tablet-breakpoint,
|
|
56
|
+
$columns: $shelves-columns,
|
|
57
|
+
$gutter: $shelves-gutter) {
|
|
58
|
+
@include min-screen($breakpoint) {
|
|
59
|
+
@include with-desktop-grid($columns, $gutter) {
|
|
60
|
+
@content;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// Media query shortcut for targeting only tablet & desktop device sizes
|
|
66
|
+
// (widths above the mobile breakpoint).
|
|
67
|
+
//
|
|
68
|
+
// $breakpoint - The min width to use as a breakpoint.
|
|
69
|
+
// Defaults to the value of $shelves-mobile-breakpoint.
|
|
70
|
+
// $columns - The number of columns in the grid.
|
|
71
|
+
// Defaults to the value of $shelves-tablet-columns.
|
|
72
|
+
// $gutter - The width of the gutter in the grid.
|
|
73
|
+
// Defaults to the value of $shelves-tablet-gutter.
|
|
74
|
+
//
|
|
75
|
+
@mixin on-tablet-up(
|
|
76
|
+
$breakpoint: $shelves-mobile-breakpoint,
|
|
77
|
+
$columns: $shelves-tablet-columns,
|
|
78
|
+
$gutter: $shelves-tablet-gutter) {
|
|
79
|
+
@include min-screen($breakpoint) {
|
|
80
|
+
@include with-tablet-grid($columns, $gutter) {
|
|
81
|
+
@content;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// Media query shortcut for targeting only tablet device sizes (widths between
|
|
87
|
+
// the mobile breakpoint and the tablet breakpoint).
|
|
88
|
+
//
|
|
89
|
+
// $mobile-breakpoint - The min width to use as a breakpoint.
|
|
90
|
+
// Defaults to the value of $shelves-mobile-breakpoint.
|
|
91
|
+
// $tablet-breakpoint - The max width to use as a breakpoint
|
|
92
|
+
// Defaults to the value of $shelves-tablet-breakpoint.
|
|
93
|
+
// $columns - The number of columns in the grid.
|
|
94
|
+
// Defaults to the value of $shelves-tablet-columns.
|
|
95
|
+
// $gutter - The width of the gutter in the grid.
|
|
96
|
+
// Defaults to the value of $shelves-tablet-gutter.
|
|
97
|
+
//
|
|
98
|
+
@mixin on-tablet(
|
|
99
|
+
$mobile-breakpoint: $shelves-mobile-breakpoint,
|
|
100
|
+
$tablet-breakpoint: $shelves-tablet-breakpoint - 1,
|
|
101
|
+
$columns: $shelves-tablet-columns,
|
|
102
|
+
$gutter: $shelves-tablet-gutter) {
|
|
103
|
+
@include screen($mobile-breakpoint, $tablet-breakpoint) {
|
|
104
|
+
@include with-tablet-grid($columns, $gutter) {
|
|
105
|
+
@content;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
// Media query shortcut for targeting only mobile & tablet device sizes
|
|
111
|
+
// (widths below the tablet breakpoint).
|
|
112
|
+
//
|
|
113
|
+
// $breakpoint - The max width to use as a breakpoint.
|
|
114
|
+
// Defaults to the value of $shelves-tablet-breakpoint.
|
|
115
|
+
// $columns - The number of columns in the grid.
|
|
116
|
+
// Defaults to the value of $shelves-tablet-columns.
|
|
117
|
+
// $gutter - The width of the gutter in the grid.
|
|
118
|
+
// Defaults to the value of $shelves-tablet-gutter.
|
|
119
|
+
//
|
|
120
|
+
@mixin on-tablet-down(
|
|
121
|
+
$breakpoint: $shelves-tablet-breakpoint - 1,
|
|
122
|
+
$columns: $shelves-tablet-columns,
|
|
123
|
+
$gutter: $shelves-tablet-gutter) {
|
|
124
|
+
@include max-screen($breakpoint) {
|
|
125
|
+
@include with-tablet-grid($columns, $gutter) {
|
|
126
|
+
@content;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
// Media query shortcut for targeting only mobile device sizes (widths below
|
|
132
|
+
// the mobile breakpoint).
|
|
133
|
+
//
|
|
134
|
+
// $breakpoint - The max width to use as a breakpoint.
|
|
135
|
+
// Defaults to the value of $shelves-mobile-breakpoint.
|
|
136
|
+
// $columns - The number of columns in the grid.
|
|
137
|
+
// Defaults to the value of $shelves-mobile-columns.
|
|
138
|
+
// $gutter - The width of the gutter in the grid.
|
|
139
|
+
// Defaults to the value of $shelves-mobile-gutter.
|
|
140
|
+
//
|
|
141
|
+
@mixin on-mobile(
|
|
142
|
+
$breakpoint: $shelves-mobile-breakpoint - 1,
|
|
143
|
+
$columns: $shelves-mobile-columns,
|
|
144
|
+
$gutter: $shelves-mobile-gutter) {
|
|
145
|
+
@include max-screen($breakpoint) {
|
|
146
|
+
@include with-mobile-grid($columns, $gutter) {
|
|
147
|
+
@content;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
// Includes the styles for the row element. This includes
|
|
2
|
+
// a clearfix, widths, and centering.
|
|
3
|
+
//
|
|
4
|
+
// $max-width - The max width of the row element. If this is
|
|
5
|
+
// false, the row is completely fluid. Defaults
|
|
6
|
+
// to $shelves-max-width.
|
|
7
|
+
// $margin - The outer margins. Defaults to $shelves-margin.
|
|
8
|
+
//
|
|
9
|
+
@mixin row(
|
|
10
|
+
$max-width: $shelves-max-width,
|
|
11
|
+
$margin: $shelves-margin) {
|
|
12
|
+
@include row-base;
|
|
13
|
+
@include row-width($max-width);
|
|
14
|
+
@include row-margin($margin);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
// Simply adds a clearfix.
|
|
18
|
+
@mixin row-base {
|
|
19
|
+
@include shelves-clearfix;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// Includes the widths and centering for the rows.
|
|
23
|
+
//
|
|
24
|
+
// $max-width - The max width of the row element. If this is
|
|
25
|
+
// false, the row is completely fluid. Defaults
|
|
26
|
+
// to $shelves-max-width.
|
|
27
|
+
//
|
|
28
|
+
@mixin row-width($max-width: $shelves-max-width) {
|
|
29
|
+
@if type-of($max-width) == 'number' {
|
|
30
|
+
margin-right: auto;
|
|
31
|
+
margin-left: auto;
|
|
32
|
+
max-width: $max-width;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// Includes the styles for the outer margins of the row.
|
|
37
|
+
//
|
|
38
|
+
// $margin - The outer margins. Defaults to $shelves-margin.
|
|
39
|
+
//
|
|
40
|
+
@mixin row-margin($margin: $shelves-margin) {
|
|
41
|
+
padding-left: $margin;
|
|
42
|
+
padding-right: $margin;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// Row Resets
|
|
46
|
+
// ----------------------------------------------------------------------------
|
|
47
|
+
|
|
48
|
+
// Reset a row completely, removing the width and outer margins.
|
|
49
|
+
@mixin reset-row {
|
|
50
|
+
@include reset-row-width;
|
|
51
|
+
@include reset-row-margin;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// Reset a row to expand to the full width of its container.
|
|
55
|
+
@mixin reset-row-width {
|
|
56
|
+
margin-right: 0;
|
|
57
|
+
margin-left: 0;
|
|
58
|
+
max-width: none;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// Remove the outer margin from the rows.
|
|
62
|
+
@mixin reset-row-margin {
|
|
63
|
+
padding-right: 0;
|
|
64
|
+
padding-left: 0;
|
|
65
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
// Clearfix mixin based on micro-clearfix:
|
|
2
|
+
// http://nicolasgallagher.com/micro-clearfix-hack/
|
|
3
|
+
@mixin shelves-clearfix {
|
|
4
|
+
&:before,
|
|
5
|
+
&:after {
|
|
6
|
+
display: table;
|
|
7
|
+
content: " ";
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
&:after {
|
|
11
|
+
clear: both;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@if $shelves-ie7-support {
|
|
15
|
+
*zoom: 1;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
// This fixes IE 10's "Snap Mode". See for more information:
|
|
20
|
+
// http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
|
|
21
|
+
//
|
|
22
|
+
// width - Customize the width used. In the future, "device-width" may
|
|
23
|
+
// work better, but explicitly setting to 320px is recommended.
|
|
24
|
+
// Defaults to 320px.
|
|
25
|
+
// max-width - The media query max-width used to detect "Snap Mode".
|
|
26
|
+
// Defaults to 400px.
|
|
27
|
+
//
|
|
28
|
+
@mixin fix-snap-mode($width: 320px, $max-width: 400px) {
|
|
29
|
+
@include max-screen($max-width) {
|
|
30
|
+
@-ms-viewport {
|
|
31
|
+
width: $width;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// Makes the media (generally used on <img>s) fully fluid.
|
|
37
|
+
@mixin fluid-media {
|
|
38
|
+
max-width: 100%;
|
|
39
|
+
height: auto;
|
|
40
|
+
|
|
41
|
+
@if $shelves-ie8-support {
|
|
42
|
+
@media \0screen {
|
|
43
|
+
width: auto;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// Forces the element to not be visible. This is used in the visibility helpers.
|
|
49
|
+
@mixin force-hidden {
|
|
50
|
+
display: none !important;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// Forces the element to be visible. This is used in the visibility helpers.
|
|
54
|
+
@mixin force-visible {
|
|
55
|
+
display: inherit !important;
|
|
56
|
+
}
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: shelves
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 1.0.0
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2013-
|
|
12
|
+
date: 2013-04-14 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: sass
|
|
@@ -84,11 +84,13 @@ files:
|
|
|
84
84
|
- scss/shelves.scss
|
|
85
85
|
- scss/shelves/_functions.scss
|
|
86
86
|
- scss/shelves/_mixins.scss
|
|
87
|
-
- scss/shelves/
|
|
88
|
-
- scss/shelves/mixins/
|
|
87
|
+
- scss/shelves/_variables.scss
|
|
88
|
+
- scss/shelves/mixins/_column.scss
|
|
89
|
+
- scss/shelves/mixins/_context.scss
|
|
89
90
|
- scss/shelves/mixins/_generators.scss
|
|
90
|
-
- scss/shelves/mixins/
|
|
91
|
-
- scss/shelves/mixins/
|
|
91
|
+
- scss/shelves/mixins/_media.scss
|
|
92
|
+
- scss/shelves/mixins/_row.scss
|
|
93
|
+
- scss/shelves/mixins/_utils.scss
|
|
92
94
|
- shelves.gemspec
|
|
93
95
|
homepage: https://github.com/petebrowne/shelves
|
|
94
96
|
licenses: []
|
data/scss/shelves/_settings.scss
DELETED
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
// Default Grid Settings
|
|
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;
|
|
10
|
-
|
|
11
|
-
// Convert the gutter to a percentage if necessary.
|
|
12
|
-
@if unit($shelves-gutter) != "%" {
|
|
13
|
-
$shelves-gutter: percentage($shelves-gutter / $shelves-max-width);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
// Default Tablet Settings
|
|
17
|
-
$shelves-tablet-columns: 6 !default;
|
|
18
|
-
$shelves-tablet-margin: $shelves-margin * 0.75 !default;
|
|
19
|
-
$shelves-tablet-gutter: $shelves-gutter * 1.5 !default;
|
|
20
|
-
|
|
21
|
-
// Default Mobile Settings
|
|
22
|
-
$shelves-mobile-columns: 4 !default;
|
|
23
|
-
$shelves-mobile-margin: $shelves-margin * 0.5 !default;
|
|
24
|
-
$shelves-mobile-gutter: $shelves-gutter * 2.375 !default;
|
|
25
|
-
|
|
26
|
-
// Default Class Names
|
|
27
|
-
// (Note the lack of the preceding ".")
|
|
28
|
-
$shelves-row-name: "row" !default;
|
|
29
|
-
$shelves-column-name: "column" !default;
|
|
30
|
-
$shelves-prefix-name: "prefix" !default;
|
|
31
|
-
$shelves-suffix-name: "suffix" !default;
|
|
32
|
-
$shelves-push-name: "push" !default;
|
|
33
|
-
$shelves-pull-name: "pull" !default;
|
|
34
|
-
$shelves-separator: "-" !default;
|
|
35
|
-
$shelves-tablet-column-name: "tablet-column" !default;
|
|
36
|
-
$shelves-mobile-column-name: "mobile-column" !default;
|
|
37
|
-
|
|
38
|
-
// Default options for the grid generator
|
|
39
|
-
$shelves-prefixes: true !default;
|
|
40
|
-
$shelves-suffixes: true !default;
|
|
41
|
-
$shelves-pushes: true !default;
|
|
42
|
-
$shelves-pulls: true !default;
|
|
43
|
-
$shelves-nested: true !default;
|
|
44
|
-
$shelves-nested-prefixes: false !default;
|
|
45
|
-
$shelves-nested-suffixes: false !default;
|
|
46
|
-
$shelves-nested-pushes: false !default;
|
|
47
|
-
$shelves-nested-pulls: false !default;
|
|
48
|
-
$shelves-tablet: true !default;
|
|
49
|
-
$shelves-tablet-prefixes: false !default;
|
|
50
|
-
$shelves-tablet-suffixes: false !default;
|
|
51
|
-
$shelves-tablet-pushes: false !default;
|
|
52
|
-
$shelves-tablet-pulls: false !default;
|
|
53
|
-
$shelves-mobile: true !default;
|
|
54
|
-
$shelves-mobile-prefixes: false !default;
|
|
55
|
-
$shelves-mobile-suffixes: false !default;
|
|
56
|
-
$shelves-mobile-pushes: false !default;
|
|
57
|
-
$shelves-mobile-pulls: false !default;
|
|
58
|
-
|
|
59
|
-
// Support IE7
|
|
60
|
-
$legacy-support-for-ie7: true !default;
|
|
61
|
-
$shelves-ie7-support: $legacy-support-for-ie7 !default;
|
|
@@ -1,169 +0,0 @@
|
|
|
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
|
-
// $reset-if-tablet - Include styles for resetting the row at
|
|
20
|
-
// tablet sizes. Defaults to true.
|
|
21
|
-
// $reset-if-mobile - Include styles for resetting the row at
|
|
22
|
-
// mobile sizes. Defaults to false.
|
|
23
|
-
//
|
|
24
|
-
@mixin row(
|
|
25
|
-
$max-width: $shelves-max-width,
|
|
26
|
-
$min-width: $shelves-min-width,
|
|
27
|
-
$reset-if-tablet: true,
|
|
28
|
-
$reset-if-mobile: false) {
|
|
29
|
-
@include shelves-clearfix;
|
|
30
|
-
|
|
31
|
-
@if type-of($max-width) == 'number' {
|
|
32
|
-
margin-right: auto;
|
|
33
|
-
margin-left: auto;
|
|
34
|
-
max-width: $max-width;
|
|
35
|
-
}
|
|
36
|
-
@if type-of($min-width) == 'number' {
|
|
37
|
-
min-width: $min-width;
|
|
38
|
-
}
|
|
39
|
-
@if $reset-if-tablet {
|
|
40
|
-
@media screen and (max-width: $shelves-tablet-breakpoint) {
|
|
41
|
-
@include reset-row;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
@if $reset-if-mobile {
|
|
45
|
-
@media screen and (max-width: $shelves-mobile-breakpoint) {
|
|
46
|
-
@include reset-row;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
// Creates a column that spans the given number of
|
|
52
|
-
// grid columns.
|
|
53
|
-
//
|
|
54
|
-
// $n - The number of columns the element should span.
|
|
55
|
-
// $context - The number of columns encapsulating the element.
|
|
56
|
-
// Defaults to the the value of $total.
|
|
57
|
-
// $total - The total number of columns in the grid.
|
|
58
|
-
// Defaults to the value of $shelves-columns.
|
|
59
|
-
// $gutter - The width of the gutter in the root context (in %).
|
|
60
|
-
// Defaults to the value of $shelves-gutter.
|
|
61
|
-
// $reset-if-tablet - Include styles for resetting the column at
|
|
62
|
-
// tablet sizes. Defaults to true.
|
|
63
|
-
// $reset-if-mobile - Include styles for resetting the column at
|
|
64
|
-
// mobile sizes. Defaults to false.
|
|
65
|
-
//
|
|
66
|
-
@mixin column(
|
|
67
|
-
$n,
|
|
68
|
-
$context: null,
|
|
69
|
-
$total: $shelves-columns,
|
|
70
|
-
$gutter: $shelves-gutter,
|
|
71
|
-
$reset-if-tablet: true,
|
|
72
|
-
$reset-if-mobile: false) {
|
|
73
|
-
@include column-base($reset-if-tablet, $reset-if-mobile);
|
|
74
|
-
@include column-gutter($context, $total, $gutter);
|
|
75
|
-
@include columns-width($n, $context, $total, $gutter);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
// Sets up an element to be a column in the grid system.
|
|
79
|
-
// This is used internally to generate grids, Use column($n)
|
|
80
|
-
// instead to create fully functioning columns.
|
|
81
|
-
//
|
|
82
|
-
// $reset-if-tablet - Include styles for resetting the column at
|
|
83
|
-
// tablet sizes. Defaults to true.
|
|
84
|
-
// $reset-if-mobile - Include styles for resetting the column at
|
|
85
|
-
// mobile sizes. Defaults to false.
|
|
86
|
-
//
|
|
87
|
-
@mixin column-base($reset-if-tablet: true, $reset-if-mobile: false) {
|
|
88
|
-
display: block;
|
|
89
|
-
float: left;
|
|
90
|
-
min-height: 1px;
|
|
91
|
-
position: relative;
|
|
92
|
-
|
|
93
|
-
@if $shelves-ie7-support {
|
|
94
|
-
// IE6-7 incorrectly rounds up percentage widths (breaking layouts)
|
|
95
|
-
// http://ejohn.org/blog/sub-pixel-problems-in-css/
|
|
96
|
-
*margin-right: -1px;
|
|
97
|
-
}
|
|
98
|
-
@if $reset-if-tablet {
|
|
99
|
-
@media screen and (max-width: $shelves-tablet-breakpoint) {
|
|
100
|
-
@include reset-column;
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
@if $reset-if-mobile {
|
|
104
|
-
@media screen and (max-width: $shelves-mobile-breakpoint) {
|
|
105
|
-
@include reset-column;
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
// Sets the width of the element to the given number of columns.
|
|
111
|
-
//
|
|
112
|
-
// $n - The number of columns the element should span.
|
|
113
|
-
// $context - The number of columns encapsulating the element.
|
|
114
|
-
// Defaults to the the value of $total.
|
|
115
|
-
// $total - The total number of columns in the grid.
|
|
116
|
-
// Defaults to the value of $shelves-columns.
|
|
117
|
-
// $gutter - The width of the gutter in the root context (in %).
|
|
118
|
-
// Defaults to the value of $shelves-gutter.
|
|
119
|
-
//
|
|
120
|
-
@mixin columns-width(
|
|
121
|
-
$n,
|
|
122
|
-
$context: null,
|
|
123
|
-
$total: $shelves-columns,
|
|
124
|
-
$gutter: $shelves-gutter) {
|
|
125
|
-
width: columns-width($n, $context, $total, $gutter);
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
// Includes the gutter for a column on the grid.
|
|
129
|
-
//
|
|
130
|
-
// $context - The number of columns encapsulating the element.
|
|
131
|
-
// Defaults to the the value of $total.
|
|
132
|
-
// $total - The total number of columns in the grid.
|
|
133
|
-
// Defaults to the value of $shelves-columns.
|
|
134
|
-
// $gutter - The width of the gutter in the root context (in %).
|
|
135
|
-
// Defaults to the value of $shelves-gutter.
|
|
136
|
-
// $reset-first - Removes the gutter for the first column in a row.
|
|
137
|
-
// Defaults to true.
|
|
138
|
-
//
|
|
139
|
-
@mixin column-gutter(
|
|
140
|
-
$context: null,
|
|
141
|
-
$total: $shelves-columns,
|
|
142
|
-
$gutter: $shelves-gutter,
|
|
143
|
-
$reset-first: true) {
|
|
144
|
-
margin-left: column-gutter($context, $total, $gutter);
|
|
145
|
-
|
|
146
|
-
@if $reset-first {
|
|
147
|
-
&:first-child {
|
|
148
|
-
@include reset-column-gutter;
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
// Clearfix mixin based on micro-clearfix:
|
|
154
|
-
// http://nicolasgallagher.com/micro-clearfix-hack/
|
|
155
|
-
@mixin shelves-clearfix {
|
|
156
|
-
&:before,
|
|
157
|
-
&:after {
|
|
158
|
-
content: " ";
|
|
159
|
-
display: table;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
&:after {
|
|
163
|
-
clear: both;
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
@if $shelves-ie7-support {
|
|
167
|
-
*zoom: 1;
|
|
168
|
-
}
|
|
169
|
-
}
|