shelves 0.1.0 → 0.2.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.
Files changed (8) hide show
  1. data/lib/shelves.rb +2 -0
  2. data/lib/shelves/version.rb +1 -1
  3. data/scss/shelves/_functions.scss +87 -45
  4. data/scss/shelves/_settings.scss +15 -7
  5. data/scss/shelves/mixins/_base.scss +88 -39
  6. data/scss/shelves/mixins/_generators.scss +189 -114
  7. data/scss/shelves/mixins/_modifiers.scss +48 -12
  8. metadata +4 -4
data/lib/shelves.rb CHANGED
@@ -16,6 +16,8 @@ if defined? ::Rails
16
16
  require 'shelves/extensions/rails'
17
17
  elsif defined? ::Sprockets::Plugin
18
18
  require 'shelves/extensions/sprockets'
19
+ elsif defined? ::Sprockets && Sprockets.respond_to?(:append_path)
20
+ Sprockets.append_path Shelves.stylesheets_path
19
21
  else
20
22
  require 'shelves/extensions/compass'
21
23
  end
data/lib/shelves/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Shelves
2
- VERSION = '0.1.0'
2
+ VERSION = '0.2.0'
3
3
  end
data/scss/shelves/_functions.scss CHANGED
@@ -3,14 +3,32 @@
3
3
  // width relative to that number of columns.
4
4
  //
5
5
  // $context - The number of columns encapsulating the column.
6
- // Defaults to the full width of the grid.
6
+ // Defaults to the the value of $total.
7
+ // $total - The total number of columns in the grid.
8
+ // Defaults to the value of $shelves-columns.
9
+ // $gutter - The width of the gutter in the root context (in %).
10
+ // Defaults to the value of $shelves-gutter.
7
11
  //
8
- @function column-width($context: $shelves-columns) {
9
- @if $context >= $shelves-columns {
10
- @return $shelves-column-width;
12
+ @function column-width(
13
+ $context: nil,
14
+ $total: $shelves-columns,
15
+ $gutter: $shelves-gutter
16
+ ) {
17
+ @if type-of($context) != 'number' or $context > $total {
18
+ $context: $total;
19
+ }
20
+
21
+ @if $context <= 1 {
22
+ @return 100%;
23
+ }
24
+ @else if $context >= $total {
25
+ $column-gutter: column-gutter($total: $total, $gutter: $gutter);
26
+ @return (100% - ($total - 1) * $column-gutter) / $total;
11
27
  }
12
28
  @else {
13
- @return $shelves-column-width * (100% / columns-width($context));
29
+ $column-width: column-width($total: $total, $gutter: $gutter);
30
+ $context-width: columns-width($n: $context, $total: $total, $gutter: $gutter);
31
+ @return $column-width * (100% / $context-width);
14
32
  }
15
33
  }
16
34
 
@@ -18,14 +36,30 @@
18
36
  // this returns the gutter width relative to that number of columns.
19
37
  //
20
38
  // $context - The number of columns encapsulating the gutter.
21
- // Defaults to the full width of the grid.
39
+ // Defaults to the the value of $total.
40
+ // $total - The total number of columns in the grid.
41
+ // Defaults to the value of $shelves-columns.
42
+ // $gutter - The width of the gutter in the root context (in %).
43
+ // Defaults to the value of $shelves-gutter.
22
44
  //
23
- @function column-gutter($context: $shelves-columns) {
24
- @if $context >= $shelves-columns {
25
- @return $shelves-gutter;
45
+ @function column-gutter(
46
+ $context: nil,
47
+ $total: $shelves-columns,
48
+ $gutter: $shelves-gutter
49
+ ) {
50
+ @if type-of($context) != 'number' or $context > $total {
51
+ $context: $total;
52
+ }
53
+
54
+ @if $context <= 1 {
55
+ @return 0%;
56
+ }
57
+ @else if $context >= $total {
58
+ @return $gutter;
26
59
  }
27
60
  @else {
28
- @return $shelves-gutter * (100% / columns-width($context));
61
+ $context-width: columns-width($n: $context, $total: $total);
62
+ @return $gutter * (100% / $context-width);
29
63
  }
30
64
  }
31
65
 
@@ -35,22 +69,34 @@
35
69
  //
36
70
  // $n - The number of columns to measure.
37
71
  // $context - The number of columns encapsulating the columns.
38
- // Defaults to the full width of the grid.
72
+ // Defaults to the the value of $total.
73
+ // $total - The total number of columns in the grid.
74
+ // Defaults to the value of $shelves-columns.
75
+ // $gutter - The width of the gutter in the root context (in %).
76
+ // Defaults to the value of $shelves-gutter.
39
77
  //
40
- @function columns-width($n, $context: $shelves-columns) {
41
- @if $n >= $shelves-columns {
42
- @return 100%;
78
+ @function columns-width(
79
+ $n,
80
+ $context: nil,
81
+ $total: $shelves-columns,
82
+ $gutter: $shelves-gutter
83
+ ) {
84
+ @if type-of($context) != 'number' or $context > $total {
85
+ $context: $total;
43
86
  }
44
87
 
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);
88
+ @if $n <= 1 {
89
+ @return column-width($context, $total, $gutter);
90
+ }
91
+ @else if $n >= $context {
92
+ @return 100%;
93
+ }
94
+ @else {
95
+ $column-width: column-width($context, $total, $gutter);
96
+ $column-gutter: column-gutter($context, $total, $gutter);
97
+
98
+ @return $column-width * $n + $column-gutter * ($n - 1);
51
99
  }
52
-
53
- @return $column-width * $n + $column-gutter * ($n - 1);
54
100
  }
55
101
 
56
102
  // Returns the total distance to shift a column the given
@@ -59,10 +105,19 @@
59
105
  //
60
106
  // $n - The number of columns to measure.
61
107
  // $context - The number of columns encapsulating the columns.
62
- // Defaults to the full width of the grid.
108
+ // Defaults to the the value of $total.
109
+ // $total - The total number of columns in the grid.
110
+ // Defaults to the value of $shelves-columns.
111
+ // $gutter - The width of the gutter in the root context (in %).
112
+ // Defaults to the value of $shelves-gutter.
63
113
  //
64
- @function columns-distance($n, $context: $shelves-columns) {
65
- @return columns-width($n, $context) + column-gutter($context);
114
+ @function columns-distance(
115
+ $n,
116
+ $context: nil,
117
+ $total: $shelves-columns,
118
+ $gutter: $shelves-gutter
119
+ ) {
120
+ @return columns-width($n, $context, $total, $gutter) + column-gutter($context, $total, $gutter);
66
121
  }
67
122
 
68
123
  // Returns a column selector with the given class name,
@@ -79,26 +134,13 @@
79
134
  @return ".#{$class-name}#{$separator}#{$index}";
80
135
  }
81
136
 
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:
137
+ // Returns a selector that will select all columns with the given prefix.
89
138
  //
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.
139
+ // $class-name - The class name to build the selector from.
140
+ // It should NOT have a preceding ".".
141
+ // $separator - The separator between the class name and index.
142
+ // Defaults to $shelves-separator.
95
143
  //
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;
144
+ @function columns-selector($class-name, $separator: $shelves-separator) {
145
+ @return "[class*=\"#{$class-name}#{$separator}\"]";
104
146
  }
data/scss/shelves/_settings.scss CHANGED
@@ -1,17 +1,25 @@
1
1
  // Default Grid Settings
2
- $shelves-width: 1140px !default;
2
+ $shelves-width: 1040px !default;
3
3
  $shelves-max-width: $shelves-width !default;
4
4
  $shelves-min-width: 767px !default;
5
5
  $shelves-columns: 12 !default;
6
- $shelves-mobile-columns: 4 !default;
7
- $shelves-margin: 20px !default;
8
- $shelves-gutter: 20px !default;
6
+ $shelves-margin: 32px !default;
7
+ $shelves-gutter: 24px !default;
9
8
 
10
- // Calculate the column width and gutter
9
+ // Convert the gutter to a percentage if necessary.
11
10
  @if unit($shelves-gutter) != "%" {
12
11
  $shelves-gutter: percentage($shelves-gutter / $shelves-max-width);
13
12
  }
14
- $shelves-column-width: (100% - ($shelves-columns - 1) * $shelves-gutter) / $shelves-columns !default;
13
+
14
+ // Default Tablet Settings
15
+ $shelves-tablet-columns: 6 !default;
16
+ $shelves-tablet-margin: $shelves-margin * 0.75 !default;
17
+ $shelves-tablet-gutter: $shelves-gutter * 1.5 !default;
18
+
19
+ // Default Mobile Settings
20
+ $shelves-mobile-columns: 4 !default;
21
+ $shelves-mobile-margin: $shelves-margin * 0.5 !default;
22
+ $shelves-mobile-gutter: $shelves-gutter * 2.375 !default;
15
23
 
16
24
  // Default Class Names
17
25
  // (Note the lack of the preceding ".")
@@ -23,5 +31,5 @@ $shelves-suffix-name: "suffix" !default;
23
31
  $shelves-push-name: "push" !default;
24
32
  $shelves-pull-name: "pull" !default;
25
33
  $shelves-separator: "-" !default;
34
+ $shelves-tablet-column-name: "tablet-column" !default;
26
35
  $shelves-mobile-column-name: "mobile-column" !default;
27
- $shelves-columns-selector: "[class*=\"#{$shelves-column-name}#{$shelves-separator}\"]" !default;
data/scss/shelves/mixins/_base.scss CHANGED
@@ -11,34 +11,44 @@
11
11
  // Includes the styles for the row element. This includes
12
12
  // a clearfix, widths, and centering.
13
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.
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.
21
23
  //
22
- @mixin row($max-width: $shelves-max-width, $min-width: $shelves-min-width, $mobile-reset: true) {
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
+ ) {
23
30
  @include pie-clearfix;
24
31
  width: 100%;
25
32
 
26
- @if $max-width != false {
33
+ @if type-of($max-width) == 'number' {
27
34
  max-width: $max-width;
28
35
  margin-left: auto;
29
36
  margin-right: auto;
30
37
  }
31
-
32
- @if $min-width != false {
38
+ @if type-of($min-width) == 'number' {
33
39
  min-width: $min-width;
34
40
 
35
41
  .#{$shelves-row-name} {
36
42
  min-width: 0;
37
43
  }
38
44
  }
39
-
40
- @if $mobile-reset != false {
41
- @media screen and (max-width: 767px) {
45
+ @if $reset-if-tablet {
46
+ @media screen and (max-width: 800px) {
47
+ @include reset-row;
48
+ }
49
+ }
50
+ @if $reset-if-mobile {
51
+ @media screen and (max-width: 480px) {
42
52
  @include reset-row;
43
53
  }
44
54
  }
@@ -47,37 +57,58 @@
47
57
  // Creates a column that spans the given number of
48
58
  // grid columns.
49
59
  //
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.
60
+ // $n - The number of columns the element should span.
61
+ // $context - The number of columns encapsulating the element.
62
+ // Defaults to the the value of $total.
63
+ // $total - The total number of columns in the grid.
64
+ // Defaults to the value of $shelves-columns.
65
+ // $gutter - The width of the gutter in the root context (in %).
66
+ // Defaults to the value of $shelves-gutter.
67
+ // $reset-if-tablet - Include styles for resetting the column at
68
+ // tablet sizes. Defaults to true.
69
+ // $reset-if-mobile - Include styles for resetting the column at
70
+ // mobile sizes. Defaults to false.
55
71
  //
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);
72
+ @mixin column(
73
+ $n,
74
+ $context: nil,
75
+ $total: $shelves-columns,
76
+ $gutter: $shelves-gutter,
77
+ $reset-if-tablet: true,
78
+ $reset-if-mobile: false
79
+ ) {
80
+ @include column-base($reset-if-tablet, $reset-if-mobile);
81
+ @include column-gutter($context, $total, $gutter);
82
+ @include columns-width($n, $context, $total, $gutter);
60
83
  }
61
84
 
62
85
  // Sets up an element to be a column in the grid system.
63
86
  // This is used internally to generate grids, Use column($n)
64
87
  // instead to create fully functioning columns.
65
88
  //
66
- // $mobile-reset - Include styles for resetting the column at
67
- // mobile sizes. Defaults to true.
89
+ // $reset-if-tablet - Include styles for resetting the column at
90
+ // tablet sizes. Defaults to true.
91
+ // $reset-if-mobile - Include styles for resetting the column at
92
+ // mobile sizes. Defaults to false.
68
93
  //
69
- @mixin column-base($mobile-reset: true) {
94
+ @mixin column-base($reset-if-tablet: true, $reset-if-mobile: false) {
70
95
  display: block;
71
96
  float: left;
72
97
  min-height: 1px;
73
98
  position: relative;
74
99
 
75
100
  @if $legacy-support-for-ie7 {
101
+ // IE6-7 incorrectly rounds up percentage widths (breaking layouts)
102
+ // http://ejohn.org/blog/sub-pixel-problems-in-css/
76
103
  *margin-right: -1px;
77
104
  }
78
-
79
- @if $mobile-reset != false {
80
- @media screen and (max-width: 767px) {
105
+ @if $reset-if-tablet {
106
+ @media screen and (max-width: 800px) {
107
+ @include reset-column;
108
+ }
109
+ }
110
+ @if $reset-if-mobile {
111
+ @media screen and (max-width: 480px) {
81
112
  @include reset-column;
82
113
  }
83
114
  }
@@ -87,23 +118,41 @@
87
118
  //
88
119
  // $n - The number of columns the element should span.
89
120
  // $context - The number of columns encapsulating the element.
90
- // Defaults to the full width of the grid.
121
+ // Defaults to the the value of $total.
122
+ // $total - The total number of columns in the grid.
123
+ // Defaults to the value of $shelves-columns.
124
+ // $gutter - The width of the gutter in the root context (in %).
125
+ // Defaults to the value of $shelves-gutter.
91
126
  //
92
- @mixin columns-width($n, $context: $shelves-columns) {
93
- width: columns-width($n, $context);
127
+ @mixin columns-width(
128
+ $n,
129
+ $context: nil,
130
+ $total: $shelves-columns,
131
+ $gutter: $shelves-gutter
132
+ ) {
133
+ width: columns-width($n, $context, $total, $gutter);
94
134
  }
95
135
 
96
136
  // Includes the gutter for a column on the grid.
97
137
  //
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.
138
+ // $context - The number of columns encapsulating the element.
139
+ // Defaults to the the value of $total.
140
+ // $total - The total number of columns in the grid.
141
+ // Defaults to the value of $shelves-columns.
142
+ // $gutter - The width of the gutter in the root context (in %).
143
+ // Defaults to the value of $shelves-gutter.
144
+ // $reset-first - Removes the gutter for the first column in a row.
145
+ // Defaults to true.
102
146
  //
103
- @mixin column-gutter($context: $shelves-columns, $include-first-column: true) {
104
- margin-left: column-gutter($context);
147
+ @mixin column-gutter(
148
+ $context: nil,
149
+ $total: $shelves-columns,
150
+ $gutter: $shelves-gutter,
151
+ $reset-first: true
152
+ ) {
153
+ margin-left: column-gutter($context, $total, $gutter);
105
154
 
106
- @if $include-first-column == true {
155
+ @if $reset-first {
107
156
  &:first-child {
108
157
  @include reset-column-gutter;
109
158
  }
data/scss/shelves/mixins/_generators.scss CHANGED
@@ -1,96 +1,178 @@
1
1
  // Generates the entire grid, made up of reusable classes for a modular OOCSS
2
2
  // approach to using the grid. All of the class names can be customized.
3
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.
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.
22
36
  //
23
37
  @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
38
+ $prefixes: true,
39
+ $suffixes: true,
40
+ $pushes: true,
41
+ $pulls: true,
42
+ $nested: true,
43
+ $nested-prefixes: true,
44
+ $nested-suffixes: true,
45
+ $nested-pushes: false,
46
+ $nested-pulls: false,
47
+ $tablet: true,
48
+ $tablet-prefixes: false,
49
+ $tablet-suffixes: false,
50
+ $tablet-pushes: false,
51
+ $tablet-pulls: false,
52
+ $mobile: true,
53
+ $mobile-prefixes: false,
54
+ $mobile-suffixes: false,
55
+ $mobile-pushes: false,
56
+ $mobile-pulls: false
35
57
  ) {
36
58
 
37
- @include shelves-base;
59
+ @include shelves-base($reset-if-tablet: false, $reset-if-mobile: false);
38
60
  @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
61
+ $prefixes: $prefixes,
62
+ $suffixes: $suffixes,
63
+ $pushes: $pushes,
64
+ $pulls: $pulls
44
65
  );
45
66
 
46
- @if $include-nested-columns == true {
67
+ @if $nested {
47
68
  @for $i from 1 to $shelves-columns - 1 {
48
69
  // Loop background through the columns
49
70
  // to cascade the nested column properties.
50
71
  $i: $shelves-columns - $i;
51
72
 
52
73
  #{column-selector($shelves-column-name, $i)} {
74
+ #{columns-selector($shelves-column-name)} {
75
+ @include column-gutter($i, $reset-first: false);
76
+ }
77
+
53
78
  @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
79
+ $context: $i,
80
+ $prefixes: $nested-prefixes,
81
+ $suffixes: $nested-suffixes,
82
+ $pushes: $nested-pushes,
83
+ $pulls: $nested-pulls
62
84
  );
63
85
  }
64
86
  }
65
87
  }
66
88
 
67
- @media screen and (max-width: 767px) {
68
- @if $include-mobile-resets == true {
89
+ @if $tablet {
90
+ @media screen and (max-width: 800px) {
91
+ @if $shelves-tablet-margin != $shelves-margin {
92
+ .#{$shelves-container-name} {
93
+ @include container($shelves-tablet-margin);
94
+ }
95
+ }
96
+
69
97
  @include shelves-resets;
98
+
99
+ // Use the extra specificity from the row class
100
+ // to apply tablet column properties even when nested
101
+ .#{$shelves-row-name} {
102
+ #{columns-selector($shelves-tablet-column-name)} {
103
+ @include column-base($reset-if-tablet: false, $reset-if-mobile: false);
104
+ @include column-gutter($total: $shelves-tablet-columns, $gutter: $shelves-tablet-gutter);
105
+ }
106
+
107
+ @include shelves-columns(
108
+ $column-name: $shelves-tablet-column-name,
109
+ $total: $shelves-tablet-columns,
110
+ $gutter: $shelves-tablet-gutter,
111
+ $prefixes: $tablet-prefixes,
112
+ $suffixes: $tablet-suffixes,
113
+ $pushes: $tablet-pushes,
114
+ $pulls: $tablet-pulls
115
+ );
116
+ }
70
117
  }
71
- @if $include-mobile-columns == true {
72
- @include shelves-mobile-columns;
118
+ }
119
+
120
+ @if $mobile {
121
+ @media screen and (max-width: 480px) {
122
+ @if $shelves-mobile-margin != if($tablet, $shelves-margin, $shelves-tablet-margin) {
123
+ .#{$shelves-container-name} {
124
+ @include container($shelves-mobile-margin);
125
+ }
126
+ }
127
+
128
+ @include shelves-resets($reset-row: $tablet == false);
129
+
130
+ // Use the extra specificity from the row class
131
+ // to apply mobile column properties even when nested
132
+ .#{$shelves-row-name} {
133
+ #{columns-selector($shelves-mobile-column-name)} {
134
+ @include column-base($reset-if-tablet: false, $reset-if-mobile: false);
135
+ @include column-gutter($total: $shelves-mobile-columns, $gutter: $shelves-mobile-gutter);
136
+ }
137
+
138
+ @include shelves-columns(
139
+ $column-name: $shelves-mobile-column-name,
140
+ $total: $shelves-mobile-columns,
141
+ $gutter: $shelves-mobile-gutter,
142
+ $prefixes: $mobile-prefixes,
143
+ $suffixes: $mobile-suffixes,
144
+ $pushes: $mobile-pushes,
145
+ $pulls: $mobile-pulls
146
+ );
147
+ }
73
148
  }
74
149
  }
75
150
  }
76
151
 
77
152
  // Generates the grid's base classes, namely the
78
153
  // the row and container elements.
79
- @mixin shelves-base {
154
+ //
155
+ // $reset-if-tablet - Include styles for resetting the grid at
156
+ // tablet sizes. Defaults to true.
157
+ // $reset-if-mobile - Include styles for resetting the grid at
158
+ // mobile sizes. Defaults to false.
159
+ //
160
+ @mixin shelves-base($reset-if-tablet: true, $reset-if-mobile: false) {
80
161
  .#{$shelves-container-name} {
81
162
  @include container;
82
163
  }
83
164
 
84
165
  .#{$shelves-row-name} {
85
- @include row($mobile-reset: false);
166
+ @include row($reset-if-tablet: $reset-if-tablet, $reset-if-mobile: $reset-if-mobile);
86
167
  }
87
168
 
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} {
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);
172
+ }
173
+
174
+ .#{$shelves-row-name} {
175
+ #{columns-selector($shelves-column-name)} {
94
176
  &:first-child {
95
177
  @include reset-column-gutter;
96
178
  }
@@ -102,67 +184,70 @@
102
184
  // the columns. This can be used in different contexts, varying
103
185
  // the number of columns if necessary.
104
186
  //
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.
187
+ // $column-name - The name of the column to generate widths for.
188
+ // Defaults to $shelves-column-name
189
+ // $start - Where to start the loop. Defaults to 1.
190
+ // $end - Where to end the loop.
191
+ // Defaults to the value of $total.
192
+ // $context - The context of generated classes.
193
+ // Defaults to the value of $total.
194
+ // $total - The total number of columns in the grid.
195
+ // Defaults to the value of $shelves-columns.
196
+ // $gutter - The width of the gutter in the root context (in %).
197
+ // 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.
115
202
  //
116
203
  @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
204
+ $column-name: $shelves-column-name,
205
+ $start: 1,
206
+ $end: nil,
207
+ $context: nil,
208
+ $total: $shelves-columns,
209
+ $gutter: $shelves-gutter,
210
+ $prefixes: true,
211
+ $suffixes: true,
212
+ $pushes: true,
213
+ $pulls: true
125
214
  ) {
126
- @if $include-column-gutter {
127
- #{$shelves-columns-selector} {
128
- @include column-gutter($context, false);
129
- }
215
+ @if type-of($context) != 'number' or $context > $total {
216
+ $context: $total;
217
+ }
218
+ @if type-of($end) != 'number' or $end > $context {
219
+ $end: $context;
130
220
  }
131
-
132
221
  @for $i from $start to $end {
133
- #{column-selector($shelves-column-name, $i)} {
134
- @include columns-width($i, $context);
222
+ #{column-selector($column-name, $i)} {
223
+ @include columns-width($i, $context, $total, $gutter);
135
224
  }
136
225
  }
137
-
138
- @if $include-prefix == true {
226
+ @if $prefixes {
139
227
  @for $i from $start to $end {
140
228
  #{column-selector($shelves-prefix-name, $i)} {
141
- @include column-prefix($i, $context);
229
+ @include column-prefix($i, $context, $total, $gutter);
142
230
  }
143
231
  }
144
232
  }
145
-
146
- @if $include-suffix == true {
233
+ @if $suffixes {
147
234
  @for $i from $start to $end {
148
235
  #{column-selector($shelves-suffix-name, $i)} {
149
- @include column-suffix($i, $context);
236
+ @include column-suffix($i, $context, $total, $gutter);
150
237
  }
151
238
  }
152
239
  }
153
-
154
- @if $include-push == true {
240
+ @if $pushes {
155
241
  @for $i from $start to $end {
156
242
  #{column-selector($shelves-push-name, $i)} {
157
- @include column-push($i, $context);
243
+ @include column-push($i, $context, $total, $gutter);
158
244
  }
159
245
  }
160
246
  }
161
-
162
- @if $include-pull == true {
247
+ @if $pulls {
163
248
  @for $i from $start to $end {
164
249
  #{column-selector($shelves-pull-name, $i)} {
165
- @include column-pull($i, $context);
250
+ @include column-pull($i, $context, $total, $gutter);
166
251
  }
167
252
  }
168
253
  }
@@ -171,29 +256,19 @@
171
256
  // Resets the row and column elements so they take up
172
257
  // the full width of their parent element. All modifying
173
258
  // effects are removed from columns as well.
174
- @mixin shelves-resets {
259
+ //
260
+ // $reset-row - Reset the row. Defaults to true.
261
+ // $reset-columns - Reset columns (including nested columns).
262
+ // Defaults to true
263
+ //
264
+ @mixin shelves-resets($reset-row: true, $reset-columns: true) {
175
265
  .#{$shelves-row-name} {
176
- @include reset-row;
177
- }
178
-
179
- #{$shelves-columns-selector} {
180
- &,
181
- & #{$shelves-columns-selector} {
182
- @include reset-column;
266
+ @if $reset-row {
267
+ @include reset-row;
183
268
  }
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);
269
+ @if $reset-columns {
270
+ #{columns-selector($shelves-column-name)} {
271
+ @include reset-column;
197
272
  }
198
273
  }
199
274
  }
data/scss/shelves/mixins/_modifiers.scss CHANGED
@@ -3,10 +3,19 @@
3
3
  //
4
4
  // $n - The number of columns to pad.
5
5
  // $context - The number of columns encapsulating the element.
6
- // Defaults to the full width of the grid.
6
+ // Defaults to the the value of $total.
7
+ // $total - The total number of columns in the grid.
8
+ // Defaults to the value of $shelves-columns.
9
+ // $gutter - The width of the gutter in the root context (in %).
10
+ // Defaults to the value of $shelves-gutter.
7
11
  //
8
- @mixin column-prefix($n, $context: $shelves-columns) {
9
- padding-left: columns-distance($n, $context);
12
+ @mixin column-prefix(
13
+ $n,
14
+ $context: nil,
15
+ $total: $shelves-columns,
16
+ $gutter: $shelves-gutter
17
+ ) {
18
+ padding-left: columns-distance($n, $context, $total, $gutter);
10
19
  }
11
20
 
12
21
  // Adds a padding suffix (which shifts the column to the left)
@@ -14,10 +23,19 @@
14
23
  //
15
24
  // $n - The number of columns to pad.
16
25
  // $context - The number of columns encapsulating the element.
17
- // Defaults to the full width of the grid.
26
+ // Defaults to the the value of $total.
27
+ // $total - The total number of columns in the grid.
28
+ // Defaults to the value of $shelves-columns.
29
+ // $gutter - The width of the gutter in the root context (in %).
30
+ // Defaults to the value of $shelves-gutter.
18
31
  //
19
- @mixin column-suffix($n, $context: $shelves-columns) {
20
- padding-right: columns-distance($n, $context);
32
+ @mixin column-suffix(
33
+ $n,
34
+ $context: nil,
35
+ $total: $shelves-columns,
36
+ $gutter: $shelves-gutter
37
+ ) {
38
+ padding-right: columns-distance($n, $context, $total, $gutter);
21
39
  }
22
40
 
23
41
  // Reorder the content by shifting the column to the right. This
@@ -25,10 +43,19 @@
25
43
  //
26
44
  // $n - The number of columns to shift.
27
45
  // $context - The number of columns encapsulating the element.
28
- // Defaults to the full width of the grid.
46
+ // Defaults to the the value of $total.
47
+ // $total - The total number of columns in the grid.
48
+ // Defaults to the value of $shelves-columns.
49
+ // $gutter - The width of the gutter in the root context (in %).
50
+ // Defaults to the value of $shelves-gutter.
29
51
  //
30
- @mixin column-push($n, $context: $shelves-columns) {
31
- left: columns-distance($n, $context);
52
+ @mixin column-push(
53
+ $n,
54
+ $context: nil,
55
+ $total: $shelves-columns,
56
+ $gutter: $shelves-gutter
57
+ ) {
58
+ left: columns-distance($n, $context, $total, $gutter);
32
59
  }
33
60
 
34
61
  // Reorder the content by shifting the column to the left. This
@@ -36,8 +63,17 @@
36
63
  //
37
64
  // $n - The number of columns to shift.
38
65
  // $context - The number of columns encapsulating the element.
39
- // Defaults to the full width of the grid.
66
+ // Defaults to the the value of $total.
67
+ // $total - The total number of columns in the grid.
68
+ // Defaults to the value of $shelves-columns.
69
+ // $gutter - The width of the gutter in the root context (in %).
70
+ // Defaults to the value of $shelves-gutter.
40
71
  //
41
- @mixin column-pull($n, $context: $shelves-columns) {
42
- right: columns-distance($n, $context);
72
+ @mixin column-pull(
73
+ $n,
74
+ $context: nil,
75
+ $total: $shelves-columns,
76
+ $gutter: $shelves-gutter
77
+ ) {
78
+ right: columns-distance($n, $context, $total, $gutter);
43
79
  }
metadata CHANGED
@@ -1,13 +1,13 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: shelves
3
3
  version: !ruby/object:Gem::Version
4
- hash: 27
4
+ hash: 23
5
5
  prerelease:
6
6
  segments:
7
7
  - 0
8
- - 1
8
+ - 2
9
9
  - 0
10
- version: 0.1.0
10
+ version: 0.2.0
11
11
  platform: ruby
12
12
  authors:
13
13
  - Pete Browne
@@ -15,7 +15,7 @@ autorequire:
15
15
  bindir: bin
16
16
  cert_chain: []
17
17
 
18
- date: 2012-03-22 00:00:00 Z
18
+ date: 2012-03-29 00:00:00 Z
19
19
  dependencies:
20
20
  - !ruby/object:Gem::Dependency
21
21
  name: sass