If you think that you can lie low while the frenzy over responsive design subsides, think again. From a mere add-on design feature, it has grown to be the natural choice of site owners, from big brands to medium and small business owners. The reason is simple – today ‘mobile’ is the word. Everyone is connected to the web through every possible media, not limited to desktop, laptop and i-pads. When smart phones, Android and iPhones rule the day, it is but obvious to build a website that is accessible in its most impressive view on these devices. And therefore, responsive design is the call of the day.
However, worry not, for responsive design is not as difficult as it may sound. Especially for HTML developers, it’s just about going one step further. And to simplify things, you may turn to Twitter’s Bootstrap. The not-so-talked-about framework is about a year old, an open source platform that allows a lot simpler development of a website with cool features in less than half the time and effort, and helps in the implementation of responsive designs with a click of a button.
You will get a detailed tutorial about how to use it to perfection from the Bootstrap website, so I will not make an attempt to go down that road. But while I was researching about this toolkit, what I found lacking is a good reason to use Bootstrap in the first place. Undecided over whether it is just another open source framework in the market, or if it is worth my time, I read all Bootstrap from sources I could lay my hands on, and finally am impressed with the results of implementation. So, I am going to give you a brief of what you should and should not expect from this freeware.
First of all, let me make this clear –Twitter has built Bootstrap with an aim to simplify the development phase of websites and mobile applications. Its latest version fully supports responsive themes and layouts, ensuring that your site appears consistent on all devices with varied screen resolutions. For developers who prefer building their own codes instead of relying on frameworks, it is still a lucrative option. Even if you may not (you sure wont!) use all the features it offers, you will find a few of them handy. For beginners, this is really cool, because you can use the framework to build visually appealing and interactive mobile applications pretty fast, cutting down your development time by half.
Bootstrap is not just a great tool for responsive layouts; it is equally compatible across major web browsers of modern day. The 12-column grid system allows provisions for both fluid and fixed layouts. From basic styles to more interactive and elegant front-end designs, Bootstrap encompasses a varied range of UI layouts.
Touching a bit on the features that makes Bootstrap experience really satisfying, the first one that I notice is the navigation toolkit. There is a main navigation which is simple and smart. There are options to implement a tabbed navigation. However you need it customized for your website, customizing it should be a cake walk for you.
The Grid system is like elastic – it lets you design it as you please, create different columns using a set of grids from the total of twelve, or one long row using all twelve imaginary grids. You can also have multiple rows with different patterns!
The image gallery is another feature which is fairly automated, and makes implementing a gallery simple and hassle free. Again, you can customize it to fit your overall look and feel.
Besides, you get a whole bunch of handy plugins like
- Modals (or pop-ups, as we know them)
- Dropdowns
- Popovers
- Buttons
- Pagination controls
- Alert messages
- Icons of various styles
- Tables
- Forms
- Tabs and pills with dropdowns
- Stacked tabs and pills
- Breadcrumbs
- In-line Labels
- Carousel
- Collapse
- Expand
All the above tools can be customized to a degree, good enough to serve the purpose for small to medium businesses.
While the HTML and CSS is well taken care of, meeting most of the areas of pain for a developer, Bootstrap goes beyond and should be complemented for a fairly strong JavaScript.
Having said this, Bootstrap is known to cause a few hiccups when it comes to upgrading the new version of Bootstrap. In addition, be prepared to toil hard getting your Google Maps working, along with Ajax library and HTML editors.
Against all the points it has earned, the odds are few. There are plenty of people using it (including me!). One area the users seem to agree is it is best to try it on a smaller project to see your comfort level with the framework, before you start abusing it. Bootstrap does not block you from using Jquery UI. And, it helps you create a touch-screen compatible application (which sounds like a task!) a child’s play.
