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).
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).
NOTE: The example uses twitter bootstrap v2.2.2. I am going to update the code to Twitter Bootstrap 3. Subscribe to the mailing list in order to be notified when the new version will be available.
I promise that I won’t sell your email or send you spam 😉
Download the complete code example using the button below.
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 😉