compass responsive quirks

gistfile1.txt

/*  Imports
------------------------------------------------------------------------------------------------------ */

@import "partials/base";
@import "blueprint";
@import "compass/typography/vertical_rhythm";

/*  >1220px
------------------------------------------------------------------------------------------------------ */

@media screen and (min-width: 1220px) {
    // grid
    $blueprint-grid-columns: 24;
    $blueprint-grid-width: 25px;
    $blueprint-grid-margin: 25px;
    // baseline
    $relative-font-sizing: false;
    $base-font-size: 16px;
    $base-line-height: 24px;
    @include establish-baseline(16px);
    // grid applied
    div.container {
        @include container; // WRONG WIDTH ... WHY ???
    }
    section#teaser {
        @include column(24, true);
        article {
            @include column(18, true); // RIGHT WIDTH ... YES!!!
            @include prepend(6); // WRONG MARGIN ... WHY ???
        }
    }
}

thanks chris – I´ve thoroughly checked your posting (which took a while) and I really like it ... until the point where I need to add the markup to my templates.

my workaround for now: define some mixins (in base.scss) for calculating the grid, including the nr of cols, the grid-width and the grid-margin as variables ... and use these mixins within the different media-queries. this allows me to have a 16col 25px/25px grid for large screens, a 16col 20px/2px grid for smaller screens, a 12col 20px/20px grid for tablets and fluid-columns for smartphones. this approach is somehow strange of course – since default.scss and large.scss is pretty much the same (I just need to re-calculate the width). tried to use framelessgrid, but (to be honest) I didn´t quite understand it.