Rebase Major Update

Danny Wahl's picture Danny Wahl  •   •  Moodle

I have been on a bit of an update spree on Zebra lately, removing, adding, and changing settings. One of the biggest changes I made was to rewrite the pagelayout.css @media queries using the HTML5 Boilerplate mobile first design theory.

Switching to this mobile first practice cut about 1/3 of the declarations out of my query sections as well as having to declare a max-width (so I canned those settings). Overall I’m pretty happy with how much simpler things are now in the page layout.

Here’s a comparison of the before and after:

Before

/* pagelayout.css */
/* 1 Column View */

@media screen and (max-width:[[setting:onecolmax]]) {

}

/* 2 Column View */

@media screen and (min-width:[[setting:twocolmin]]) and (max-width:[[setting:twocolmax]]) {
    #region-main-box {
     left:0px;
     width:200%;
    }

    #region-post-box {
     left:50%;
     margin-left:0;
     width:100%;
    }

    #region-main-wrap {
     float:right;
     position:relative;
     right:100%;
     width:50%;
    }

    #region-main {
     margin-left:200px;
     margin-right:0;
    }

    #region-pre {
     float:left;
     left:0;
     margin-left:-50%;
     width:200px;
    }

    #region-post {
     clear:left;
     float:left;
     left:0;
     margin-left:-50%;
     width:200px;
    }
}

/* 3 Column View */

@media screen and (min-width:[[setting:threecolmin]]) {
    #region-main-box {
     left:200px;
     width:200%;
    }

    #region-post-box {
     float:left;
     left:50%;
     margin-left:-400px;
     width:100%;
    }

    #region-main-wrap {
     float:right;
     position:relative;
     right:100%;
     width:50%;
    }

    #region-main {
     margin-right:0;
     margin-left:400px;
    }

    #region-pre {
        float:left;
        left:200px;
        margin-left:-50%;
        width:200px;
    }

    #region-post {
        float:left;
        left:0;
        width:200px;
    }

    .side-pre-only #region-post-box {
        margin-left:-200px;
    }

    .side-pre-only #region-main {
        margin-left:200px;
    }

    .side-pre-only #region-pre {
        left:0;
    }

    .side-post-only #region-main-box {
        left:0;
    }

    .side-post-only #region-post-box {
        margin-left:-200px;
    }

    .side-post-only #region-main {
        margin-left:200px;
    }

    .content-only #region-main-box {
        left:0;
    }

    .content-only #region-post-box {
        margin-left:0;
    }
}

After

/* 1 Column View */

@media screen and (max-width:[[setting:onecolmax]]) {

}

/* 2 Column View */

@media screen and (min-width:[[setting:twocolmin]]) and (max-width:[[setting:twocolmax]]) {
    #region-main-box {
     left:0px;
     width:200%;
    }

    #region-post-box {
     left:50%;
     margin-left:0;
     width:100%;
    }

    #region-main-wrap {
     float:right;
     position:relative;
     right:100%;
     width:50%;
    }

    #region-main {
     margin-left:200px;
     margin-right:0;
    }

    #region-pre {
     float:left;
     left:0;
     margin-left:-50%;
     width:200px;
    }

    #region-post {
     clear:left;
     float:left;
     left:0;
     margin-left:-50%;
     width:200px;
    }
}

/* 3 Column View */

@media screen and (min-width:[[setting:threecolmin]]) {
    #region-main-box {
     left:200px;
     width:200%;
    }

    #region-post-box {
     float:left;
     left:50%;
     margin-left:-400px;
     width:100%;
    }

    #region-main-wrap {
     float:right;
     position:relative;
     right:100%;
     width:50%;
    }

    #region-main {
     margin-right:0;
     margin-left:400px;
    }

    #region-pre {
        float:left;
        left:200px;
        margin-left:-50%;
        width:200px;
    }

    #region-post {
        float:left;
        left:0;
        width:200px;
    }

    .side-pre-only #region-post-box {
        margin-left:-200px;
    }

    .side-pre-only #region-main {
        margin-left:200px;
    }

    .side-pre-only #region-pre {
        left:0;
    }

    .side-post-only #region-main-box {
        left:0;
    }

    .side-post-only #region-post-box {
        margin-left:-200px;
    }

    .side-post-only #region-main {
        margin-left:200px;
    }

    .content-only #region-main-box {
        left:0;
    }

    .content-only #region-post-box {
        margin-left:0;
    }
}

They make look about the same length but that’s because I added a lot of little updates to the newer version too, trust me, it’s simpler and it looks and works better than before. So I’ve back-ported these changes to Rebase [no settings branch] (and updated Ubiquity) so you can download and play with them – Zebra is just one working application of how to use this page layout.

I still have some more pagelayout work to do (thanks to some bugs being brought up in the Moodle Forum & Tracker) but after that I have a couple of ideas I’d like to try like respond.js, Chrome Frame, a resizable header, and trying to leverage Moodle’s built-in accessibility links (normally hidden) as buttons for mobile devices.

I also now have proper IE6, 7, 8, and 9 virtual machines (running Xp, Xp, 7, and 7 respectively) so I can (and am actively doing) more IE compatibility testing. With one caveat – for IE6 it’s mostly just laughing at how broken things are and making sure Chrome Frame is popping up correctly. Look for optional Chrome Frame coming soon!