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.
@@ -1,4 +1,6 @@
1
- @import "shelves/mixins/base";
2
- @import "shelves/mixins/modifiers";
3
- @import "shelves/mixins/resets";
1
+ @import "shelves/mixins/utils";
2
+ @import "shelves/mixins/context";
3
+ @import "shelves/mixins/media";
4
+ @import "shelves/mixins/row";
5
+ @import "shelves/mixins/column";
4
6
  @import "shelves/mixins/generators";
@@ -0,0 +1,98 @@
1
+ // Default Grid Settings
2
+ $shelves-width: 1060px !default;
3
+ $shelves-max-width: $shelves-width !default;
4
+ $shelves-columns: 12 !default;
5
+ $shelves-margin: 20px !default;
6
+ $shelves-gutter: 20px !default;
7
+ $shelves-tablet-breakpoint: 800px !default;
8
+ $shelves-mobile-breakpoint: 480px !default;
9
+ $shelves-context: null;
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 Mobile Settings
17
+ $shelves-mobile-columns: 4 !default;
18
+ $shelves-mobile-gutter: $shelves-gutter * 2.375 !default;
19
+
20
+ // Default Tablet Settings
21
+ $shelves-tablet-columns: 6 !default;
22
+ $shelves-tablet-gutter: $shelves-gutter * 1.5 !default;
23
+
24
+ // Default Desktop Settings
25
+ $shelves-desktop-columns: $shelves-columns !default;
26
+ $shelves-desktop-gutter: $shelves-gutter !default;
27
+
28
+ // Default Naming Conventions
29
+ $shelves-separator: "-" !default;
30
+ $shelves-desktop-name: "desktop" !default;
31
+ $shelves-tablet-name: "tablet" !default;
32
+ $shelves-mobile-name: "mobile" !default;
33
+ $shelves-row-name: "row" !default;
34
+ $shelves-column-name: "column" !default;
35
+ $shelves-prefix-name: "prefix" !default;
36
+ $shelves-suffix-name: "suffix" !default;
37
+ $shelves-push-name: "push" !default;
38
+ $shelves-pull-name: "pull" !default;
39
+ $shelves-first-name: "first" !default;
40
+ $shelves-center-name: "center" !default;
41
+ $shelves-visible-name: "visible" !default;
42
+ $shelves-hidden-name: "hidden" !default;
43
+
44
+ // Default Class Names
45
+ // (Note the lack of the preceding ".")
46
+ $shelves-mobile-column-name: class-name($shelves-mobile-name $shelves-column-name) !default;
47
+ $shelves-tablet-column-name: class-name($shelves-tablet-name $shelves-column-name) !default;
48
+ $shelves-desktop-column-name: $shelves-column-name !default;
49
+ $shelves-mobile-prefix-name: class-name($shelves-mobile-name $shelves-prefix-name) !default;
50
+ $shelves-tablet-prefix-name: class-name($shelves-tablet-name $shelves-prefix-name) !default;
51
+ $shelves-desktop-prefix-name: $shelves-prefix-name !default;
52
+ $shelves-mobile-suffix-name: class-name($shelves-mobile-name $shelves-suffix-name) !default;
53
+ $shelves-tablet-suffix-name: class-name($shelves-tablet-name $shelves-suffix-name) !default;
54
+ $shelves-desktop-suffix-name: $shelves-suffix-name !default;
55
+ $shelves-mobile-push-name: class-name($shelves-mobile-name $shelves-push-name) !default;
56
+ $shelves-tablet-push-name: class-name($shelves-tablet-name $shelves-push-name) !default;
57
+ $shelves-desktop-push-name: $shelves-push-name !default;
58
+ $shelves-mobile-pull-name: class-name($shelves-mobile-name $shelves-pull-name) !default;
59
+ $shelves-tablet-pull-name: class-name($shelves-tablet-name $shelves-pull-name) !default;
60
+ $shelves-desktop-pull-name: $shelves-pull-name !default;
61
+ $shelves-first-mobile-column-name: class-name($shelves-first-name $shelves-mobile-column-name) !default;
62
+ $shelves-first-tablet-column-name: class-name($shelves-first-name $shelves-tablet-column-name) !default;
63
+ $shelves-first-desktop-column-name: class-name($shelves-first-name $shelves-desktop-column-name) !default;
64
+ $shelves-center-column-name: class-name($shelves-center-name $shelves-column-name) !default;
65
+ $shelves-visible-desktop-name: class-name($shelves-visible-name $shelves-desktop-name) !default;
66
+ $shelves-visible-tablet-name: class-name($shelves-visible-name $shelves-tablet-name) !default;
67
+ $shelves-visible-mobile-name: class-name($shelves-visible-name $shelves-mobile-name) !default;
68
+ $shelves-hidden-desktop-name: class-name($shelves-hidden-name $shelves-desktop-name) !default;
69
+ $shelves-hidden-tablet-name: class-name($shelves-hidden-name $shelves-tablet-name) !default;
70
+ $shelves-hidden-mobile-name: class-name($shelves-hidden-name $shelves-mobile-name) !default;
71
+
72
+ // Default options for the grid generator
73
+ $shelves-responsive-base: true !default;
74
+ $shelves-visibility: true !default;
75
+ $shelves-center: true !default;
76
+ $shelves-nested-columns: true !default;
77
+ $shelves-prefixes: true !default;
78
+ $shelves-suffixes: true !default;
79
+ $shelves-pushes: true !default;
80
+ $shelves-pulls: true !default;
81
+ $shelves-nested-prefixes: false !default;
82
+ $shelves-nested-suffixes: false !default;
83
+ $shelves-nested-pushes: false !default;
84
+ $shelves-nested-pulls: false !default;
85
+ $shelves-tablet-prefixes: false !default;
86
+ $shelves-tablet-suffixes: false !default;
87
+ $shelves-tablet-pushes: false !default;
88
+ $shelves-tablet-pulls: false !default;
89
+ $shelves-mobile-prefixes: false !default;
90
+ $shelves-mobile-suffixes: false !default;
91
+ $shelves-mobile-pushes: false !default;
92
+ $shelves-mobile-pulls: false !default;
93
+
94
+ // Support IE7
95
+ $legacy-support-for-ie7: true !default;
96
+ $legacy-support-for-ie8: true !default;
97
+ $shelves-ie7-support: $legacy-support-for-ie7 !default;
98
+ $shelves-ie8-support: $legacy-support-for-ie8 !default;
@@ -0,0 +1,226 @@
1
+ // Creates a column that spans the given number of
2
+ // grid columns.
3
+ //
4
+ // $n - The number of columns the element should span.
5
+ // $context - The number of columns encapsulating the element.
6
+ // Defaults to the the value of $total.
7
+ // $first - Does not apply the column-gutter, because this it the
8
+ // first column on the row. Defaults to false.
9
+ // $total - The total number of columns in the grid.
10
+ // Defaults to the value of $shelves-columns.
11
+ // $gutter - The width of the gutter in the root context (in %).
12
+ // Defaults to the value of $shelves-gutter.
13
+ //
14
+ @mixin column(
15
+ $n,
16
+ $context: $shelves-context,
17
+ $first: false,
18
+ $total: $shelves-columns,
19
+ $gutter: $shelves-gutter) {
20
+ @include column-base;
21
+ @include column-width($n, $context, $total, $gutter);
22
+
23
+ @if not $first {
24
+ @include column-gutter($context, $total, $gutter);
25
+ }
26
+ }
27
+
28
+ // Sets up an element to be a column in the grid system.
29
+ // This is used internally to generate grids, Use column($n)
30
+ // instead to create fully functioning columns.
31
+ @mixin column-base {
32
+ display: block;
33
+ float: left;
34
+ min-height: 1px;
35
+ position: relative;
36
+
37
+ @if $shelves-ie7-support {
38
+ // IE6-7 incorrectly rounds up percentage widths (breaking layouts)
39
+ // http://ejohn.org/blog/sub-pixel-problems-in-css/
40
+ *margin-right: -1px;
41
+ }
42
+ }
43
+
44
+ // Sets the width of the element to the given number of columns.
45
+ //
46
+ // $n - The number of columns the element should span.
47
+ // $context - The number of columns encapsulating the element.
48
+ // Defaults to the the value of $total.
49
+ // $total - The total number of columns in the grid.
50
+ // Defaults to the value of $shelves-columns.
51
+ // $gutter - The width of the gutter in the root context (in %).
52
+ // Defaults to the value of $shelves-gutter.
53
+ //
54
+ @mixin column-width(
55
+ $n,
56
+ $context: $shelves-context,
57
+ $total: $shelves-columns,
58
+ $gutter: $shelves-gutter) {
59
+ width: column-width($n, $context, $total, $gutter);
60
+ }
61
+
62
+ // Includes the gutter for a column on the grid.
63
+ //
64
+ // $context - The number of columns encapsulating the element.
65
+ // Defaults to the the value of $total.
66
+ // $total - The total number of columns in the grid.
67
+ // Defaults to the value of $shelves-columns.
68
+ // $gutter - The width of the gutter in the root context (in %).
69
+ // Defaults to the value of $shelves-gutter.
70
+ // $reset-first - Removes the gutter for the first column in a row.
71
+ // Defaults to false.
72
+ //
73
+ @mixin column-gutter(
74
+ $context: $shelves-context,
75
+ $total: $shelves-columns,
76
+ $gutter: $shelves-gutter) {
77
+ margin-left: column-gutter($context, $total, $gutter);
78
+ }
79
+
80
+ // Column Modifiers
81
+ // ----------------------------------------------------------------------------
82
+
83
+ // Centers the column by removing the float and setting the horizontal
84
+ // margins to auto.
85
+ @mixin center-column {
86
+ float: none;
87
+ margin-left: auto !important;
88
+ margin-right: auto;
89
+ }
90
+
91
+ // Adds a padding suffix (which shifts the column to the right)
92
+ // spanning the given number of columns.
93
+ //
94
+ // $n - The number of columns to pad.
95
+ // $context - The number of columns encapsulating the element.
96
+ // Defaults to the the value of $total.
97
+ // $total - The total number of columns in the grid.
98
+ // Defaults to the value of $shelves-columns.
99
+ // $gutter - The width of the gutter in the root context (in %).
100
+ // Defaults to the value of $shelves-gutter.
101
+ // $with-gutter - Include an extra gutter in the calculation.
102
+ // Defaults to true.
103
+ //
104
+ @mixin prefix-column(
105
+ $n,
106
+ $context: $shelves-context,
107
+ $total: $shelves-columns,
108
+ $gutter: $shelves-gutter,
109
+ $with-gutter: true) {
110
+ padding-left: column-distance($n, $context, $total, $gutter, $with-gutter);
111
+ }
112
+
113
+ // Adds a padding suffix (which shifts the column to the left)
114
+ // spanning the given number of columns.
115
+ //
116
+ // $n - The number of columns to pad.
117
+ // $context - The number of columns encapsulating the element.
118
+ // Defaults to the the value of $total.
119
+ // $total - The total number of columns in the grid.
120
+ // Defaults to the value of $shelves-columns.
121
+ // $gutter - The width of the gutter in the root context (in %).
122
+ // Defaults to the value of $shelves-gutter.
123
+ // $with-gutter - Include an extra gutter in the calculation.
124
+ // Defaults to true.
125
+ //
126
+ @mixin suffix-column(
127
+ $n,
128
+ $context: $shelves-context,
129
+ $total: $shelves-columns,
130
+ $gutter: $shelves-gutter,
131
+ $with-gutter: true) {
132
+ padding-right: column-distance($n, $context, $total, $gutter, $with-gutter);
133
+ }
134
+
135
+ // Reorder the content by shifting the column to the right. This
136
+ // is often used in conjunction with column-pull($n).
137
+ //
138
+ // $n - The number of columns to shift.
139
+ // $context - The number of columns encapsulating the element.
140
+ // Defaults to the the value of $total.
141
+ // $total - The total number of columns in the grid.
142
+ // Defaults to the value of $shelves-columns.
143
+ // $gutter - The width of the gutter in the root context (in %).
144
+ // Defaults to the value of $shelves-gutter.
145
+ // $with-gutter - Include an extra gutter in the calculation.
146
+ // Defaults to true.
147
+ //
148
+ @mixin push-column(
149
+ $n,
150
+ $context: $shelves-context,
151
+ $total: $shelves-columns,
152
+ $gutter: $shelves-gutter,
153
+ $with-gutter: true) {
154
+ left: column-distance($n, $context, $total, $gutter, $with-gutter);
155
+ }
156
+
157
+ // Reorder the content by shifting the column to the left. This
158
+ // is often used in conjunction with column-push($n).
159
+ //
160
+ // $n - The number of columns to shift.
161
+ // $context - The number of columns encapsulating the element.
162
+ // Defaults to the the value of $total.
163
+ // $total - The total number of columns in the grid.
164
+ // Defaults to the value of $shelves-columns.
165
+ // $gutter - The width of the gutter in the root context (in %).
166
+ // Defaults to the value of $shelves-gutter.
167
+ // $with-gutter - Include an extra gutter in the calculation.
168
+ // Defaults to true.
169
+ //
170
+ @mixin pull-column(
171
+ $n,
172
+ $context: $shelves-context,
173
+ $total: $shelves-columns,
174
+ $gutter: $shelves-gutter,
175
+ $with-gutter: true) {
176
+ right: column-distance($n, $context, $total, $gutter, $with-gutter);
177
+ }
178
+
179
+ // Column Resets
180
+ // ----------------------------------------------------------------------------
181
+
182
+ // Resets a column completely, removing margins, padding, and positioning.
183
+ @mixin reset-column {
184
+ @include reset-column-width;
185
+ @include reset-column-gutter;
186
+ @include reset-column-prefix;
187
+ @include reset-column-suffix;
188
+ @include reset-column-push;
189
+ @include reset-column-pull;
190
+ }
191
+
192
+ // Resets a column to expand to the full width of its container.
193
+ @mixin reset-column-width {
194
+ float: none;
195
+ width: auto;
196
+
197
+ @if $shelves-ie7-support {
198
+ *margin-right: 0px;
199
+ }
200
+ }
201
+
202
+ // Removes the gutter of a column in a grid. This is usually added
203
+ // to the first column in a row.
204
+ @mixin reset-column-gutter {
205
+ margin-left: 0;
206
+ }
207
+
208
+ // Removes the padding prefix added to a column.
209
+ @mixin reset-column-prefix {
210
+ padding-left: 0;
211
+ }
212
+
213
+ // Removes the padding suffix added to a column.
214
+ @mixin reset-column-suffix {
215
+ padding-right: 0;
216
+ }
217
+
218
+ // Removes the column shifting added with a column-push($n).
219
+ @mixin reset-column-push {
220
+ left: auto;
221
+ }
222
+
223
+ // Removes the column shifting added with a column-pull($n).
224
+ @mixin reset-column-pull {
225
+ right: auto;
226
+ }
@@ -0,0 +1,69 @@
1
+ // Place the block of content with the given grid settings.
2
+ //
3
+ // $columns - The number of columns in the grid.
4
+ // $gutter - The width of the gutter in the grid.
5
+ // Defaults to the value of $shelves-gutter.
6
+ //
7
+ @mixin with-grid($columns, $gutter: $shelves-gutter) {
8
+ $original-shelves-columns: $shelves-columns;
9
+ $original-shelves-gutter: $shelves-gutter;
10
+ $shelves-columns: $columns;
11
+ $shelves-gutter: $gutter;
12
+ @content;
13
+ $shelves-columns: $original-shelves-columns;
14
+ $shelves-gutter: $original-shelves-gutter;
15
+ }
16
+
17
+ // Place the block of content with the given context (the current column size).
18
+ //
19
+ // $context - The number of columns encapsulating the column.
20
+ //
21
+ @mixin with-parent-column($context) {
22
+ $original-shelves-contenxt: $shelves-context;
23
+ $shelves-context: $context;
24
+ @content;
25
+ $shelves-context: $original-shelves-contenxt;
26
+ }
27
+
28
+ // Place the block of content with the given desktop grid settings.
29
+ //
30
+ // $columns - The number of columns in the grid.
31
+ // Defaults to the value of $shelves-columns.
32
+ // $gutter - The width of the gutter in the grid.
33
+ // Defaults to the value of $shelves-gutter.
34
+ //
35
+ @mixin with-desktop-grid($columns: $shelves-columns, $gutter: $shelves-gutter) {
36
+ @include with-grid($columns, $gutter) {
37
+ @content;
38
+ }
39
+ }
40
+
41
+ // Place the block of content with the given tablet grid settings.
42
+ //
43
+ // $columns - The number of columns in the grid.
44
+ // Defaults to the value of $shelves-tablet-columns.
45
+ // $gutter - The width of the gutter in the grid.
46
+ // Defaults to the value of $shelves-tablet-gutter.
47
+ //
48
+ @mixin with-tablet-grid(
49
+ $columns: $shelves-tablet-columns,
50
+ $gutter: $shelves-tablet-gutter) {
51
+ @include with-grid($columns, $gutter) {
52
+ @content;
53
+ }
54
+ }
55
+
56
+ // Place the block of content with the given mobile grid settings.
57
+ //
58
+ // $columns - The number of columns in the grid.
59
+ // Defaults to the value of $shelves-mobile-columns.
60
+ // $gutter - The width of the gutter in the grid.
61
+ // Defaults to the value of $shelves-mobile-gutter.
62
+ //
63
+ @mixin with-mobile-grid(
64
+ $columns: $shelves-mobile-columns,
65
+ $gutter: $shelves-mobile-gutter) {
66
+ @include with-grid($columns, $gutter) {
67
+ @content;
68
+ }
69
+ }
@@ -1,181 +1,56 @@
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.
1
+ // Generates the grid's base classes.
3
2
  //
4
- // $prefixes - Include prefix classes. Deafults to true.
5
- // $suffixes - Include suffix classes. Deafults to true.
6
- // $pushes - Include push classes. Deafults to true.
7
- // $pulls - Include pull classes. Deafults to true.
8
- // $nested - Include nested columns in the default grid.
9
- // Defaults to true.
10
- // $nested-prefixes - Include prefix classes for neseted columns.
11
- // Defaults to true.
12
- // $nested-suffixes - Include suffix classes for neseted columns.
13
- // Defaults to true.
14
- // $nested-pushes - Include push classes for neseted columns.
15
- // Defaults to false.
16
- // $nested-pulls - Include pull classes for neseted columns.
17
- // Defaults to false.
18
- // $tablet - Include tablet columns & resets. Defaults to true.
19
- // $tablet-prefixes - Include prefix classes for tablet columns.
20
- // Defaults to false.
21
- // $tablet-suffixes - Include suffix classes for tablet columns.
22
- // Defaults to false.
23
- // $tablet-pushes - Include push classes for tablet columns.
24
- // Defaults to false.
25
- // $tablet-pulls - Include pull classes for tablet columns.
26
- // Defaults to false.
27
- // $mobile - Include mobile columns & resets. Defaults to true.
28
- // $mobile-prefixes - Include prefix classes for mobile columns.
29
- // Defaults to false.
30
- // $mobile-suffixes - Include suffix classes for mobile columns.
31
- // Defaults to false.
32
- // $mobile-pushes - Include push classes for mobile columns.
33
- // Defaults to false.
34
- // $mobile-pulls - Include pull classes for mobile columns.
35
- // Defaults to false.
3
+ // $responsive-base - Include the responsive base styles.
4
+ // Defaults to the value of $shelves-responsive-base.
36
5
  //
37
- @mixin shelves(
38
- $prefixes: $shelves-prefixes,
39
- $suffixes: $shelves-suffixes,
40
- $pushes: $shelves-pushes,
41
- $pulls: $shelves-pulls,
42
- $nested: $shelves-nested,
43
- $nested-prefixes: $shelves-nested-prefixes,
44
- $nested-suffixes: $shelves-nested-suffixes,
45
- $nested-pushes: $shelves-nested-pushes,
46
- $nested-pulls: $shelves-nested-pulls,
47
- $tablet: $shelves-tablet,
48
- $tablet-prefixes: $shelves-tablet-prefixes,
49
- $tablet-suffixes: $shelves-tablet-suffixes,
50
- $tablet-pushes: $shelves-tablet-pushes,
51
- $tablet-pulls: $shelves-tablet-pulls,
52
- $mobile: $shelves-mobile,
53
- $mobile-prefixes: $shelves-mobile-prefixes,
54
- $mobile-suffixes: $shelves-mobile-suffixes,
55
- $mobile-pushes: $shelves-mobile-pushes,
56
- $mobile-pulls: $shelves-mobile-pulls) {
57
- @include shelves-base($reset-if-tablet: false, $reset-if-mobile: false);
58
- @include shelves-columns(
59
- $prefixes: $prefixes,
60
- $suffixes: $suffixes,
61
- $pushes: $pushes,
62
- $pulls: $pulls
63
- );
64
-
65
- @if $nested {
66
- @for $i from 1 to $shelves-columns - 1 {
67
- // Loop background through the columns
68
- // to cascade the nested column properties.
69
- $i: $shelves-columns - $i;
70
-
71
- #{column-selector($shelves-column-name, $i)} {
72
- #{columns-selector($shelves-column-name)} {
73
- @include column-gutter($i, $reset-first: false);
74
- }
75
-
76
- @include shelves-columns(
77
- $context: $i,
78
- $prefixes: $nested-prefixes,
79
- $suffixes: $nested-suffixes,
80
- $pushes: $nested-pushes,
81
- $pulls: $nested-pulls
82
- );
83
- }
84
- }
6
+ @mixin shelves-base($responsive-base: $shelves-responsive-base) {
7
+ @if $responsive-base {
8
+ @include shelves-responsive-base;
85
9
  }
86
10
 
87
- @if $tablet {
88
- @media screen and (max-width: $shelves-tablet-breakpoint) {
89
- @if $shelves-tablet-margin != $shelves-margin {
90
- .#{$shelves-row-name} {
91
- @include container($shelves-tablet-margin);
92
- }
93
- }
94
-
95
- @include shelves-resets;
11
+ #{class-selector($shelves-row-name)} {
12
+ @include row;
96
13
 
97
- // Use the extra specificity from the row class
98
- // to apply tablet column properties even when nested
99
- .#{$shelves-row-name} {
100
- #{columns-selector($shelves-tablet-column-name)} {
101
- @include column-base($reset-if-tablet: false, $reset-if-mobile: false);
102
- @include column-gutter($total: $shelves-tablet-columns, $gutter: $shelves-tablet-gutter);
103
- }
104
-
105
- @include shelves-columns(
106
- $column-name: $shelves-tablet-column-name,
107
- $total: $shelves-tablet-columns,
108
- $gutter: $shelves-tablet-gutter,
109
- $prefixes: $tablet-prefixes,
110
- $suffixes: $tablet-suffixes,
111
- $pushes: $tablet-pushes,
112
- $pulls: $tablet-pulls
113
- );
114
- }
14
+ #{class-selector($shelves-row-name)} {
15
+ @include reset-row;
115
16
  }
116
17
  }
18
+ }
117
19
 
118
- @if $mobile {
119
- @media screen and (max-width: $shelves-mobile-breakpoint) {
120
- @if $shelves-mobile-margin != if($tablet, $shelves-margin, $shelves-tablet-margin) {
121
- .#{$shelves-row-name} {
122
- @include container($shelves-mobile-margin);
123
- }
124
- }
125
-
126
- @include shelves-resets($reset-row: $tablet == false);
127
-
128
- // Use the extra specificity from the row class
129
- // to apply mobile column properties even when nested
130
- .#{$shelves-row-name} {
131
- #{columns-selector($shelves-mobile-column-name)} {
132
- @include column-base($reset-if-tablet: false, $reset-if-mobile: false);
133
- @include column-gutter($total: $shelves-mobile-columns, $gutter: $shelves-mobile-gutter);
134
- }
20
+ // Adds some non-grid related responsive styles. It fixes IE 10's
21
+ // "Snap Mode" and making images fluid.
22
+ @mixin shelves-responsive-base {
23
+ @include fix-snap-mode;
135
24
 
136
- @include shelves-columns(
137
- $column-name: $shelves-mobile-column-name,
138
- $total: $shelves-mobile-columns,
139
- $gutter: $shelves-mobile-gutter,
140
- $prefixes: $mobile-prefixes,
141
- $suffixes: $mobile-suffixes,
142
- $pushes: $mobile-pushes,
143
- $pulls: $mobile-pulls
144
- );
145
- }
146
- }
25
+ img {
26
+ @include fluid-media;
147
27
  }
148
28
  }
149
29
 
150
- // Generates the grid's base classes, namely the
151
- // the row and container elements.
152
- //
153
- // $reset-if-tablet - Include styles for resetting the grid at
154
- // tablet sizes. Defaults to true.
155
- // $reset-if-mobile - Include styles for resetting the grid at
156
- // mobile sizes. Defaults to false.
157
- //
158
- @mixin shelves-base($reset-if-tablet: true, $reset-if-mobile: false) {
159
- .#{$shelves-row-name} {
160
- @include container;
161
- @include row($reset-if-tablet: $reset-if-tablet, $reset-if-mobile: $reset-if-mobile);
162
-
163
- .#{$shelves-row-name} {
164
- @include reset-container;
165
- @include reset-row;
30
+ // Include visibility helpers for showing/hiding content based on
31
+ // device size.
32
+ @mixin shelves-visibility-helpers {
33
+ @include on-mobile {
34
+ #{class-selector($shelves-hidden-mobile-name)},
35
+ #{class-selector($shelves-visible-tablet-name)},
36
+ #{class-selector($shelves-visible-desktop-name)} {
37
+ @include force-hidden;
166
38
  }
167
39
  }
168
40
 
169
- #{columns-selector($shelves-column-name)} {
170
- @include column-base($reset-if-tablet: $reset-if-tablet, $reset-if-mobile: $reset-if-mobile);
171
- @include column-gutter($reset-first: false);
41
+ @include on-tablet {
42
+ #{class-selector($shelves-visible-mobile-name)},
43
+ #{class-selector($shelves-hidden-tablet-name)},
44
+ #{class-selector($shelves-visible-desktop-name)} {
45
+ @include force-hidden;
46
+ }
172
47
  }
173
48
 
174
- .#{$shelves-row-name} {
175
- #{columns-selector($shelves-column-name)} {
176
- &:first-child {
177
- @include reset-column-gutter;
178
- }
49
+ @include on-desktop {
50
+ #{class-selector($shelves-visible-mobile-name)},
51
+ #{class-selector($shelves-visible-tablet-name)},
52
+ #{class-selector($shelves-hidden-desktop-name)} {
53
+ @include force-hidden;
179
54
  }
180
55
  }
181
56
  }
@@ -184,8 +59,8 @@
184
59
  // the columns. This can be used in different contexts, varying
185
60
  // the number of columns if necessary.
186
61
  //
187
- // $column-name - The name of the column to generate widths for.
188
- // Defaults to $shelves-column-name
62
+ // $extend - Each column will @extend this placeholder if set.
63
+ // Defaults to null.
189
64
  // $start - Where to start the loop. Defaults to 1.
190
65
  // $end - Where to end the loop.
191
66
  // Defaults to the value of $total.
@@ -195,76 +70,73 @@
195
70
  // Defaults to the value of $shelves-columns.
196
71
  // $gutter - The width of the gutter in the root context (in %).
197
72
  // Defaults to the value of $shelves-gutter.
198
- // $prefixes - Include prefix classes. Deafults to true.
199
- // $suffixes - Include suffix classes. Deafults to true.
200
- // $pushes - Include push classes. Deafults to true.
201
- // $pulls - Include pull classes. Deafults to true.
73
+ // $prefixes - Include prefix classes. Defaults to false.
74
+ // $suffixes - Include suffix classes. Defaults to false.
75
+ // $pushes - Include push classes. Defaults to false.
76
+ // $pulls - Include pull classes. Defaults to false.
77
+ // $column-name - The name of the column to generate widths for.
78
+ // Defaults to $shelves-desktop-column-name.
79
+ // $prefix-name - The class name of the prefix modifier.
80
+ // Defaults to $shelves-desktop-prefix-name.
81
+ // $suffix-name - The class name of the suffix modifier.
82
+ // Defaults to $shelves-desktop-suffix-name.
83
+ // $push-name - The class name of the push modifier.
84
+ // Defaults to $shelves-desktop-push-name.
85
+ // $pull-name - The class name of the pull modifier.
86
+ // Defaults to $shelves-desktop-pull-name.
202
87
  //
203
88
  @mixin shelves-columns(
204
- $column-name: $shelves-column-name,
89
+ $extend: null,
205
90
  $start: 1,
206
91
  $end: null,
207
- $context: null,
92
+ $context: $shelves-context,
208
93
  $total: $shelves-columns,
209
94
  $gutter: $shelves-gutter,
210
- $prefixes: true,
211
- $suffixes: true,
212
- $pushes: true,
213
- $pulls: true) {
95
+ $prefixes: false,
96
+ $suffixes: false,
97
+ $pushes: false,
98
+ $pulls: false,
99
+ $column-name: $shelves-desktop-column-name,
100
+ $prefix-name: $shelves-desktop-prefix-name,
101
+ $suffix-name: $shelves-desktop-suffix-name,
102
+ $push-name: $shelves-desktop-push-name,
103
+ $pull-name: $shelves-desktop-pull-name) {
214
104
  $context: $total !default;
215
105
  $end: $context !default;
216
106
 
217
107
  @for $i from $start to $end {
218
- #{column-selector($column-name, $i)} {
219
- @include columns-width($i, $context, $total, $gutter);
108
+ #{class-selector($column-name $i)} {
109
+ @if $extend {
110
+ @extend %#{$extend};
111
+ }
112
+ @include column-width($i, $context, $total, $gutter);
220
113
  }
221
114
  }
222
115
  @if $prefixes {
223
116
  @for $i from $start to $end {
224
- #{column-selector($shelves-prefix-name, $i)} {
225
- @include column-prefix($i, $context, $total, $gutter);
117
+ #{class-selector($prefix-name $i)} {
118
+ @include prefix-column($i, $context, $total, $gutter);
226
119
  }
227
120
  }
228
121
  }
229
122
  @if $suffixes {
230
123
  @for $i from $start to $end {
231
- #{column-selector($shelves-suffix-name, $i)} {
232
- @include column-suffix($i, $context, $total, $gutter);
124
+ #{class-selector($suffix-name $i)} {
125
+ @include suffix-column($i, $context, $total, $gutter);
233
126
  }
234
127
  }
235
128
  }
236
129
  @if $pushes {
237
130
  @for $i from $start to $end {
238
- #{column-selector($shelves-push-name, $i)} {
239
- @include column-push($i, $context, $total, $gutter);
131
+ #{class-selector($push-name $i)} {
132
+ @include push-column($i, $context, $total, $gutter);
240
133
  }
241
134
  }
242
135
  }
243
136
  @if $pulls {
244
137
  @for $i from $start to $end {
245
- #{column-selector($shelves-pull-name, $i)} {
246
- @include column-pull($i, $context, $total, $gutter);
247
- }
248
- }
249
- }
250
- }
251
-
252
- // Resets the row and column elements so they take up
253
- // the full width of their parent element. All modifying
254
- // effects are removed from columns as well.
255
- //
256
- // $reset-row - Reset the row. Defaults to true.
257
- // $reset-columns - Reset columns (including nested columns).
258
- // Defaults to true
259
- //
260
- @mixin shelves-resets($reset-row: true, $reset-columns: true) {
261
- .#{$shelves-row-name} {
262
- @if $reset-row {
263
- @include reset-row;
264
- }
265
- @if $reset-columns {
266
- #{columns-selector($shelves-column-name)} {
267
- @include reset-column;
138
+ #{class-selector($pull-name $i)} {
139
+ @include pull-column($i, $context, $total, $gutter);
268
140
  }
269
141
  }
270
142
  }