Bluemini.comBluemini.com

Bluemini on fluid/responsive grid

posted: 03 Feb 2012

Last night I launched my first attempt at a fluid/responsive grid layout for Bluemini.com. Using CSS3 media queries to apply different styles based on client width and a fallback basic fluid design for IE8 and lower that don't support CSS3, the outcome is very acceptable. I chose to only support 3+1 width configurations.

1. A max-width of 990px where anything above that width will get side margins and a background color 1b Below 990px the grid becomes fluid and columns will scale as percentages of the overall width
2. Below 768px the right hand column is moved below the main content of the blog.
3. Below 400px we get an effective single column layout with the blog at the top, followed by the about and the nav I move the nav/about sections around by having my basic HTML render with the content first, then about, then nav.

I didn't design it to be 'mobile first', but essentially, that's what it ended up doing. I render the HTML so that the natural order is how I want the content to display on the smallest screen. The basics of the layout come down to this

Wrapping the content and about with their own div means that it can be styled as its own entity and separately from the nav. Full screen: the wrapper gets floated right and the nav floated left (within wrapper content floated left, about floated right). Page has a max-width of old fixed with (990px) Middle: change the divs inside wrapper to both go full width so the content is above the about Narrow: essentially remove all float and the contents renders in natural order.

keywords: responsive

Comments

There are currently no comments...

Submit a comment

• coldfusion [8]
• random [7]
• projects [6]
• blog [3]
• productivity [3]
• video [3]
• funny [2]
• palm [2]
• pre [2]
• renewable energy [2]
• us visit [2]
• clothing [1]
• conspiricy [1]
• Cube [1]
• Dilbert [1]
• django [1]
• eclipse [1]
• flash [1]
• flying [1]
• Google [1]
• gromit [1]
• hobbies [1]
• holiday [1]
• http [1]
• IO2008 [1]
• java [1]
• life [1]
• linux [1]
• London [1]
• NetConnection [1]
• NetStream [1]
• outlook [1]
• phantomjs [1]
• python [1]
• recipe [1]
• responsive [1]
• rhino [1]
• seattle [1]
• socks [1]
• solar power [1]
• sustainability [1]
• testing [1]
• time management [1]
• treo 750 [1]
• webservices [1]