groundworkcss 0.2.2 → 0.2.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (58) hide show
  1. data/README.md +11 -33
  2. data/lib/groundworkcss/generators/install_generator.rb +1 -1
  3. data/lib/groundworkcss/version.rb +1 -1
  4. data/vendor/assets/fonts/groundworkcss/FontAwesome.otf +0 -0
  5. data/vendor/assets/fonts/groundworkcss/fontawesome-webfont.eot +0 -0
  6. data/vendor/assets/fonts/groundworkcss/fontawesome-webfont.svg +153 -38
  7. data/vendor/assets/fonts/groundworkcss/fontawesome-webfont.ttf +0 -0
  8. data/vendor/assets/fonts/groundworkcss/fontawesome-webfont.woff +0 -0
  9. data/vendor/assets/stylesheets/groundworkcss/_settings.scss +301 -1
  10. data/vendor/assets/stylesheets/groundworkcss/base/{_all.scss → _all-base.scss} +2 -3
  11. data/vendor/assets/stylesheets/groundworkcss/base/_animations.scss +1 -1
  12. data/vendor/assets/stylesheets/groundworkcss/base/_global.scss +4 -23
  13. data/vendor/assets/stylesheets/groundworkcss/base/_grid.scss +53 -26
  14. data/vendor/assets/stylesheets/groundworkcss/base/_helpers.scss +105 -56
  15. data/vendor/assets/stylesheets/groundworkcss/base/_reset.scss +34 -34
  16. data/vendor/assets/stylesheets/groundworkcss/core/{_all.scss → _all-core.scss} +1 -1
  17. data/vendor/assets/stylesheets/groundworkcss/core/_breakpoints.scss +22 -0
  18. data/vendor/assets/stylesheets/groundworkcss/core/_defaults.scss +196 -93
  19. data/vendor/assets/stylesheets/groundworkcss/core/_mixins.scss +132 -131
  20. data/vendor/assets/stylesheets/groundworkcss/form/_all-form.scss +11 -0
  21. data/vendor/assets/stylesheets/groundworkcss/form/_forms.scss +57 -112
  22. data/vendor/assets/stylesheets/groundworkcss/form/_tiles.scss +9 -11
  23. data/vendor/assets/stylesheets/groundworkcss/groundwork-ie.scss +7 -8
  24. data/vendor/assets/stylesheets/groundworkcss/groundwork.scss +11 -14
  25. data/vendor/assets/stylesheets/groundworkcss/nav/_all-nav.scss +12 -0
  26. data/vendor/assets/stylesheets/groundworkcss/nav/_buttons.scss +22 -15
  27. data/vendor/assets/stylesheets/groundworkcss/nav/_navigation.scss +26 -29
  28. data/vendor/assets/stylesheets/groundworkcss/nav/_tabs.scss +39 -37
  29. data/vendor/assets/stylesheets/groundworkcss/responsive/_all-responsive.scss +14 -0
  30. data/vendor/assets/stylesheets/groundworkcss/responsive/_desktop.scss +5 -3
  31. data/vendor/assets/stylesheets/groundworkcss/responsive/_ipad.scss +5 -3
  32. data/vendor/assets/stylesheets/groundworkcss/responsive/_mobile.scss +6 -4
  33. data/vendor/assets/stylesheets/groundworkcss/responsive/_small-tablet.scss +20 -16
  34. data/vendor/assets/stylesheets/groundworkcss/social-icons-png.scss +295 -0
  35. data/vendor/assets/stylesheets/groundworkcss/{misc/_social-icons.scss → social-icons-svg.scss} +8 -5
  36. data/vendor/assets/stylesheets/groundworkcss/type/{_all.scss → _all-type.scss} +0 -1
  37. data/vendor/assets/stylesheets/groundworkcss/type/_typography.scss +168 -161
  38. data/vendor/assets/stylesheets/groundworkcss/type/_webfonts.scss +1 -1
  39. data/vendor/assets/stylesheets/groundworkcss/ui/_all-ui.scss +14 -0
  40. data/vendor/assets/stylesheets/groundworkcss/ui/_callouts.scss +31 -18
  41. data/vendor/assets/stylesheets/groundworkcss/ui/_messages.scss +31 -18
  42. data/vendor/assets/stylesheets/groundworkcss/ui/_modals.scss +6 -8
  43. data/vendor/assets/stylesheets/groundworkcss/ui/_tables.scss +6 -5
  44. data/vendor/assets/stylesheets/groundworkcss/ui/_tooltips.scss +15 -14
  45. metadata +28 -25
  46. checksums.yaml +0 -7
  47. data/vendor/assets/stylesheets/groundworkcss/_rails-settings.scss +0 -202
  48. data/vendor/assets/stylesheets/groundworkcss/font-awesome-ie7.min.css +0 -22
  49. data/vendor/assets/stylesheets/groundworkcss/form/_all.scss +0 -10
  50. data/vendor/assets/stylesheets/groundworkcss/index.scss +0 -3
  51. data/vendor/assets/stylesheets/groundworkcss/magnific-popup.css +0 -393
  52. data/vendor/assets/stylesheets/groundworkcss/misc/_all.scss +0 -9
  53. data/vendor/assets/stylesheets/groundworkcss/nav/_all.scss +0 -11
  54. data/vendor/assets/stylesheets/groundworkcss/no-svg.scss +0 -355
  55. data/vendor/assets/stylesheets/groundworkcss/placeholder_polyfill.css +0 -32
  56. data/vendor/assets/stylesheets/groundworkcss/responsive/_all.scss +0 -13
  57. data/vendor/assets/stylesheets/groundworkcss/type/_font-awesome.scss +0 -542
  58. data/vendor/assets/stylesheets/groundworkcss/ui/_all.scss +0 -13
@@ -1 +1,301 @@
1
- @import "rails-settings";
1
+ // =============================================
2
+ // Custom Settings
3
+ // Last Updated:2013-6-24
4
+ // =============================================
5
+
6
+
7
+ ///////////////////////
8
+ // framework //
9
+ ///////////////////////
10
+
11
+ // file paths
12
+ // $root_path: "../"; // path to HTML document root (relative from CSS)
13
+ // $images_path: "images/"; // path to images (relative from $root_path)
14
+ // $fonts_path: "fonts/"; // path to fonts (relative from $root_path)
15
+ // $boxsizing_path: "/js/libs/boxsizing.htc"; // path to box sizing polyfill (change to absolute path from HTML document root)
16
+
17
+ // build options
18
+ // $reset: true; // enable CSS reset (recommended)
19
+ // elements that will be reset (refine this to only include elements that you actually use in your markup patterns for optimal performance)
20
+ // $reset-elements: html body
21
+ // div span header footer aside nav menu section article details
22
+ // h1 h2 h3 h4 h5 h6 p
23
+ // ol ul li dl dt dd
24
+ // em small big strong b u i sub sup del strike
25
+ // blockquote cite pre code time address
26
+ // a img center hr
27
+ // form fieldset legend label input textarea button
28
+ // table caption tbody thead tfoot tr th td
29
+ // iframe object canvas audio video;
30
+
31
+ // $global-tags: true; // enable output in base/_global.scss (recommended)
32
+
33
+ // grid settings
34
+ // $grid-classes: true; // enable output of grid classes (recommended)
35
+ // $numerators: one two three four five six seven eight nine ten eleven twelve;
36
+ // $denominators: whole half third fourth fifth sixth seventh eighth ninth tenth eleventh twelfth;
37
+ // $denominators-plural: wholes halves thirds fourths fifths sixths sevenths eighths ninths tenths elevenths twelfths;
38
+ // $grid-adapters: $one-whole $one-half $one-third $one-fourth $one-fifth;
39
+ // $max-width: 1200px; // maximum container width (i.e. - 960px)
40
+ // $gutter: 10px; // gutter spacing (used by padded/gapped helpers, elements with padding, etc.)
41
+
42
+ // helper settings
43
+ // $layout-classes: true; // enable output of layout helpers (recommended)
44
+ // $layout-helpers: inline block
45
+ // hidden
46
+ // disabled
47
+ // zero
48
+ // pull-right pull-left clear
49
+ // center;
50
+
51
+ // $positioning-classes: true; // enable output of position helpers (optional)
52
+
53
+ // $size-classes: true; // enable output of size helpers (recommended)
54
+ // $size-helpers: small large;
55
+
56
+ // $typography-classes: true; // enable output of typography helpers (recommended)
57
+ // $typography-helpers: align-top align-right align-bottom align-left align-center justify
58
+ // truncate;
59
+
60
+ // $border-classes: true; // enable output of border helpers (optional)
61
+ // $border-helpers: bordered border-right border-left border-top border-bottom;
62
+
63
+ // round/square
64
+ // $default-radius: 4px;
65
+ // $radius-classes: true; // enable output of radius helpers (optional)
66
+ // $radius-helpers: square round;
67
+
68
+ // rotation
69
+ // $rotation-classes: true; // enable output of rotational helpers (optional)
70
+ // $rotation-helpers: rotate-90 rotate-180 rotate-270 rotate-90-ctr rotate-180-ctr rotate-270-ctr;
71
+
72
+ // spinners
73
+ // $spin-classes: true; // enable output of spin helpers (optional)
74
+ // $spin-helpers: spin spin-once spin-twice spin-thrice
75
+ // spin-fast spin-fast-once spin-fast-twice spin-fast-thrice
76
+ // spin-slow spin-slow-once spin-slow-twice spin-slow-thrice;
77
+
78
+ // spacers
79
+ // $spacer-classes: true; // enable output of spacer helpers (recommended)
80
+ // $spacer-helpers: padded pad-top pad-right pad-bottom pad-left
81
+ // gapped gap-top gap-right gap-bottom gap-left;
82
+
83
+ // spacer multipliers
84
+ // $spacer-mod-classes: true; // enable output of spacer modifiers (optional)
85
+ // $spacer-modifiers: double triple;
86
+
87
+ // states
88
+ // $ui-states: disabled info alert warning error success;
89
+ // $button-states: on active disabled info alert warning error success;
90
+
91
+ // typography
92
+ // $type-tags: true; // enable output of type selectors (recommended)
93
+ // $type-elements: h1 h2 h3 h4 h5 h6 p
94
+ // ul ol dl
95
+ // blockquote cite
96
+ // small big em b strong
97
+ // sup sub
98
+ // del strike
99
+ // code pre;
100
+ // $type-colors: true; // enable output of colors classes (optional)
101
+ // $type-classes: false; // enable output of type classes (optional)
102
+ // $type-classnames: h1 h2 h3 h4 h5 h6 p
103
+ // ul ol dl
104
+ // blockquote cite
105
+ // small big large
106
+ // b bold strong
107
+ // em italic
108
+ // sup sub
109
+ // del strike
110
+ // code pre
111
+ // invalid valid
112
+ // unstyled;
113
+ // $styled-lists: true; // enable output of styled lists (optional)
114
+
115
+ // webfonts
116
+ // $webfont-classes: true; // enable output of webfont classes (optional)
117
+
118
+ // buttons
119
+ // $button-tags: true; // enable output of button selectors (recommended)
120
+ // $button-classes: true; // enable output of button classes (recommended)
121
+ // $button-modifiers: small large on active square round block;
122
+
123
+ // navigation
124
+ // $nav-tags: true; // enable output of nav selectors (optional)
125
+ // $nav-classes: true;
126
+
127
+ // tabs
128
+ // $tab-classes: true; // enable output of tab classes (optional)
129
+
130
+ // forms
131
+ // $form-tags: true; // enable output of form selectors (recommended)
132
+ // $form-classes: false; // enable output of form classes (optional)
133
+ // $form-elements: fieldset legend label input textarea;
134
+
135
+ // tiles
136
+ // $tiles: true; // enable output of tile classes (optional)
137
+ // $tile-modifiers: on active small large square round disabled;
138
+
139
+ // message & callout boxes
140
+ // $ui-classes: true;
141
+ // $ui-modifiers: dismissible;
142
+
143
+ // tables
144
+ // $table-tags: true;
145
+ // $table-classes: true;
146
+
147
+ // ARIA role selectors (WIP - nav, buttons, tabs, etc.)
148
+ // $aria-selectors: true; // enable Aria role selectors
149
+
150
+
151
+ ///////////////////////
152
+ // typography //
153
+ ///////////////////////
154
+
155
+ // typography
156
+ $base-font-size: 14px; // base font size for Compass vertical rhythm
157
+ $base-line-height: 18px; // base line height for Compass vertical rhythm
158
+ // $font-family: Helvetica, Arial, Geneva, sans-serif;
159
+
160
+
161
+ ///////////////////////
162
+ // web fonts //
163
+ ///////////////////////
164
+
165
+ // font names (no spaces or special characters, these are used to build selectors)
166
+ // $web-font-names: AverageSans,
167
+ // AmericanTypewriter;
168
+ // font files (must all be named the same as listed below and include .eot, .woff and .ttf file types)
169
+ // $web-font-files: average-sans-webfont,
170
+ // americantypewriterstd-bold;
171
+
172
+
173
+ ///////////////////////
174
+ // colors //
175
+ ///////////////////////
176
+
177
+ // base styles
178
+ // $background-color: #ffffff;
179
+ // $font-color: #2b2b2d;
180
+
181
+ // links
182
+ // $link-color: #489AC1;
183
+ // $link-active: #198D98;
184
+
185
+ // selection highlight
186
+ // $selection-color: $link-color;
187
+ // $selection-text: #ffffff;
188
+
189
+ // borders
190
+ // $border-thickness: 1px;
191
+ // $border-style: solid;
192
+ // $border-color: #dddddd;
193
+ // $border: #{$border-thickness} #{$border-style} #{$border-color};
194
+
195
+ // buttons
196
+ // $button-color: #1DABB8;
197
+ // $button-border-color: darken($button-color, 10%);
198
+ // $button-active: #198D98;
199
+ // $button-text: #ffffff;
200
+ // $button-active-text: #ffffff;
201
+
202
+ // info
203
+ // $info-color: #3a87ad; // text only
204
+ // $info-text: #ffffff; // box text
205
+ // $info-background: #d9edf7;
206
+ // $info-border: #bce8f1;
207
+
208
+ // alert
209
+ // $alert-color: #c09853; // text only
210
+ // $alert-text: #ffffff; // box text
211
+ // $alert-background: #fcf8e3;
212
+ // $alert-border: #fbeee0;
213
+
214
+ // error
215
+ // $error-color: #b94a48; // text only
216
+ // $error-text: #ffffff; // box text
217
+ // $error-background: #f2dede;
218
+ // $error-border: #eed3d7;
219
+
220
+ // warning
221
+ // $warning-color: #FF971E; // text only
222
+ // $warning-text: #ffffff; // box text
223
+ // $warning-background: #FFE5C7;
224
+ // $warning-border: #FFDBB3;
225
+
226
+ // success
227
+ // $success-color: #468847; // text only
228
+ // $success-text: #ffffff; // box text
229
+ // $success-background: #dff0d8;
230
+ // $success-border: #d6e9c6;
231
+
232
+ // disabled
233
+ // $disabled-color: #808080; // text only
234
+ // $disabled-text: #ffffff; // box text
235
+ // $disabled-background: lighten($disabled-color, 20%);
236
+ // $disabled-border: darken($disabled-color, 10%);
237
+
238
+ // modifier states
239
+ // $state-name: "info" "alert" "warning" "error" "success" "disabled" ;
240
+ // $state-code: $info-color $alert-color $warning-color $error-color $success-color $disabled-color ;
241
+ // $state-text: $info-text $alert-text $warning-text $error-text $success-text $disabled-text ;
242
+
243
+ // modifier colors
244
+ // $green: #2ecc71;
245
+ // $blue: #3498db;
246
+ // $purple: #9b59b6;
247
+ // $yellow: #f1c40f;
248
+ // $orange: #e67e22;
249
+ // $red: #e74c3c;
250
+ // $pink: #f02475;
251
+ // $turquoise: #1abc9c;
252
+ // $asphalt: #34495e;
253
+
254
+ // $modifier-name: "green" "blue" "purple" "yellow" "orange" "red" "pink" "turquoise" "asphalt" ;
255
+ // $modifier-code: $green $blue $purple $yellow $orange $red $pink $turquoise $asphalt ;
256
+ // $modifier-text: $white $white $white $white $white $white $white $white $white ;
257
+
258
+
259
+ ///////////////////////
260
+ // modals //
261
+ ///////////////////////
262
+
263
+ // overlay
264
+ // $overlay-color: #0b0b0b; // Color of overlay screen
265
+ // $overlay-opacity: 0.5; // Opacity of overlay screen
266
+ // $shadow: 0 0 8px rgba(0, 0, 0, 0.6); // Shadow on image or iframe
267
+
268
+ // spacing
269
+ // $popup-padding-left: 8px; // Padding from left and from right side
270
+ // $popup-padding-left-mobile: 6px; // Same as above, but is applied when width of window is less than 800px
271
+
272
+ // $z-index-base: 500; // Base z-index of popup
273
+
274
+ // controls
275
+ // $include-arrows: true; // Include styles for nav arrows
276
+ // $controls-opacity: 0.65; // Opacity of controls
277
+ // $controls-color: #FFF; // Color of controls
278
+ // $inner-close-icon-color: #333; // Color of close button when inside
279
+ // $controls-text-color: #CCC; // Color of preloader and '1 of X' indicator
280
+ // $controls-text-color-hover: #FFF; // Hover color of preloader and '1 of X' indicator
281
+ // $IE7support: true; // Very basic IE7 support
282
+
283
+ // Inline-type options
284
+ // $modal-max-width: $max-width; // Maximum width of inline modals
285
+
286
+ // Iframe-type options
287
+ // $include-iframe-type: true; // Enable Iframe-type popups
288
+ // $iframe-padding-top: ($gutter*4); // Iframe padding top
289
+ // $iframe-background: #000; // Background color of iframes
290
+ // $iframe-max-width: $max-width; // Maximum width of iframes
291
+ // $iframe-ratio: 9/16; // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.)
292
+
293
+ // Image-type options
294
+ // $include-image-type: true; // Enable Image-type popups
295
+ // $image-padding-top: ($gutter*4); // Image padding top
296
+ // $image-padding-bottom: ($gutter*4); // Image padding bottom
297
+ // $include-mobile-layout-for-image: true; // Removes paddings from top and bottom
298
+
299
+ // Image caption options
300
+ // $caption-title-color: #F3F3F3; // Caption title color
301
+ // $caption-subtitle-color: #BDBDBD; // Caption subtitle color
@@ -1,11 +1,10 @@
1
1
  // =============================================
2
2
  // GroundworkCSS by Gary Hepting
3
- // Last Updated:2013-4-24
3
+ // Last Updated:2013-6-23
4
4
  // =============================================
5
5
 
6
6
 
7
- // reset (box sizing)
8
7
  @import "reset";
9
8
  @import "global";
10
- @import "grid";
11
9
  @import "helpers";
10
+ @import "grid";
@@ -6,7 +6,7 @@
6
6
 
7
7
 
8
8
 
9
- // spin (required by helpers)
9
+ // spin (required by spinner helpers)
10
10
  @-moz-keyframes spin {
11
11
  0% { -moz-transform: rotate(0deg); }
12
12
  100% { -moz-transform: rotate(359deg); }
@@ -1,14 +1,9 @@
1
1
  // =============================================
2
2
  // Global Styles
3
- // Last Updated:2013-4-24
3
+ // Last Updated:2013-6-23
4
4
  // =============================================
5
5
 
6
6
 
7
-
8
-
9
- ///////////////////////
10
- // global styles //
11
- ///////////////////////
12
7
  %html {
13
8
  width:100%;
14
9
  height:100%;
@@ -34,13 +29,11 @@
34
29
  border:none;
35
30
  }
36
31
 
37
- @if $tags {
32
+ @if $global-tags {
38
33
  $elements: html hr img;
39
34
  @for $i from 1 through length($elements) {
40
- @if not index($tag-elements, nth($elements, $i)) == false {
41
- #{nth($elements, $i)} {
42
- @extend %#{nth($elements, $i)};
43
- }
35
+ #{nth($elements, $i)} {
36
+ @extend %#{nth($elements, $i)};
44
37
  }
45
38
  }
46
39
  html, body {
@@ -50,15 +43,3 @@
50
43
  @extend %img;
51
44
  }
52
45
  }
53
-
54
- @if $classes {
55
- $names: html document hr img;
56
- @for $i from 1 through length($names) {
57
- .#{nth($names, $i)} {
58
- @extend %#{nth($names, $i)};
59
- }
60
- }
61
- .html, .body {
62
- @extend %document;
63
- }
64
- }
@@ -39,41 +39,35 @@
39
39
  margin-right: auto !important;
40
40
  }
41
41
 
42
- @if $classes {
42
+ @if $grid-classes {
43
43
  .container { @extend %container; }
44
44
  .row { @extend %row; }
45
45
  .column { @extend %column; }
46
46
  .centered { @extend %centered; }
47
47
  }
48
48
 
49
- $selectors: if($classes, "%" ".", "%");
50
-
51
- $numbers: one two three four five six seven eight nine ten eleven twelve;
52
- $fractions: whole half third fourth fifth sixth seventh eighth ninth tenth eleventh twelfth;
53
- $fractions-plural: wholes halves thirds fourths fifths sixths sevenths eighths ninths tenths elevenths twelfths;
54
- $adapters: $one-half $one-third $one-fourth $one-fifth;
55
-
56
- // function to generate the grid code (placeholders and optionally, classes)
49
+ // generate grid selectors
50
+ $selectors: if($grid-classes, "%" ".", "%");
57
51
  @for $i from 1 through length($selectors) {
58
- @for $j from 1 through length($numbers) {
59
- #{nth($selectors, $i) + nth($fractions, $j)},
60
- #{nth($selectors, $i) + nth($fractions-plural, $j)} {
52
+ @for $j from 1 through length($numerators) {
53
+ #{nth($selectors, $i) + nth($denominators, $j)},
54
+ #{nth($selectors, $i) + nth($denominators-plural, $j)} {
61
55
  width: percentage(1 / $j);
62
56
  @extend %column;
63
57
  @for $width from 1 through $j {
64
- &#{nth($selectors, $i) + nth($numbers, $width)} {
58
+ &#{nth($selectors, $i) + nth($numerators, $width)} {
65
59
  width: percentage($width / $j);
66
60
  @extend %column;
67
61
  }
68
62
  }
69
63
  @for $right-left-skip from 1 through $j - 1 {
70
- &#{nth($selectors, $i) + "right-" + nth($numbers, $right-left-skip)} {
64
+ &#{nth($selectors, $i) + "right-" + nth($numerators, $right-left-skip)} {
71
65
  left: percentage($right-left-skip / $j);
72
66
  }
73
- &#{nth($selectors, $i) + "left-" + nth($numbers, $right-left-skip)} {
67
+ &#{nth($selectors, $i) + "left-" + nth($numerators, $right-left-skip)} {
74
68
  right: percentage($right-left-skip / $j);
75
69
  }
76
- &#{nth($selectors, $i) + "skip-" + nth($numbers, $right-left-skip)} {
70
+ &#{nth($selectors, $i) + "skip-" + nth($numerators, $right-left-skip)} {
77
71
  margin-left: percentage($right-left-skip / $j);
78
72
  }
79
73
  }
@@ -83,21 +77,34 @@ $adapters: $one-half $one-third $one-fourth $one-fifth;
83
77
 
84
78
  // small-tablet grid adapters
85
79
  @media #{$small-tablet} {
86
- @for $i from 1 through 4 {
87
- .#{nth($numbers, ($i + 1))}-up-small-tablet {
88
- width: nth($adapters, $i) !important;
80
+ @for $i from 1 through length($grid-adapters) {
81
+ .#{nth($numerators, ($i))}-up-small-tablet {
82
+ width: nth($grid-adapters, $i) !important;
89
83
  clear: none !important;
90
84
  float: left !important;
91
85
  }
92
86
  }
93
87
  }
88
+ // grid adapter nth clearfix
89
+ @media #{$small-tablet} and #{$not-mobile} {
90
+ @for $i from 1 through length($grid-adapters) {
91
+ .#{nth($numerators, ($i))}-up-small-tablet {
92
+ &:nth-child(#{$i + 1}) {
93
+ clear: both !important;
94
+ }
95
+ }
96
+ }
97
+ }
94
98
  // mobile grid adapters
95
99
  @media #{$mobile} {
96
- @for $i from 1 through 4 {
97
- .#{nth($numbers, ($i + 1))}-up-mobile {
98
- width: nth($adapters, $i) !important;
100
+ @for $i from 1 through length($grid-adapters) {
101
+ .#{nth($numerators, ($i))}-up-mobile {
102
+ width: nth($grid-adapters, $i) !important;
99
103
  clear: none !important;
100
104
  float: left !important;
105
+ &:nth-child(#{$i + 1}) {
106
+ clear: both !important;
107
+ }
101
108
  }
102
109
  }
103
110
  }
@@ -115,7 +122,7 @@ $adapters: $one-half $one-third $one-fourth $one-fifth;
115
122
  %ninth, %ninths,
116
123
  %tenth, %tenths,
117
124
  %eleventh, %elevenths,
118
- %twelfth, %twelfths#{if($classes, ", .half, .halves, .third, .thirds, .fourth, .fourths, .fifth, .fifths, .sixth, .sixths, .seventh, .sevenths, .eighth, .eighths, .ninth, .ninths, .tenth, .tenths, .eleventh, .elevenths, .twelfth, .twelfths", "")} {
125
+ %twelfth, %twelfths#{if($grid-classes, ", .half, .halves, .third, .thirds, .fourth, .fourths, .fifth, .fifths, .sixth, .sixths, .seventh, .sevenths, .eighth, .eighths, .ninth, .ninths, .tenth, .tenths, .eleventh, .elevenths, .twelfth, .twelfths", "")} {
119
126
  @if $both {
120
127
  &:not(.small-tablet):not(.mobile):not(.two-up-mobile):not(.three-up-mobile):not(.four-up-mobile):not(.five-up-mobile):not(.two-up-small-tablet):not(.three-up-small-tablet):not(.four-up-small-tablet):not(.five-up-small-tablet) {
121
128
  @include grid-collapse();
@@ -129,6 +136,26 @@ $adapters: $one-half $one-third $one-fourth $one-fifth;
129
136
  }
130
137
  }
131
138
 
139
+ @media #{$small-tablet} and #{$not-mobile} {
140
+ @for $i from 1 through length($grid-adapters) {
141
+ .#{nth($numerators, ($i))}-up-small-tablet {
142
+ &:nth-child(#{$i + 1}) {
143
+ clear: both !important;
144
+ }
145
+ }
146
+ }
147
+ }
148
+
149
+ @media #{$mobile} {
150
+ @for $i from 1 through length($grid-adapters) {
151
+ .#{nth($numerators, ($i))}-up-mobile {
152
+ &:nth-child(#{$i + 1}) {
153
+ clear: both !important;
154
+ }
155
+ }
156
+ }
157
+ }
158
+
132
159
  @mixin grid-collapse() {
133
160
  width:100% !important;
134
161
  float:none;
@@ -144,7 +171,7 @@ $adapters: $one-half $one-third $one-fourth $one-fifth;
144
171
  &%right-eight,
145
172
  &%right-nine,
146
173
  &%right-ten,
147
- &%right-eleven#{if($classes, ", &.right-one, &.right-two, &.right-three, &.right-four, &.right-five, &.right-six, &.right-seven, &.right-eight, &.right-nine, &.right-ten, &.right-eleven", "")} { left:0; }
174
+ &%right-eleven#{if($grid-classes, ", &.right-one, &.right-two, &.right-three, &.right-four, &.right-five, &.right-six, &.right-seven, &.right-eight, &.right-nine, &.right-ten, &.right-eleven", "")} { left:0; }
148
175
  // reset pull
149
176
  &%left-one,
150
177
  &%left-two,
@@ -156,7 +183,7 @@ $adapters: $one-half $one-third $one-fourth $one-fifth;
156
183
  &%left-eight,
157
184
  &%left-nine,
158
185
  &%left-ten,
159
- &%left-eleven#{if($classes, ", &.left-one, &.left-two, &.left-three, &.left-four, &.left-five, &.left-six, &.left-seven, &.left-eight, &.left-nine, &.left-ten, &.left-eleven", "")} { right:0; }
186
+ &%left-eleven#{if($grid-classes, ", &.left-one, &.left-two, &.left-three, &.left-four, &.left-five, &.left-six, &.left-seven, &.left-eight, &.left-nine, &.left-ten, &.left-eleven", "")} { right:0; }
160
187
  // reset offset
161
188
  &%skip-one,
162
189
  &%skip-two,
@@ -168,5 +195,5 @@ $adapters: $one-half $one-third $one-fourth $one-fifth;
168
195
  &%skip-eight,
169
196
  &%skip-nine,
170
197
  &%skip-ten,
171
- &%skip-eleven#{if($classes, ", &.skip-one, &.skip-two, &.skip-three, &.skip-four, &.skip-five, &.skip-six, &.skip-seven, &.skip-eight, &.skip-nine, &.skip-ten, &.skip-eleven", "")} { margin-left:0; }
198
+ &%skip-eleven#{if($grid-classes, ", &.skip-one, &.skip-two, &.skip-three, &.skip-four, &.skip-five, &.skip-six, &.skip-seven, &.skip-eight, &.skip-nine, &.skip-ten, &.skip-eleven", "")} { margin-left:0; }
172
199
  }