Created
March 15, 2012 17:55
-
-
Save sehmaschine/2045637 to your computer and use it in GitHub Desktop.
compass responsive quirks
This file contains hidden or 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
| /* 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 ??? | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.