Twitter Bootstrap 2.0 layout becomes fluid and this is a good news for developers.
The Responsive Web Design is the practice to use fluid layouts and media queries to create designs able to adapt according to the user’s screen resolution. It allows to eliminate the need to create different designs (read templates) for each device (that in these days means desktop, netbook, tablet and mobile).
If you want to read more about the Responsive Web Design approach I suggest a couple of articles from Smashing Magazine and Design Modo.
Twitter Bootstrap gives you a fluid grid layout (the default grid system is a 940px-wide, 12-column grid but you can customize it here) and many css components to create a responsive design in few minutes. It means that you create your design using the Twitter Bootstrap grid and components then the toolkit modifies and resizes columns width, headings, texts and images according to the user device resolution.
For this post I created a simple “marketing design” starting from the marketing design given with the library. I added a dropdown in the toolbar and a carousel (useful for example to show few screenshots).
Image may be NSFW.
Clik here to view.
UPDATE: The example now uses twitter bootstrap v2.2.2
I think that the Twitter Bootstrap toolkit (as also my example) can be a really useful starting point to create your own design, mainly to create a Minimum Viable Product. After that you can add your personal style avoiding to create an other Twitter clone Image may be NSFW.
Clik here to view.
