5 Awesome Libraries That Enhance Twitter Bootstrap
Twitter's Bootstrap creates a CSS standard for "devigners" to build websites extremely fast. Today, I talk about 5 free libraries that enhance Bootstrap to give you more functionality.
With the release of Twitter's Bootstrap in 2011, web devigners doubled (or even tripled) their productivity because of this CSS framework. It provides a suitable, speedy, and useful framework to build and/or prototype a website's layout and structure.
But where do you go when you need additional components or need to extend Bootstrap?
While this isn't a library per-se, Bootsnipp is the first place I head to for design elements or code snippets dealing with all things Bootstrap. You can even see it on their homepage.
At last check, there were 62 pages of 9 per page. That's 558 layouts/controls that were created using Bootstrap that you can use for your own website. Ehh, I guess you could call it a library of 558 designs.
Bootsnipp provides a design sample of a UI design for whatever you want to integrate into your site in a simple and easy to use interface.
An excellent resource for Bootstrap developers and designers!
- Infinite Scroll
Along with these controls, they even have a section dedicated to building your own extensions, and if you are new to building forms with Bootstrap, they included a FormBuilder to dynamically create a form and grab the source code to integrate into your own website.
I should note that the FormBuilder only uses the elements from the Bootstrap library and does not include their controls in this utility.
Overall, FuelUX is one of the latest open source libraries that I have come to love since it extends Bootstrap and saves me the hassle of building out other controls.
Jasny Bootstrap is one of those libraries that has some interesting controls that are not used as commonly as other standard UI controls, but these controls are valuable nonetheless.
There are a couple more controls that provide additional functionality to Boostrap that you wouldn't have to go and lookup on StackOverflow. Even though this library is small, it does contain some valuable controls that are what I consider "taken for granted," but necessary for modern layouts and design.
Their About page gives the best description of what PatternFly is:
PatternFly is a community project that promotes design commonality and improved user experience. Its offerings include visual and behavioral patterns based on research and UX best practices that solve common design problems. Our design process is iterative; the best ideas win until a new and better idea comes along. We value collaboration and meritocracy and invite anyone to participate in our effort to improve user experience across IT products and applications.
If you click on Widgets, then Overview, you get this explanation:
In essence, PatternFly is a customized version of Bootstrap 3 with a few extra widgets thrown in.
There are some additional controls thrown into the mix as they said, but personally, my interests turn to their Layouts/Patterns section of the site.
PatternFly has a list of standard layouts of how you want your application to look using their library. If you want a standard PatternFly layout, use the Basic Layout. If you have the need for a Dashboard or a portal-style website, use the Dashboard layout.
I'm pretty sure as this library starts to grow, there will be a number of plug-and-play layouts making it even easier to build a cookie-cutter website.
The templates are just that: a framework for how you want your <x> to look like. If you're a seasoned designer or developer, you know that your Grid needs a way to page your data, a way to search, a way to sort...all standard functionality in your data grid. This would call for the Data Table Template.
They have the following templates included in PatternFly:
- Data Table
- Usability Testing
So if you are familiar with Bootstrap and want that Enterprise look-and-feel, this may be a great library for you since it does have that standardized look-and-feel to it.
While I personally haven't used this library, I "spotted" it a couple of months ago and will be looking into it a little more.
Dropdown Menus Enhancement
While this library is small, it definitely provides a punch.
The Dropdown Menus Enhancement library takes what I would consider a crippling part of Bootstrap's dropdown menus (using the SELECT/OPTION tags) and provides various improvements to the control making it more standardized.
While the Sub-Menus feature added to the navbar control are definitely a welcome addition, my attention to the dropdown (ok, I'm calling it a combobox from here on out!) is quite impressive and is why I'm including this library in this list.
For all you seasoned web developers out there, we all know how hard it is to add a checkbox list to a combobox, don't we? Or how about when a user selects an option and the combobox doesn't display the option they selected?
Well, this library takes the frustration out of how a standard combobox should work in a web form and adds more functionality to it, making it something that should be in every designer's toolbox.
While I know there are more Bootstrap libraries out there, these were the five that stood out to me the most. I selected them because they offer the most bang-for-the-buck (Yes, I know they are open source).
If I'm looking for specific UI functionality or presenting users with a unique way of entering data or interacting with them, I would recommend any of these five libraries to build on top of an already outstanding CSS Framework.
Have I missed a library that you use all the time? Let me know in the comments below.