Rolling Your Own Grid Layouts on the Fly Without a Framework
designshack.co.uk
Rolling Your Own Grid Layouts on the Fly Without a Framework
1–8 of 8 posts
Re: Rolling Your Own Grid Layouts on the Fly Without a Framework
#2I did this recently. I ended up using lesscss for the gory details:
@space: 10px;
@block: 60px;
.block-width ( @blocks ) { width: (@block * @blocks) + ((@blocks - 1) * (@space * 2) ); }
Re: Rolling Your Own Grid Layouts on the Fly Without a Framework
#3I know it's popular to be a contrarian, but for us non web designers who occasionally need to do page layout, the 960 Grid generator at http://grids.heroku.com/ is great. It doesn't suffer from the the cons that the author mentions - mainly bloat and overreach.
Re: Rolling Your Own Grid Layouts on the Fly Without a Framework
#4Pretty sure you can't have a width of 222.75px, it would be rounded up to the nearest pixel and wouldn't fit in the container.
Re: Rolling Your Own Grid Layouts on the Fly Without a Framework
#5Pretty sure you can't have a width of 222.75px, it would be rounded up to the nearest pixel and wouldn't fit in the container.
A relevant SO question and an article for more in-depth analysis:
http://stackoverflow.com/questions/4308989/are-the-decimal-p...
Re: Rolling Your Own Grid Layouts on the Fly Without a Framework
#6I know it's popular to be a contrarian, but for us non web designers who occasionally need to do page layout, the 960 Grid generator at http://grids.heroku.com/ is great. It doesn't suffer from the the cons that the author mentions - mainly bloat and overreach.
1 KB Grid is even more minimal, with no hack selectors like clearfix to puzzle over:
http://www.1kbgrid.com/css/grid.css - 960px example
Re: Rolling Your Own Grid Layouts on the Fly Without a Framework
#7> I also threw a “last” class on the last column to help us clear the margin.
FYI, excluding IE6, :first-child pseudo-class is universally supported. That would be a cleaner way to handle this rather than manually adding a class to the markup.
Re: Rolling Your Own Grid Layouts on the Fly Without a Framework
#8I did this recently. I ended up using lesscss for the gory details: @space: 10px; @block: 60px; .block-width ( @blocks ) { width: (@block * @blocks) + ((@blocks - 1) * (@space * 2) ); } I consider this to be the canonical piece on grid-based design: http://www.slideshare.net/riomusi/grids-are-good-2593754
There's a new book from Khoi Vinh, just read it and liked it a lot. Also it's the first book on applying grid based design on web sites instead of print: