-
-
Save Jursdotme/67abe379d4a357233d3c to your computer and use it in GitHub Desktop.
// Block Grid | |
// Technique adapted from Foundation 5 for Bootstrap 3. | |
// https://github.com/zurb/foundation/blob/f755d8704123f86c281ede0b171881e2672f150d/scss/foundation/components/_block-grid.scss | |
// Original LESS Version by Christopher Mitchell (https://gist.github.com/ChrisTM) | |
// Converted to SCSS by Rasmus Jürs (https://github.com/Jursdotme) | |
[class*="block-grid-"] { | |
display: block; | |
margin: -($grid-gutter-width/2); | |
padding: 0; | |
@include clearfix(); | |
} | |
.block-grid-item { | |
display: inline; | |
margin: 0; | |
padding: ($grid-gutter-width/2); | |
height: auto; | |
float: left; | |
list-style: none; | |
} | |
@mixin block-grid ($per-row) { | |
& > .block-grid-item { | |
width: (100%/$per-row); | |
$nth-equation: #{$per-row}n+'+'+1; | |
&:nth-of-type(n) { clear: none; } | |
&:nth-of-type(#{$nth-equation}) { clear: both; } | |
} | |
} | |
@mixin block-grids($size) { | |
.block-grid-#{$size}-1 { @include block-grid(1); } | |
.block-grid-#{$size}-2 { @include block-grid(2); } | |
.block-grid-#{$size}-3 { @include block-grid(3); } | |
.block-grid-#{$size}-4 { @include block-grid(4); } | |
.block-grid-#{$size}-5 { @include block-grid(5); } | |
.block-grid-#{$size}-6 { @include block-grid(6); } | |
.block-grid-#{$size}-7 { @include block-grid(7); } | |
.block-grid-#{$size}-8 { @include block-grid(8); } | |
.block-grid-#{$size}-9 { @include block-grid(9); } | |
.block-grid-#{$size}-10 { @include block-grid(10); } | |
.block-grid-#{$size}-11 { @include block-grid(11); } | |
.block-grid-#{$size}-12 { @include block-grid(12); } | |
} | |
@include block-grids(xs); | |
@media (min-width: $screen-sm-min) { @include block-grids(sm) } | |
@media (min-width: $screen-md-min) { @include block-grids(md) } | |
@media (min-width: $screen-lg-min) { @include block-grids(lg) } |
Thanks, this has been updated.
Would it be too much trouble to post an example usage here? Tried it out and there were a few kinks. I want to make sure I'm actually using it right.
heres an example:
<div class="container">
<div class="block-grid-lg-4 block-grid-md-3 block-grid-sm-2 block-grid-xs-1">
<img class="block-grid-item" src="...">
<img class="block-grid-item" src="...">
<img class="block-grid-item" src="...">
<img class="block-grid-item" src="...">
<img class="block-grid-item" src="...">
<img class="block-grid-item" src="...">
</div>
</div>
good stuff, thanks for this
To support > 12 columns, I use this instead of the block-grids
mixin:
@mixin block-grids($size, $columns: $grid-columns) {
@for $i from 1 through $columns {
.block-grid-#{$size}-#{$i}
@include block-grid($i)
}
}
In sass:
=block-grids($size, $columns: $grid-columns)
@for $i from 1 through $columns
.block-grid-#{$size}-#{$i}
+block-grid($i)
It doesn't seem to work like it once did. Returning an error: error parsing interpolated value
. Using Bootstrap 3.3.5 with Sass 3.4.14.
Is this no longer working with the current version of Bootstrap?
When I had a DIV with pagination below block grid container, and I used "text-center" text align class, my pagination links sometimes aligned too much to the right and not in center.
This was because the negative margin of last row block grid items somehow collapsed into the pagination div and affected text align calculation. Despite the fact that block grid container has "clearfix".
To get rid of this problem, I had to wrap blockgrid into another div and give it clearfix class as well.
This was not working with the current version of bootstrap and seemed to be a similar error read here:
alexwolfe/Buttons#64
wrapping the $nth-equation in parentheses seemed to fix the issue for me:
$nth-equation: (#{$per-row}n) + '+' +1;
Stylus Version
[class*="block-grid-"]
display: block
margin: -($grid-gutter-width / 2)
padding: 0
clearfix()
.block-grid-item
display: inline
margin: 0
padding: ($grid-gutter-width / 2)
height: auto
float: left
list-style: none
block-grid($per-row)
& > .block-grid-item
width: (100% / $per-row)
$nth-equation : (#{$per-row}n) + "+" + 1
&:nth-of-type(n)
clear: none
&:nth-of-type({$nth-equation})
clear: both
block-grids($size)
.block-grid-{$size}-1
block-grid(1)
.block-grid-{$size}-2
block-grid(2)
.block-grid-{$size}-3
block-grid(3)
.block-grid-{$size}-4
block-grid(4)
.block-grid-{$size}-5
block-grid(5)
.block-grid-{$size}-6
block-grid(6)
.block-grid-{$size}-7
block-grid(7)
.block-grid-{$size}-8
block-grid(8)
.block-grid-{$size}-9
block-grid(9)
.block-grid-{$size}-10
block-grid(10)
.block-grid-{$size}-11
block-grid(11)
.block-grid-{$size}-12
block-grid(12)
block-grids(xs)
@media (min-width: $screen-sm-min)
block-grids(sm)
@media (min-width: $screen-md-min)
block-grids(md)
@media (min-width: $screen-lg-min)
block-grids(lg)
Libsass will not compile the CSS correctly.
Use $nth-equation : (#{$per-row}n) + '+' + 1 instead of $nth-equation: #{$per-row}n+'+'+1; as mheywood90 pointed out.
May I suggest replacing the nth-equation with
$nth-equation: #{$per-row}n+'+'+1;
as it was compiling without the "+"
Old compile
.block-grid-xs-2 > .block-grid-item:nth-of-type(2n1)
with new line
.block-grid-xs-2 > .block-grid-item:nth-of-type(2n+1)