Last active
December 20, 2015 09:58
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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