-
-
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) } |
Thanks alot!
Made a SCSS version of it here:
https://gist.github.com/Jursdotme/67abe379d4a357233d3c
Sometimes we need a custom grid with more then 12 columns so to keep the things aligned I've made a small modification to your gist
Just replace
.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); }
}with
.block-grids(@size, @index: @grid-columns) when (@index > 0) {
.block-grid-@{size}-@{index} { .block-grid(@index); }
.block-grids(@size,@index - 1);
}
Hey guys, for us not using preprocessors, are there any links with generated CSS?
Hi nemke!
Here is compiled CSS
https://gist.github.com/thendrluca/e0383441f55b94e1ae0b
Usage:
<div class="container">
<div class="block-grid-lg-4 block-grid-md-3 block-grid-sm-2">
<div class="block-grid-item">
<h1>User 1</h1>
</div>
<div class="block-grid-item">
<h1>User 2</h1>
</div>
<div class="block-grid-item">
<h1>User 3</h1>
</div>
<div class="block-grid-item">
<h1>User 4</h1>
</div>
</div>
</div>
Very cool, thank you.
In case it helps any one, here's the final code and usage I used:
// Block Grid
// Technique adapted from Foundation 5 for Bootstrap 3.
// https://github.com/zurb/foundation/blob/f755d8704123f86c281ede0b171881e2672f150d/scss/foundation/components/_block-grid.scss
[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, @index: @grid-columns) when (@index > 0) {
.block-grid-@{size}-@{index} { .block-grid(@index); }
.block-grids(@size,@index - 1);
}
@media (min-width: @screen-sm) { .block-grids(sm) }
@media (min-width: @screen-md) { .block-grids(md) }
@media (min-width: @screen-lg) { .block-grids(lg) }Usage:
<ul class="block-grid-lg-4 block-grid-md-3 block-grid-sm-2">
<li class="block-grid-item">
<h1>User 1</h1>
</li>
<li class="block-grid-item">
<h1>User 2</h1>
</li>
<li class="block-grid-item">
<h1>User 3</h1>
</li>
<li class="block-grid-item">
<h1>User 4</h1>
</li>
</ul>
@Remo: Thanks for pointing that out. I'm guessing you're using Bootstrap 3.0.0. It seems like @screen-sm-min was a variable added shortly after Bootstrap 3.0.0. @screen-sm is deprecated as of 3.0.1.
@corlletelab: Good point. I've taken your suggestion!
@taydakov: Thanks for sharing an example of usage. That's important info, so I've updated the Gist with an example.
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;
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.
This is pretty cool but it didn't work for me, had to change this:
to this