Frontend UI frameworks lay the groundwork for new projects to save you time and frustration. There are dozens to pick from and it seems new frameworks are released every year.
But I’d like to cover the best frontend UI frameworks dominating the web design ecosystem. Each of these frameworks have their own unique styles for creating grids, buttons, forms, and other page elements.
And if time is a factor then I guarantee one of these frameworks is a much better choice than just starting from scratch.
Bootstrap
Everyone knows about Twitter’s Bootstrap and for good reason. It’s one of the oldest UI frameworks with an initial release date of August 2011.
It comes with a full Sass library for customizations and JS components to build navigation menus, progress bars, breadcrumbs and so much more.
The next version Bootstrap 4 is currently under works and should be released in the near future. It’s a huge step up from BS3 and it’s a sign that Twitter is really pushing this library forward as a leader in the web space.
Foundation 6
Zurb’s Foundation library has been around for years and it recently got a major update separating into two libraries: one for sites and another for emails.
Foundation For Sites offers a minimalist UI framework for building any layout you desire. You have full control over the grid along with page components like tabs, accordions, input fields, and responsive menus.
There’s a live version on the kitchen sink page which should offer a nice point of reference to see all the UI components. And Foundation works with all of your favorite web dev tools like Grunt/Gulp, npm, and Sass/Compass.
With the support of Zurb behind this codebase it’s guaranteed to be a well-supported framework for years to come.
Petal
One of the newest CSS web frameworks is Petal, an open source CSS UI library based on LESS and created by the team at Shakr.
The library is incredibly simple and it’s only in v0.6. But it does seem production ready so it could run smoothly on any website. They’ve put up very clear documentation covering everything like grids, typography, buttons, inputs, and even modal windows.
Petal may not have the largest team but it does have a dedicated team. Their work is phenomenal to the web dev community and this framework is sure to shake things up in 2017 and beyond.
Pure CSS
Pure CSS gets back to the basics using a modular approach to CSS. This framework has many different smaller libraries targeting different elements like forms, grids, tables, and nav menus.
It’s your choice how many of these libraries you want to include in your Pure CSS project. The Base uses Normalize along with other simple resets to create a uniform look across all browsers. But you could add custom grids to also save time when building the page.
All these libraries can be merged & minified using tools built for Pure. And the team even created simple guidelines for extending the library with extra classes.
I do think Pure is one of the best UI frameworks right up there with Bootstrap. It doesn’t get as much coverage on design blogs but it should be a CSS framework on your radar.
Semantic UI
I simply adore the classy design style and clean setup of Semantic UI. This framework is currently in version 2.2 and comes with all the typical features you’d expect like grids, type, colors, and inputs.
But Semantic UI also offers custom theming with over 3,000+ different theming variables. The Semantic UI homepage offers a few pre-built themes mimicking Google, Amazon, Twitter, and a few custom themes you can clone and edit yourself.
The sheer level of depth is astounding. You can pick from pre-made layouts and use these as templates for your own work. Semantic UI has dozens of custom element styles to pick from and they’re all incredible.
Milligram
Milligram is made for minimalists who prefer to start small and grow over time. It’s an incredibly small framework measuring only 2kb when gzipped.
It’s still a pretty small project but currently in v1.3 it’s more than ready for live websites. You can install Milligram through any package manager like npm, Yarn, or Bower. But Milligram does require Normalize so you’ll have to include that library as well.
With a CSS minifying tool these can all be merged together to save on HTTP requests.
One thing I don’t love about this framework is the documentation. It is far from perfect and it basically just cascades down the page. It’s easy to skim but harder to find exactly what you need to know.
If you can work your way through the documentation you’ll be pleased with Milligram’s simplistic style.
Vital CSS
Another minimalist UI framework is Vital, an open source project created by Doximity. It runs on Sass and it’s incredibly simple to learn.
The components page explains everything you need to know about setup and layout design. You can skim through sample grids including typography, buttons, page structures, and everything else. It’s an extremely simple library so don’t expect much in the way of interactivity.
But if you just need a simple CSS framework to build out new projects then Vital can fill that void. You can also learn more from this blog post written by the Vital CSS team.
Skeleton
Bare bones, responsive, and crazy lightweight all describe Skeleton. It’s a lightweight CSS framework that only offers the absolute essentials for new websites.
It does have some default styles but they’re nothing overly flashy. In fact it’s super simple to change these styles to meet your own needs without much effort.
I think Skeleton is one of the most stable and slim CSS frameworks available. It doesn’t leave you hanging with a default browser style, but it also doesn’t overly-optimize the styles pushing for a specific design.
There’s so much you can do with this framework and to see a sneak peek check out this demo page.
UI Kit
A much bulkier and feature-rich frontend library is UI Kit. this comes with a bunch of optional files and 3 folders: “css” for styles, “images” for icons, and “js” for jQuery and the UI Kit JavaScript library.
Every bit of JavaScript can be attached to DOM elements and components as they get inserted into the page. This lets you connect a UI Kit website with other frontend libraries like Vue or React.
But you can also use this library for simple setup and creation of UI elements. The documentation page has plenty of examples to help you work through the process and create a new site from scratch.
Materialize
Google’s material design language has become the standard for all of their products. And it’s slowly leaking into the web with projects like Materialize.
This free open source framework takes material design to the next level with one layer of abstraction from CSS. It’s the easiest way to create a pure material-style layout without writing all the code yourself.
It comes with pure CSS classes, JavaScript libraries, and components made from both. You can see live examples on their showcase and find a guided tutorial on their setup page.
Wrapping Up
Why create a new layout from scratch when you have free UI frameworks that can do the heavy lifting? This guide offers the best modern frontend frameworks but I expect to see plenty more in the near future.
Whether you’re looking for a minimalist library like Skeleton or a fully-featured codebase like Bootstrap there’s bound to be a framework out there for any web project you build.
(by Jake Rocheleau)
Leave a comment