Skip to content

Instantly share code, notes, and snippets.

@pepebe

pepebe/blockgrid-5.css

Last active December 20, 2015 09:58
Download ZIP

Revisions

  1. pepebe revised this gist Jul 30, 2013. 1 changed file with 4 additions and 1 deletion.
    5 changes: 4 additions & 1 deletion blockgrid-5.css
    View file
    Original file line number Diff line number Diff line change
    @@ -118,7 +118,10 @@
    }

    @media only screen and (min-width: 600px) {

    /*
    Default breakpoint here:
    @media only screen and (min-width: 640px) {
    */

    /*
    * medium
  2. pepebe created this gist Jul 30, 2013.
    352 changes: 352 additions & 0 deletions blockgrid-5.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,352 @@
    @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) {


    /*
    * 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;
    }
    }