Bootstrap From Twitter Is A New Web Designer’s Dream

I’ve just finished designing a website, and I used a ton of CSS: everything from laying out my content, to styling elements like the headings. Then, Twitter released Bootstrap, and I’m pretty disappointed I didn’t delay starting to design it.

Say you’re a web designer new to the scene and don’t know all the ropes. Bootstrap from Twitter is aimed at providing a bunch of really useful CSS classes and IDs in a single library that’s simple to use, removing a lot of the load of designing a website from scratch. Bootstrap is a package, and includes a ton of user interface elements styled to be usable in any web app, or site.

Setting the Scene: Twitter’s Coding History

Twitter uses the following passage to describe the history its engineers lived in when working on the beginning renditions of Twitter.

In the earlier days of Twitter, engineers used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented and development quickly accelerated during Twitter’s first Hackweek.

Especially as a newbie without the necessary skills to write it first hand, it’s very tempting to use different snippets of code for different tasks, but Bootstrap merges these all together into one, easy-to-use library. As a bonus, it’s written by developers of one of the world’s most popular websites, offering some security into making sure your site works with these elements.

The Specifications

Bootstrap is effectively just a bunch of CSS you can utilise fairly easily in your web designs (the GitHub mini-site even has the necessary code snippets on show to allow for a simple copy-paste job). If you want, you can extend the CSS with the Less preprocessor, requiring a single extra line of code and offering the same code examples.

Bootstrap covers a wide variety of different elements, from forms to headings, buttons to modals. Their use is aimed at web application development, especially with all the user interaction elements such as forms and buttons being included, but the non-interactive ones are awesome enough to be integrated into a static site too.

One of the sections covered by Bootstrap is typography.

There’s also grid system and other layout features included in Bootstrap to help style your site at the most basic level.

Looking at the Elements

All the different elements look very Twitter-ish, sharing a lot of the same styles as the social network. Look no further than the navigation bar to see the similarities with Twitter’s design, although it is still flexible enough to be used in a lot of projects. Other things like the modals are less frequently seen on the twitter site, but are likewise so flexible that the ties don’t matter.

Of course, these are professionally designed and that’s noticeable. Everything looks very polished and overall attractive, especially the typography throughout. A lot of elements offers alternative styles (such as being able to “disable” a button, or put zebra stripes in a table), which are easy to add or remove at will.

If you are working on a web app, even if you don’t want to actually take the Bootstrap CSS and use it, there’s still a lot of inspiration to be taken away from the styles and, since it’s just CSS, can be examined and replicated in your own work.

Insanely Easy Integration

Even though I’d finished designing my site and it already went live, I was still working to perfect a final feature and decided to try out using the table styling. Naturally, just copy and pasting the relevant styles into my CSS file was simple and immediately my tables started showing the Bootstrap style. If you want to go all out and use everything, you can download the file and link it up, or just hotlink it from Twitter to get the same results. It’s very simple to integrate, and, being just CSS, insanely easy to modify to your heart’s content.

Bootstrap works with Less

Bootstrap in the Future

Twitter does have plans for Bootstrap in the future, noting that they want to slim down it’s footprint while expanding the coverage. It’ll be very interesting to see how Bootstrap expands.

We want to keep working on slimming down Bootstrap’s already tiny footprint while also increasing the breadth of what it covers.

Being hosted on GitHub, Bootstrap does have a requests section which already demonstrates how Bootstrap needs to improve by adding things such as HTML5 input types and the like. That’s surely something the developers will be working on as the project pushes forward.

Final Thoughts

I love Bootstrap. If your new to web development, it provides a great range of elements to use, completely written in CSS alone, although your site might end up looking a bit too Twitter-ish through a lot of shared elements. Nonetheless, the simplicity and ease of use is too difficult to ignore if you don’t want to/can’t write your own. I can’t wait to try and use some of this stuff in a new project.

What do you think of Bootstrap? Would you consider using it in your own project? Share your thoughts in the comments.