Building Your Own Front-End UI Framework Akin To Bootstrap and Foundation

DZone's Guide to

Building Your Own Front-End UI Framework Akin To Bootstrap and Foundation

Antonin Januska

Jan. 28, 13 · Web Dev Zone ·

Free Resource

Like (0)

Comment (0)

Save

{{ articles[0].views | formatCount}} Views

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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.

So what to do now? I feel like the development world has gotten used to a certain level of standard where all elements have been declared and designed in a cohesive manner, where we have a set of standard labels, buttons, and other elements defined for future usage. We're not "programming" what we see, we're programming what we may and making sure we're not caught off guard by an addition to our html. Hell, even Javascript has already been defined. Drop in Bootstrap, and we're all used to using tabs, collapsible areas, and modals. Stuff that one might add if there is a necessity rather than pre-preemptively adding it.

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
modals
buttons
form UI
error UI

and so on. These include a small framework I stumbled on called Maxmertkit which, basically, looks exactly like Bootstrap with different buttons and a slightly different menu, offering little to nothing to the mix. But, why is it important? Because you get bootstrap without the "bootstrap look" without even needing to customize to eliminate that "bootstrap" look. You can always customize bootstrap but you will not get the same results.

So what about you?

The advantage of your OWN framework

I'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 To

So 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

Here's where you can add your own styling and utilize javascript:

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.

And last come the "plugins" or "javascript" portions:

icon fonts - you can use Font Awesome, the popular alternative to Bootstrap's default.
Modals
slideshow

That's basically it :)

Where To Now

I 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!

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

DOWNLOAD

Topics:

Like (0)

Comment (0)

Save

{{ articles[0].views | formatCount}} Views

Opinions expressed by DZone contributors are their own.

Building Your Own Front-End UI Framework Akin To Bootstrap and Foundation