Sweet Bootstrap Web Dev Tricks
Jan. 2, 2014
Resources for Building Awesome Things
Whether you're creating a web app, or structuring out a complex website, you need to have a clean and neat front-end. Many have turned to Twitter Bootstrap as a sleek solution for structuring their websites. Aside from normal styling, Bootstrap has a lot of nice components built-in: Modals, Alerts, Popovers, Carousels, and a lot of commonly used elements.
Why am I telling you this?
Even if you're a Bootstrap master, and you've used all of the latest components in your websites (one word: Jumbotron), it's important to know there are 3rd party plugins that can make life a lot easier. I stumbled across an awesome post earlier from the founder of Tutorialzine, Martin Angelov. He highlights 50 plugins that extend Twitter's Bootstrap. There are widgets for switches, clocks, calendars, and color pickers. You'll find plugins to scale your social buttons, create guided tours for your site, and auto-generate a scroll-spy table of contents from the headers on the page. Our favorites: Bootstrap Switch, WYSIHTML5, Tablecloth, Tocify, and Bootstro.js.
A neat plugin that replaces your form's checkboxes with an iOS style on/off switch.
A new solution to an old problem. This plugin replaces text areas with an HTML WYSI editor. Having used a number of different solutions for editors, this is a much awaited solution.
Tablecloth stays true to its name, prettifying your tables. As their website says: "Making HTML tables suck (a little bit) less."
Automatically generates a Table of Contents for your page based on your headers. This even includes a Scrollspy feature. (Setting one of these up in vanilla bootstrap takes some figuring out, so having it do this for you is awesome!)
Create a "Tour" for your website, highlighting your favorite points and explaining your key features.
Be sure to check out Angelov's post.