67 lines
1.6 KiB
SCSS
67 lines
1.6 KiB
SCSS
//
|
|
// Block Grid Variables
|
|
//
|
|
|
|
// We use this to control the maximum number of block grid elements per row
|
|
$block-grid-elements: 12 !default;
|
|
$block-grid-default-spacing: 10px !default;
|
|
|
|
// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
|
|
$block-grid-media-queries: true !default;
|
|
|
|
//
|
|
// Block Grid Mixins
|
|
//
|
|
|
|
// We use this mixin to create different block-grids. You can apply per-row and spacing options.
|
|
// Setting $base-style to false will ommit default styles.
|
|
@mixin block-grid($per-row:false, $spacing:$block-grid-default-spacing, $base-style:true) {
|
|
|
|
@if $base-style {
|
|
display: block;
|
|
padding: 0;
|
|
margin: 0 (-$spacing);
|
|
@include clearfix;
|
|
|
|
&>li {
|
|
display: block;
|
|
height: auto;
|
|
float: $default-float;
|
|
padding: 0 $spacing $spacing;
|
|
}
|
|
}
|
|
|
|
@if $per-row {
|
|
&>li {
|
|
width: 100%/$per-row;
|
|
padding: 0 $spacing $spacing;
|
|
|
|
&:nth-of-type(#{$per-row}n+1) { clear: both; }
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
@if $block-grid-media-queries {
|
|
/* Foundation Block Grids for below small breakpoint */
|
|
@media only screen {
|
|
[class*="block-grid-"] { @include block-grid; }
|
|
|
|
@for $i from 1 through $block-grid-elements {
|
|
.small-block-grid-#{($i)} {
|
|
@include block-grid($i,$block-grid-default-spacing,false);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Foundation Block Grids for above small breakpoint */
|
|
@media #{$small} {
|
|
@for $i from 1 through $block-grid-elements {
|
|
.large-block-grid-#{($i)} {
|
|
@include block-grid($i,$block-grid-default-spacing,false);
|
|
}
|
|
}
|
|
[class*="small-block-grid-"] > li { clear: none !important; }
|
|
}
|
|
}
|