Web design clients today expect many things in a ‘finished’ product: support for all modern browsers, graceful degrading, support for many devices, speed in loading, coherent design choices, intuitive site behaviors, and pixel-perfect design. While it’s possible to meet those expectations starting from scratch, hundreds of hours could be wasted reinventing the wheel. That’s why many designers and developers include front end frameworks comprised of common UI components, grid systems, design components, and behaviors. Finding a front end framework that works for you can save you innumerable hours in current and future projects, and allows designers and developers to focus more on fine tuning the design and higher level conceptualization and execution. Today there are more front end frameworks than ever, each with their own pros and cons. We’ve selected some of the most well reviewed frameworks at the start of 2018 below.
Twitter Bootstrap is the most popular mobile-first responsive framework online utilized on almost 4% of sites on the entire web (and almost 1/4th of top million ranked sites). A wide variety of components are included in the default configuration including a built-in responsive grid system, many pre-built UI components, and plugins built on jQuery. The expansiveness of this framework’s offerings and wide adoption mean there is a huge community of Bootstrap users to learn from online. And if you’re having trouble customizing your app or site using Bootstrap, chances are another user has already detailed a solution online. Built in SASS mixins and variables allow users to quickly customize the feel of their Bootstrap project and avoid Bootstrap’s “out-of-the-box” look. One of the only downsides of Bootstrap is its relatively large default filesize. At ~276K for just the CSS framework, it’s one of the large frameworks out there. With this said, users can choose which components they would like to include in their installation. One further CON about Bootstrap is its regular reliance on HTML classes to style pages, which unless used wisely can become messy and hard to maintain. With that said, Bootstrap is one of the most reliable, widely-used, and fully-fleshed out CSS frameworks available today and is at the very least worth a trial run.
Foundation – Responsive Front-end Frameworks
Bulma is an open source CSS framework built with SASS and with full flex box integration. While Bulma has a much smaller community than Bootstrap and Foundation, it’s particularly easy to use with just a handful of well-crafted UI components and default styles. Three of the largest selling points of Bulma include it’s modern cross-browser compatible nature, its ease of learning, and it’s small file size. The entire framework comes in a package of less than 90k and is modularizable to make it even smaller. While Bootstrap and Foundation utilize easily-identified class names, Bulma takes this a step farther and offers what is almost a declarative experience. Want a button to be larger? Add the “is-large” class. Want a button to be the site’s primary color? Add the “is-primary” class. Bulma’s declarative nature along with basically all of the most common UI components one could want makes it a powerful contender for the best CSS framework for 2018.
UIKit is a modular front end framework built to help establish fast, robust, and modern looking applications and pages. While the files size of all UIKit’s components is similar to Bootstrap or Foundation, UIKit has one of the largest ranges of UI and interactivity components and users may choose which they wish to incorporate in their site. This can mean users can utilize the performant UIKit components while keeping file size miniscule with a little planning. Further PROs of using UIKit include a wide variety of built in animations, a clean modern style out of the box, the ability to quickly alter the style of a UIKit site substantially, and the ability to choose whether you download the core files in CSS, SCSS, or LESS. Two CONs of UIKit include the relative lack of developers (and thus learning resources online) and the large range of classes used to support the wide range of components contained in the library (with that said, we’ve mentioned it’s modular and users may include only the components they plan on using).
Mini.css is perhaps the opposite of Semantic UI (not in a bad way) offering a solid flex box-based, responsive css framework that comes in at about 7kb when Gzipped. That makes mini.css our smallest css library reviewed, and yet it works as expected on most every browser. Components mimic the most in-demand features in Bootstrap and Foundation and is bundled into ten modules: core, grid, input control, navigation, table, card, tab, contextual, progress and utility. PROs to the framework include it’s miniscule file size, modular nature, its highly customizable nature, and support for all modern browsers. CONS for the platform include the fact that mini.css does not have a huge community to help provide tutorials or help troubleshoot. With that said, the relatively bear bones nature of Mini.CSS should be an easy first building block for many projects looking for page speed and speed of development.
Materialize is based on Google’s Material Design framework, and provides a device agnostic style framework. Material Design is quite opinionated, but for those already hooked on Material Materialize provides great looking standard styles “out of the box.” For those unfamiliar with Material Design, it seeks to provide a tactile experience on sites utilizing concepts such as physics, space, momentum and light. Materialize also provides a number of components and behaviors not routinely found in other front end frameworks including badges, scrollFire, ScrollSpy, and wave behaviors. The entire package is on the larger side, yet can be compiled from SASS and minified for a quicker production experience. Utilizing all components of the framwork minified comes to aroudn 275kb. One CON for some designers and developers is the fact that Materialize does not use FlexBox, meaning lower compatibility with Internet Explorer 10+ and potential lack of future cross-browser compatibility. However, for those looking for a starter framework that is truly Material Design inspired, Materialize is a great option.
Material Design Lite
As one might expect from the name, Spectre is one of the most lightweight front-end frameworks we’ve surveyed for this article. Coming in at 10KB for all components fully GZipped, it will leave your projects loading lightning fast on a wide range of devices. The framework is built off flex box for intuitive vertical allignment and coverage of Internet Explorer 10+. All of the expected UI components are included, and include avatars, empty states for the loading of dynamic content, and progress “step” illustrations. With that said, stylings are relatively basic (though very consistent). That means this is a great framework for users looking to build off of an unopinionated base. Some users have noted that they prefer the minimal design choices and that design is much less “clunky” than the “out of the box” Bootstrap or Foundation styles. It should be noted that some features included in other frameworks are still in the “experimental” stage with this framework, including comparison sliders, parralax, off-canvas, and progress elements. Though many of these ommisions can be easily worked around with other light weight inclusions.
Kube is a relatively lightweight CSS and JS framework with a unique focus on typography, minimalism, and performance. For the right type of site, Kube is a great starting point, and comes in at about 85KB fully GZipped (placing it in the middle of the road as far as file size). Unique and useful featuers of Kube include all of the expected UI elements, a host of utilities, custom plugins (for easy extensibility), animations, and SASS Mixins. Additional notes include the fact that Kube is built on flex box, meaning that it future proofs elements of your site and provides support for Internet Explorer 10+. Kube also provides unique spacing and allignment decisions based on a 4px vertical grid, ensuring supplort for all device sizes.