susy-compass | 易学教程

susy, media queries, and lt IE9 [closed]

阅读更多关于 susy, media queries, and lt IE9 [closed]

I was wondering what (if any) shims you use to get the magic grids to respond correctly in SUSY in IE8 and under? On non-susy sites I've always used moderizr or the shim from google and they worked as expected. I'm working on my first SUSY site and the media queries for the largest size won't kick in. http://dev.apehangar.com It's not clear to me what sort of "shim" you are looking for. I don't know any good way to make MQs work in IE8, but Susy does have an option to output styles under a fallback class . Those styles wont respond dynamically, but you can use it to send IE a desktop site:

Susy: Creating a grid for given screen widths (breakpoint px values) and not knowing the width of a single column (a non-content-first approach)

阅读更多关于 Susy: Creating a grid for given screen widths (breakpoint px values) and not knowing the width of a single column (a non-content-first approach)

I'm using Susy . I failed leveraging the content-first approach and decided to go window-px-widths-first At first i tried the content-first approach to grids, but soon i found my site behaving unexpectedly on different devices. It would display a mobile layout where i wanted a tablet layout, etc. I ended up adjusting em values of Susy settings for them to match certain screen widths (px values). The code got ugly and i realized that i wasn't actually using the content-first approach any more. Here's a static snapshot of the homepage of a site that i created using this faulty approach and a

Susy: How to extend content box to cover grid-padding as well?

阅读更多关于 Susy: How to extend content box to cover grid-padding as well?

问题 I just started to play with Susy. I have a 12 column grid that has grid-padding on it. Now i want the header of my page to span the whole grid including the grid-padding. What I'm doing right now is calculating the overall width and then setting a negative margin on the header. That's feels rather hacky to me... Is there a cleaner way to do it? $total-columns : 12; $column-width : 3.5em; $gutter-width : 1.25em; $grid-padding : 2em; $total-width: ( $total-columns * ($column-width + $gutter

Weird misalignment in my Susy layout

阅读更多关于 Weird misalignment in my Susy layout

The elements I set the Susy span-column() mixin to, do not obey to it. They are misaligned ever so slightly. How do I achieve perfect alignment of my HTML elements? Screenshot of full website misalignment Detail : <header> and <nav> misalignment Detail : <section class="main"> misalignment Here is my Sass code @import compass @import susy @import normalize /* Susy Settings */ $total-columns : 5 $column-width : 4em $gutter-width : 1em $grid-padding : $gutter-width $desktop : 12 /* Susy-grid-background override to draw out horizontal lines */ =susy-grid-background +grid-background($total-columns

Susy grid - any (easy?) way to make 'columns' the same height?

阅读更多关于 Susy grid - any (easy?) way to make 'columns' the same height?

问题 Getting my feet wet with Susy/sass/haml etc (using adjusted middleman - with latest susy from master branch) Have this in grid.css.scss @import 'susy'; $total-columns : 8; $column-width : 4em; $gutter-width : 0em; $grid-padding : $gutter-width; $break-max : 12; $container-style: magic; // Container .page { @include container($total-columns, $break-max); } // Layout .header { @include at-breakpoint($break-max) { @include pad(1,1); } } .pagenav { clear: both; @include at-breakpoint($break-max)

Weird misalignment in my Susy layout

阅读更多关于 Weird misalignment in my Susy layout

问题 The elements I set the Susy span-column() mixin to, do not obey to it. They are misaligned ever so slightly. How do I achieve perfect alignment of my HTML elements? Screenshot of full website misalignment Detail : <header> and <nav> misalignment Detail : <section class="main"> misalignment Here is my Sass code @import compass @import susy @import normalize /* Susy Settings */ $total-columns : 5 $column-width : 4em $gutter-width : 1em $grid-padding : $gutter-width $desktop : 12 /* Susy-grid

Unable to activate susy-2.1.1, because sass-3.2.17 conflicts with sass (~> 3.3.0)

阅读更多关于 Unable to activate susy-2.1.1, because sass-3.2.17 conflicts with sass (~> 3.3.0)

I have installed the latest versions of compass, sass and susy. But still I am getting this error: Unable to activate susy-2.1.1, because sass-3.2.17 conflicts with sass (~> 3.3.0) Anyone knows how this Ruby thing works? This is the list of my installed gems: *** LOCAL GEMS *** CFPropertyList (2.2.0) chunky_png (1.3.0) compass (0.12.4) compass-core (1.0.0.alpha.19) compass-import-once (1.0.4) compass-rails (1.1.3) fssm (0.2.10) libxml-ruby (2.6.0) multi_json (1.9.2) nokogiri (1.5.6) rb-fsevent (0.9.4) rubygems-update (2.2.2) sass (3.3.4, 3.3.3, 3.2.17) sqlite3 (1.3.7) susy (2.1.1) If you use

Unable to activate susy-2.1.1, because sass-3.2.17 conflicts with sass (~> 3.3.0)

阅读更多关于 Unable to activate susy-2.1.1, because sass-3.2.17 conflicts with sass (~> 3.3.0)

问题 I have installed the latest versions of compass, sass and susy. But still I am getting this error: Unable to activate susy-2.1.1, because sass-3.2.17 conflicts with sass (~> 3.3.0) Anyone knows how this Ruby thing works? This is the list of my installed gems: *** LOCAL GEMS *** CFPropertyList (2.2.0) chunky_png (1.3.0) compass (0.12.4) compass-core (1.0.0.alpha.19) compass-import-once (1.0.4) compass-rails (1.1.3) fssm (0.2.10) libxml-ruby (2.6.0) multi_json (1.9.2) nokogiri (1.5.6) rb