// Twitter Bootstrap: Web Guidelines for Developers
Developer Guide (HTML, CSS, CSS3, LESS)
View Web Guidelines
I’ve become very fond of the Twitter Bootstrap 2 guide and have become an advocate of it ever since I found out about it. It was created for and meant to be a guide for front-end developers to kickstart projects with common UI elements needed for most web apps and explains well how to implement it into existing code or a fresh new project. Its wonderful to base a style guide off and very easy to implement and customize especially with the use of less css. Its especially great for hybrid designer/developers like myself that can design within the browser and quickly put together prototypes and demo functional wireframes. What about those designers that don’t code or that aren’t as versed or efficient in designing in the browser but want to pass their design off to a developer that wants to use bootstrap to streamline the coding process? I can just here them thinking “It would be nice to have a photoshop template that I can use to quickly put together a comp using existing styles already set up in the bootstrap css framework code”. Well that was I was thinking.
// Twitter Bootstrap: Photoshop Template for Designers
Twitter Bootstrap for v2.0
Design Template (Adobe Photoshop, PSD)
Download Photoshop Template
As I begin to use twitter bootstrap more and more with new apps and more designers are working on different enhancements to the same app I realized it would be nice to have a photoshop template we could all use to keep consistency in the app as we decide we evolve or enhance the twitter bootstrap defaults to adapt to the brand . So I searched around to see if anyone had already created one and there were a couple but I couldn’t find one that was for bootstrap version 2 but I did find an Adobe Fireworks template created by Grady Kelly (@gradykelly) that was well put together and very close to what is on the Twitter Bootstrap 2 guide. So I decided I’d convert it over to photoshop since that is what I work best in for UX Design.
// Twitter Bootstrap: Fireworks Template for Designers
Twitter Bootstrap for v2.0
Design Template (Adobe Fireworks, PNG)
Download Fireworks Template
As I searched around for a bootstrap version 2 photoshop template I found an Adobe Fireworks template created by Grady Kelly (@gradykelly) that was well put together and very close to what is on the Twitter Bootstrap 2 guide. If you want to check for updates on the fireworks template visit the Extending Firewoks (@extendingfireworks) website. I’m providing it here as a resourse in the case that those looking would prefer it in Fireworks over Photoshop.