I would like to do the following layout using blueprint css
P开发者_开发问答age Width = 960px
<- 20px -> <------- 600px -------> <- 20px -> <--- 300px ---> <- 20px ->
left main content middle right rail right
gutter gutter (ad unit) gutter
What would the appropriate column width, margin-width and number of columns to make this work?
I am trying to do this with 10px columns and 10px margin but it ends up with 30px as the middle gutter (one full column + margin from the right)
Is it possible to do the following layout?
No. Not without reworking the whole framework.
Blueprint CSS uses: 950px width, 10px gutters, and columns that start at 30px and increase by 40px increments. So: 600px would become 590px and 300px would become 310px.
You could tweak the entire framework, adjusting every component's dimensions...
Or, you could adapt your columns to be one of: (30, 70, 110, 150, 190, 230, 270, 310, 350, 390, 430, 470, 510, 550, 590, 630, 670, 710, 750, 790, 830, 870, 910) pixels...
Or, you could try the 960 Grid System. It uses 20px gutters, 960px page width, and 40 or 60px column increments. It doesn't have the nice, canned typography settings. And I'm not sure if it holds up as well, cross-browser and cross-media.
General Layout resource: http://layouts.ironmyers.com/
Out of the box, no. But you can experiment with Blueprint CSS customizers, like:
- Blueprinter
- Blueprint Grid CSS Generator
These essentially take the default Blueprint CSS files, recompute all the numbers, and spit out a new version of the Blueprint CSS framework for you.
精彩评论