Sha256: fae20c267cc607dc243cb718389e35ffdd7aafb1f360bdb72d08970b0edfccc7
Contents?: true
Size: 1.93 KB
Versions: 33
Compression:
Stored size: 1.93 KB
Contents
@import "global";
//
// Block Grid Variables
//
$include-html-grid-classes: $include-html-classes !default;
// We use this to control the maximum number of block grid elements per row
$block-grid-elements: 12 !default;
$block-grid-default-spacing: rem-calc(20) !default;
// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
$block-grid-media-queries: true !default;
//
// Block Grid Mixins
//
// Create a custom block grid
//
// $per-row - # of items to display per row. Default: false.
// $spacing - # of ems to use as padding on each block item. Default: rem-calc(20).
// $base-style - Apply a base style to block grid. Default: true.
@mixin block-grid(
$per-row:false,
$spacing:$block-grid-default-spacing,
$base-style:true) {
@if $base-style {
display: block;
padding: 0;
margin: 0 (-$spacing/2);
@include clearfix;
&>li {
display: inline;
height: auto;
float: $default-float;
padding: 0 ($spacing/2) $spacing;
}
}
@if $per-row {
&>li {
width: 100%/$per-row;
padding: 0 ($spacing/2) $spacing;
&:nth-of-type(n) { clear: none; }
&:nth-of-type(#{$per-row}n+1) { clear: both; }
}
}
}
// Generate presentational markup for block grid.
//
// $size - Name of class to use, i.e. "large" will generate .large-block-grid-1, .large-block-grid-2, etc.
@mixin block-grid-html-classes($size) {
@for $i from 1 through $block-grid-elements {
.#{$size}-block-grid-#{($i)} {
@include block-grid($i,$block-grid-default-spacing,false);
}
}
}
@include exports("block-grid") {
@if $include-html-grid-classes {
[class*="block-grid-"] { @include block-grid; }
@media #{$small-up} {
@include block-grid-html-classes($size:small);
}
@media #{$medium-up} {
@include block-grid-html-classes($size:medium);
}
@media #{$large-up} {
@include block-grid-html-classes($size:large);
}
}
}
Version data entries
33 entries across 33 versions & 2 rubygems