Skip to content

Instantly share code, notes, and snippets.

@benlwilliams
Last active December 25, 2015 21:59
Show Gist options
  • Save benlwilliams/7046913 to your computer and use it in GitHub Desktop.
Save benlwilliams/7046913 to your computer and use it in GitHub Desktop.
Some Floating, Clearing, and a zero grid width addition for use in Zurb Foundation 4
//
// Responsive Floats
//
.small-float-right { float:right; }
.small-float-left { float:left; }
.small-float-reset { float:none; }
.small-clear-left { clear:left; }
.small-clear-right { clear:right; }
.small-clear-both { clear:both; }
.small-clear-reset { clear:none; }
@media #{$small} {
.medium-float-right { float:right; }
.medium-float-left { float:left; }
.medium-float-reset { float:none; }
.medium-clear-left { clear:left; }
.medium-clear-right { clear:right; }
.medium-clear-both { clear:both; }
.medium-clear-reset { clear:none; }
}
@media #{$medium} {
.large-float-right { float:right; }
.large-float-left { float:left; }
.large-float-reset { float:none; }
.large-clear-left { clear:left; }
.large-clear-right { clear:right; }
.large-clear-both { clear:both; }
.large-clear-reset { clear:none; }
}
//
// Foundation Grid Enhancements
//
.small-0 { display:none; }
// Table-cell the coluns so that you can use vertical-align values.
.row.small-table { display:table; }
[class*="column"].small-table-cell,
[class*="column"] + .small-table-cell[class*="column"]:last-child,
[class*="column"].small-table-cell[class*="large-"]:not(.large-0) {
display:table-cell;
float:none;
vertical-align:middle;
&.vert-top { vertical-align:top; }
&.vert-bottom { vertical-align:bottom; }
}
@media #{$small} {
[class*="column"].medium-0 { display:none; }
[class*="column"][class*="medium-"]:not(.medium-0) { display:block; }
.row.medium-table { display:table; }
[class*="column"].medium-table-cell,
[class*="column"] + .medium-table-cell[class*="column"]:last-child,
[class*="column"].medium-table-cell[class*="large-"]:not(.large-0) {
display:table-cell;
vertical-align:middle;
float:none;
&.vert-top { vertical-align:top; }
&.vert-bottom { vertical-align:bottom; }
}
}
@media #{$medium} {
[class*="column"].large-0 { display:none; }
[class*="column"][class*="large-"]:not(.large-0) { display:block; }
.row.large-table { display:table; }
[class*="column"].large-table-cell,
[class*="column"] + .large-table-cell[class*="column"]:last-child,
[class*="column"].large-table-cell[class*="large-"]:not(.large-0) {
display:table-cell;
vertical-align:middle;
float:none;
&.vert-top { vertical-align:top; }
&.vert-bottom { vertical-align:bottom; }
}
}
//
// Medium Block Grid Support added. Missing with Foundation 4.
//
/* Foundation Block Grids for above small breakpoint */
@media #{$small} {
/* Remove small grid clearing */
@for $i from 1 through $block-grid-elements {
.small-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
}
@for $i from 1 through $block-grid-elements {
.large-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
}
@for $i from 1 through $block-grid-elements {
.medium-block-grid-#{($i)} {
@include block-grid($i,$block-grid-default-spacing,false);
}
}
}
/* Foundation Block Grids for above medium breakpoint */
@media #{$medium} {
/* Remove small grid clearing */
@for $i from 1 through $block-grid-elements {
.small-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
}
@for $i from 1 through $block-grid-elements {
.medium-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
}
@for $i from 1 through $block-grid-elements {
.large-block-grid-#{($i)} {
@include block-grid($i,$block-grid-default-spacing,false);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment