-
-
Save ChrisTM/8346916 to your computer and use it in GitHub Desktop.
// # Block Grid | |
// | |
// Technique adapted from Foundation 5 for Bootstrap 3.0.3 to at least 3.3.1. | |
// https://github.com/zurb/foundation/blob/f755d8704123f86c281ede0b171881e2672f150d/scss/foundation/components/_block-grid.scss | |
// | |
// # Example Usage | |
// | |
// To produce a grid of 2 items per row on an extra-small screen, and 3 items | |
// per row on a small screen: | |
// | |
// <div class="block-grid-xs-2 block-grid-sm-3"> | |
// <div class="block-grid-item"> | |
// ... | |
// </div> | |
// </div> | |
[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; | |
width: 100%; | |
list-style: none; // for those who like to use `li` elements as block-grid-items | |
} | |
.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; } | |
} | |
} | |
// Recursive loop that produces rules for block grids of @per-row many items | |
// per row down to 1 many items per row. | |
.block-grids(@size, @per-row: @grid-columns) when (@per-row > 0) { | |
.block-grid-@{size}-@{per-row} { .block-grid(@per-row); } | |
.block-grids(@size, (@per-row - 1)); | |
} | |
.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) } |
How can we add space between these grid items without it breaking? I am trying margin-right: 20px;
but that doesnt seem to be working in my favor
This is exactly what I was looking for. Any idea how it could be updated to be used as a LESS mixin?
For example using LESS to change font-size;
.myFontSize(@size) { font-size: ~"@{size}px"}
.myFontClass (@size) {
(~".font@{size}") { .myFontSize(@size); }
}
//////////////////////////////////////////////////////
.loop (@index) when (@index >= 10) {
.myFontClass (@index);
.loop(@index - 1);
}
.loop (@index) when (@index < 10) {}
Usage:
.title{
margin-bottom:0.5em;
.myFontSize(13);
}
Output CSS
.title {
margin-bottom: 0.5em;
font-size: 13px;
}
I tried this sass mixin but the li with thumbnails still has the padding at left and right for first child and last child. Is there any way for me to set padding-left and padding-right at 0 for first child and last child in grid?
I've created a new repo: https://github.com/JohnnyTheTank/bootstrap-block-grid
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)
Thank you very much for this information! I really need something like that in bootstrap project now!
Does it need to be inside a .row ? Thanks!
Nice! Thanks for sharing.
In case this helps: If you're using the CSS version of Bootstrap but are incorporating your own styles in LESS and want to use this, these are Bootrstrap's default values for the variables needed.
@grid-columns: 12;
@grid-gutter-width: 30px;
@screen-sm-min: 768px;
@screen-md-min: 992px;
@screen-lg-min: 1200px;