开发者

Susy: positioning of element in root context

This is my first time using Susy. I really like what I'm seeing in the docs / tutorials, but I've encountered some unexpected results with some of my first layout attempts.

Version info:

>gem install compass-susy-plugin
Successfully installed sass-3.1.2
S开发者_Go百科uccessfully installed chunky_png-1.2.0
Successfully installed fssm-0.2.7
Successfully installed compass-0.11.1
Successfully installed compass-susy-plugin-0.9

>ruby --version
ruby 1.9.2p136 (2010-12-25 revision 30365) [x86_64-darwin10.5.0]

The image below shows the result I'm getting using the tutorial html and screen.scss verbatim:

Susy: positioning of element in root context

As you can see, inspecting the h1 element shows it sitting just off the grid. Is this normal?


See my comment on another similar question:

Susy isn't just another grid system like all the others. It was designed to fulfill a very specific purpose: grids that are fluid on the inside. The units you use to create the grid are applied to the container, not to each column. Everything inside is built with percentages. What you are seeing is normal. It's true of all fluid grids, because of sub-pixel rounding. It's not a bug, it's a part of building responsive web sites.

If you need pixel-exact grids, Susy is the wrong tool for you. It all depends what you are trying to build.

Re-size your browser to see how it works. You'll notice the grids snapping-to and floating within a few pixels of their guides, but the grid stays intact and never triggers the horizontal scroll-bar.

Cheers!

-e


If I slowly expand the browser window in Chrome vs Firefox, the grid and text jump around more in Chrome than Firefox. It appears Firefox is more precise with the layout (which may impose a rendering speed penalty).

In Firefox, everything always lines up perfectly and moves together -- the text areas and the grid -- as I resize. In Chrome, I can see the footer text moving at different times vs the article text vs the grid vs etc., as I resize.

Here's an example where the text and the grid were off by quite a few pixels in Chrome:

Susy: positioning of element in root context

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜