/* We live in a strong opinion that you should use a semantic layout
* grid framework for your layout base. Beside other frameworks out there * the susy grid framework (http://susy.oddbird.net) seems to do the job * as we expect it. * * We provide a minimal setup here which keeps a mobile first responsiveness * in mind (http://www.abookapart.com/products/mobile-first). * * This configuration setup is taken directly from susys magic grid demo, * which provides a nice dive-in into responsive designs. * * http://susy.oddbird.net/demos/magic */
@import 'susy'
// for magic grids the combination of columns, column width and gutter width // determines the max container width here. // number of columns available for content $total-columns: 7
// each column is 4em wide $column-width: 4em
// 1em gutters between columns $gutter-width: 1em
// grid-padding equal to gutters $grid-padding: $gutter-width
// break-point specifies the screen size we want to apply different styles $break-point: 12
// break-point-em is the result of our break point combined with the // other configurations $break-point-em: $break-point * ($column-width + $gutter-width) - $gutter-width
// the mobile view layout comes in handy if we want to apply styles especially // for our mobile view, which we don't want to reset in other layouts. // Please be aware, that this should be used wisely and rarely, because // this styles will also not be available in case a browser does not support // media queries. $mobile-layout: 0em $total-columns $break-point-em
// providing a better named short cut to the break-point $screen-layout: $break-point
// as from here you just have to define your content container elements. // Lets assume as in the magic grid example, we have a full-width header and // footer and a responsive content container with class (obviously :)) “l-content” // //.l-content // +container($total-columns, $break-point) // We will provide a few examples in the following about how to get started to use // the grid we have set up here, but please feel encouraged to take a closer look // into the susy framework documentation, to get a better feeling for susy. // After we have enabled the grid setup we are able to adjust our components // easily to fit into our content columns. // // .robot-picture // +span-columns(3, 7) // // .figcaptions // +span-columns(4 omega, 7) // Specialties can be applied to components by bringing in the // at-breakpoint mixin, which provides an appropriate media-query for // the changes. // // +at-breakpoint($large-screen-layout) // .robot-picture // +span-columns(4, 12) // // .figcaptions // +span-columns(8 omega, 12)