Building Your Own Front-End UI Framework Akin To Bootstrap and Foundation
The Web Dev Zone is brought to you in partnership with Mendix. Discover how IT departments looking for ways to keep up with demand for business apps has caused a new breed of developers to surface - the Rapid Application Developer.
I've been meaning to write about this before but never got the chance. I've been writing about using Twitter Bootstrap and Zurb Foundation as great front-end UI frameworks that not only allow a back-end developer some freedom from front-end development but also allow front-end developers to start with a solid base. But, as I've addressed in my article about similarity of sites built with bootstrap, this kind of over usage can lead to monotony.
Well, there are several front-end solutions in the making that are trying to distinguish themselves by offering the same usability options and features which usually include:
- responsive grid
- typography settings
- navigation UI
- form UI
- error UI
The advantage of your OWN framework
- Grid - you can use anything from the 960grid to Bootstrap's grid, to even the aforementioned Mamertkit. Grid creators usually include responsiveness as well so you'll tackle many things at once
- Typography - you can easily setup a baseline rhythm with different calculators. Make sure you hit tags like "code" and typography as well. I think everyone is used to pretty much a standard. Same goes for lists. You can copy this from Bootstrap .
- Tables - it's another element that has "typical" and standard styling which includes striped tables, column borders, hover rows/columns etc.
- Input - basic input styling
- modifiers - this includes "error" modifiers for tables, inputs etc.
- buttons - create your own buttons and your own button effects. Most frameworks include a "primary" button, "error", "warning", "sucess", and "info" as well as a "disabled" state. Button groups are also common.
- Tabs and dropdowns - this is a great way to organize information and again, it's become a standard for frameworks.
- "badges" and "labels" - these are "span" classes of sorts to identify certain elements.
- navigation - again, another place you can really make yourself shine. We all know the "bootstrap" bar. We're even getting to the point of recognizing "ui framework" bar. If you check out foundation, bootstrap, and even junior, you'll find a similar top menu bar.
- icon fonts - you can use Font Awesome, the popular alternative to Bootstrap's default.