Skip to content

Instantly share code, notes, and snippets.

@pepebe
Last active December 20, 2015 09:58
Show Gist options
  • Save pepebe/6111614 to your computer and use it in GitHub Desktop.
Save pepebe/6111614 to your computer and use it in GitHub Desktop.
Blockgrid for Foundation. Enables layout for medium-sized screens. Attention: The medium breakpoint in this grid is at 600px and not at foundations's default 640px.
@media only screen{
[class*="block-grid-"] {
display:block;
zoom:1;
margin:0 -.625em;
padding:0;
}
[class*="block-grid-"]:before,
[class*="block-grid-"]:after {
content:" ";
display:table;
}
[class*="block-grid-"] > li {
display:inline;
height:auto;
float:left;
padding:0 .625em 1.25em;
}
/*
* small
* most mobile phones
* */
.small-block-grid-1 > li {
width:100%;
padding:0 .625em 1.25em;
}
.small-block-grid-2 > li {
width:50%;
padding:0 .625em 1.25em;
}
.small-block-grid-3 > li {
width:33.33333%;
padding:0 .625em 1.25em;
}
.small-block-grid-4 > li {
width:25%;
padding:0 .625em 1.25em;
}
.small-block-grid-5 > li {
width:20%;
padding:0 .625em 1.25em;
}
.small-block-grid-6 > li {
width:16.66667%;
padding:0 .625em 1.25em;
}
.small-block-grid-7 > li {
width:14.28571%;
padding:0 .625em 1.25em;
}
.small-block-grid-8 > li {
width:12.5%;
padding:0 .625em 1.25em;
}
.small-block-grid-9 > li {
width:11.11111%;
padding:0 .625em 1.25em;
}
.small-block-grid-10 > li {
width:10%;
padding:0 .625em 1.25em;
}
.small-block-grid-11 > li {
width:9.09091%;
padding:0 .625em 1.25em;
}
.small-block-grid-12 > li {
width:8.33333%;
padding:0 .625em 1.25em;
}
.small-block-grid-1 > li:nth-of-type(n),
.small-block-grid-2 > li:nth-of-type(n),
.small-block-grid-3 > li:nth-of-type(n),
.small-block-grid-4 > li:nth-of-type(n),
.small-block-grid-5 > li:nth-of-type(n),
.small-block-grid-6 > li:nth-of-type(n),
.small-block-grid-7 > li:nth-of-type(n),
.small-block-grid-8 > li:nth-of-type(n),
.small-block-grid-9 > li:nth-of-type(n),
.small-block-grid-10 > li:nth-of-type(n),
.small-block-grid-11 > li:nth-of-type(n),
.small-block-grid-12 > li:nth-of-type(n) {
clear:none;
}
[class*="block-grid-"]:after,
.small-block-grid-1 > li:nth-of-type(1n+1),
.small-block-grid-2 > li:nth-of-type(2n+1),
.small-block-grid-3 > li:nth-of-type(3n+1),
.small-block-grid-4 > li:nth-of-type(4n+1),
.small-block-grid-5 > li:nth-of-type(5n+1),
.small-block-grid-6 > li:nth-of-type(6n+1),
.small-block-grid-7 > li:nth-of-type(7n+1),
.small-block-grid-8 > li:nth-of-type(8n+1),
.small-block-grid-9 > li:nth-of-type(9n+1),
.small-block-grid-10 > li:nth-of-type(10n+1),
.small-block-grid-11 > li:nth-of-type(11n+1),
.small-block-grid-12 > li:nth-of-type(12n+1) {
clear:both;
}
}
@media only screen and (min-width: 600px) {
/*
Default breakpoint here:
@media only screen and (min-width: 640px) {
*/
/*
* medium
* most tablets in portrait mode
* */
.medium-block-grid-1 > li {
width:100%;
padding:0 .625em 1.25em;
}
.medium-block-grid-2 > li {
width:50%;
padding:0 .625em 1.25em;
}
.medium-block-grid-3 > li {
width:33.33333%;
padding:0 .625em 1.25em;
}
.medium-block-grid-4 > li {
width:25%;
padding:0 .625em 1.25em;
}
.medium-block-grid-5 > li {
width:20%;
padding:0 .625em 1.25em;
}
.medium-block-grid-6 > li {
width:16.66667%;
padding:0 .625em 1.25em;
}
.medium-block-grid-7 > li {
width:14.28571%;
padding:0 .625em 1.25em;
}
.medium-block-grid-8 > li {
width:12.5%;
padding:0 .625em 1.25em;
}
.medium-block-grid-9 > li {
width:11.11111%;
padding:0 .625em 1.25em;
}
.medium-block-grid-10 > li {
width:10%;
padding:0 .625em 1.25em;
}
.medium-block-grid-11 > li {
width:9.09091%;
padding:0 .625em 1.25em;
}
.medium-block-grid-12 > li {
width:8.33333%;
padding:0 .625em 1.25em;
}
.small-block-grid-1 > li:nth-of-type(1n+1),
.small-block-grid-2 > li:nth-of-type(2n+1),
.small-block-grid-3 > li:nth-of-type(3n+1),
.small-block-grid-4 > li:nth-of-type(4n+1),
.small-block-grid-5 > li:nth-of-type(5n+1),
.small-block-grid-6 > li:nth-of-type(6n+1),
.small-block-grid-7 > li:nth-of-type(7n+1),
.small-block-grid-8 > li:nth-of-type(8n+1),
.small-block-grid-9 > li:nth-of-type(9n+1),
.small-block-grid-10 > li:nth-of-type(10n+1),
.small-block-grid-11 > li:nth-of-type(11n+1),
.small-block-grid-12 > li:nth-of-type(12n+1),
.medium-block-grid-1 > li:nth-of-type(n),
.medium-block-grid-2 > li:nth-of-type(n),
.medium-block-grid-3 > li:nth-of-type(n),
.medium-block-grid-4 > li:nth-of-type(n),
.medium-block-grid-5 > li:nth-of-type(n),
.medium-block-grid-6 > li:nth-of-type(n),
.medium-block-grid-7 > li:nth-of-type(n),
.medium-block-grid-8 > li:nth-of-type(n),
.medium-block-grid-9 > li:nth-of-type(n),
.medium-block-grid-10 > li:nth-of-type(n),
.medium-block-grid-11 > li:nth-of-type(n),
.medium-block-grid-12 > li:nth-of-type(n) {
clear:none;
}
.medium-block-grid-1 > li:nth-of-type(1n+1),
.medium-block-grid-2 > li:nth-of-type(2n+1),
.medium-block-grid-3 > li:nth-of-type(3n+1),
.medium-block-grid-4 > li:nth-of-type(4n+1),
.medium-block-grid-5 > li:nth-of-type(5n+1),
.medium-block-grid-6 > li:nth-of-type(6n+1),
.medium-block-grid-7 > li:nth-of-type(7n+1),
.medium-block-grid-8 > li:nth-of-type(8n+1),
.medium-block-grid-9 > li:nth-of-type(9n+1),
.medium-block-grid-10 > li:nth-of-type(10n+1),
.medium-block-grid-11 > li:nth-of-type(11n+1),
.medium-block-grid-12 > li:nth-of-type(12n+1) {
clear:both;
}
}
@media only screen and (min-width: 1024px) {
/*
* large
* modx tablets in portrait mode, notebooks and desktops
* */
.large-block-grid-1 > li {
width:100%;
padding:0 .625em 1.25em;
}
.large-block-grid-2 > li {
width:50%;
padding:0 .625em 1.25em;
}
.large-block-grid-3 > li {
width:33.33333%;
padding:0 .625em 1.25em;
}
.large-block-grid-4 > li {
width:25%;
padding:0 .625em 1.25em;
}
.large-block-grid-5 > li {
width:20%;
padding:0 .625em 1.25em;
}
.large-block-grid-6 > li {
width:16.66667%;
padding:0 .625em 1.25em;
}
.large-block-grid-7 > li {
width:14.28571%;
padding:0 .625em 1.25em;
}
.large-block-grid-8 > li {
width:12.5%;
padding:0 .625em 1.25em;
}
.large-block-grid-9 > li {
width:11.11111%;
padding:0 .625em 1.25em;
}
.large-block-grid-10 > li {
width:10%;
padding:0 .625em 1.25em;
}
.large-block-grid-11 > li {
width:9.09091%;
padding:0 .625em 1.25em;
}
.large-block-grid-12 > li {
width:8.33333%;
padding:0 .625em 1.25em;
}
.small-block-grid-1 > li:nth-of-type(1n+1),
.small-block-grid-2 > li:nth-of-type(2n+1),
.small-block-grid-3 > li:nth-of-type(3n+1),
.small-block-grid-4 > li:nth-of-type(4n+1),
.small-block-grid-5 > li:nth-of-type(5n+1),
.small-block-grid-6 > li:nth-of-type(6n+1),
.small-block-grid-7 > li:nth-of-type(7n+1),
.small-block-grid-8 > li:nth-of-type(8n+1),
.small-block-grid-9 > li:nth-of-type(9n+1),
.small-block-grid-10 > li:nth-of-type(10n+1),
.small-block-grid-11 > li:nth-of-type(11n+1),
.small-block-grid-12 > li:nth-of-type(12n+1),
.medium-block-grid-1 > li:nth-of-type(1n+1),
.medium-block-grid-2 > li:nth-of-type(2n+1),
.medium-block-grid-3 > li:nth-of-type(3n+1),
.medium-block-grid-4 > li:nth-of-type(4n+1),
.medium-block-grid-5 > li:nth-of-type(5n+1),
.medium-block-grid-6 > li:nth-of-type(6n+1),
.medium-block-grid-7 > li:nth-of-type(7n+1),
.medium-block-grid-8 > li:nth-of-type(8n+1),
.medium-block-grid-9 > li:nth-of-type(9n+1),
.medium-block-grid-10 > li:nth-of-type(10n+1),
.medium-block-grid-11 > li:nth-of-type(11n+1),
.medium-block-grid-12 > li:nth-of-type(12n+1),
.large-block-grid-1 > li:nth-of-type(n),
.large-block-grid-2 > li:nth-of-type(n),
.large-block-grid-3 > li:nth-of-type(n),
.large-block-grid-4 > li:nth-of-type(n),
.large-block-grid-5 > li:nth-of-type(n),
.large-block-grid-6 > li:nth-of-type(n),
.large-block-grid-7 > li:nth-of-type(n),
.large-block-grid-8 > li:nth-of-type(n),
.large-block-grid-9 > li:nth-of-type(n),
.large-block-grid-10 > li:nth-of-type(n),
.large-block-grid-11 > li:nth-of-type(n),
.large-block-grid-12 > li:nth-of-type(n) {
clear:none;
}
.large-block-grid-1 > li:nth-of-type(1n+1),
.large-block-grid-2 > li:nth-of-type(2n+1),
.large-block-grid-3 > li:nth-of-type(3n+1),
.large-block-grid-4 > li:nth-of-type(4n+1),
.large-block-grid-5 > li:nth-of-type(5n+1),
.large-block-grid-6 > li:nth-of-type(6n+1),
.large-block-grid-7 > li:nth-of-type(7n+1),
.large-block-grid-8 > li:nth-of-type(8n+1),
.large-block-grid-9 > li:nth-of-type(9n+1),
.large-block-grid-10 > li:nth-of-type(10n+1),
.large-block-grid-11 > li:nth-of-type(11n+1),
.large-block-grid-12 > li:nth-of-type(12n+1) {
clear:both;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment