Building Your Own Front-End UI Framework Akin To Bootstrap and Foundation
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 frameworkI've built my own LESS and SASS frameworks in the past and it was very useful to me. Adhering to today's standards, you could easily throw together 70% of Bootstrap WITHOUT having to touch a piece of code yourself. The remaining 30% are just for you to create your own framework and custom look. Many designers use similar "design" patterns, they rely on from similar navigation bars to almost identical footers. Such patterns and observations led me to create my own frameworks for each designer I've worked with. If you recognize what YOU reuse, add it to your framework. I use similar buttons, CTAs, and footers, and they were always a big part of my frameworks. See what works for you.
How ToSo what do you need to put together your own framework? Let's start with the stuff you CAN get just about anywhere. Make sure you use LESS or SASS for color variables and other configurations.
- 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.
Where To NowI hope this helps you out. My main points here are that CSS frameworks and Front-End Development frameworks have become a standard for very valid reasons but that does not mean you're stuck with the small few popular ones out there. It also doesn't mean you should sacrifice your own design abilities!
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)