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 ???
        }
    }
}

if variables are global, why does it work with @include column(24) and column(18) but not with prepend(6)? isn´t that strange behaviour?
note: the baseline works with the media-queries. but if variables are global this shouldn´t work, right? but then ... how do you add different baselines with media-queries?

actually, I would prefer to use no grid framework at all but define the grid by myself (none of the frameworks I know are doing what I need and I don´t like the out-of-the-box thing). besides, this is not about blueprint being able to handle responsive designs, since I´m adding the widhts/margins anyway.

sorry if these are dump questions: I´ve been using compass for quite a while but I never did responsive stuff.

the variables are global. Changing them in the media query also changed them for all the related mixins used outside of that media query.

re: no framework. That was the approach I took: http://chriseppstein.github.com/blog/2011/08/21/responsive-layouts-with-sass/

But there are other approaches. For instance, Susy will allow you to keep the same grid and just change the container size on a per-media basis by using %-based measurements.

first off, thanks (very much) for your help. but let me be bothersome again.

you wrote that thing so I´m pretty sure you know, but I can add different baselines with different media-queries (but I´m not able to add different grids). moreover, why not just scope the variables – wouldn´t that make such stuff much easier?

what I wanna say (for example):

1200: give me 12cols with each column having width X (fixed px, no %), vertical rhythm adjusted
940: give me 12cols with each column having width X (fixed px, no %), vertical rhythm adjusted
700: give me 12cols with each column having width X (fixed px, no %), vertical rhythm adjusted
< 700: make it fluid (or whatever), vertical rhythm adjusted

looking at susy with something like margin-right: 1.639%; ... mr. mueller-brockmann would be turning in his grave I guess ;-)

Variable scoping is a feature of how sass works. Changing that would affect every sass stylesheet ever written. Susy did some restructuring of their code to allow late binding/lookup of derived values. which makes this sort of use work better but still not perfect.

In terms of your resistance to % units, you'll need to get over that unless you want to take the path described in my blog post, it's pretty fundamental to RWD.

What you say you want to accomplish, you can do if you follow the steps in my blog post.

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.