shelves 0.6.0 → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
-
}
|