DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Frameworks
  4. Building Your Own Front-End UI Framework Akin To Bootstrap and Foundation

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

Antonin Januska user avatar by
Antonin Januska
·
Jan. 28, 13 · Interview
Like (0)
Save
Tweet
Share
15.81K Views

Join the DZone community and get the full member experience.

Join For Free

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!
Framework Bootstrap (front-end framework) Foundation (framework) Database

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Upgrade Guide To Spring Data Elasticsearch 5.0
  • Hackerman [Comic]
  • Real-Time Stream Processing With Hazelcast and StreamNative
  • What Is Policy-as-Code? An Introduction to Open Policy Agent

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: