Front-end development frameworks have been a hot topic within web designer circles for the past few months. These handy tools set out to save time and effort when it comes to the mundane tasks of designing web sites or applications. This article takes a look at 10 popular front-end frameworks and highlights their major features.
Bootstrap
Bootstrap is by far the most popular front-end framework. Created and maintained by Twitter, it is described as “a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.” It has support for responsive 12-column grid layouts and comes with several reusable components. It utilizes jQuery plugins to add animations, transitions and interactions to some of its built-in components.
Foundation
Foundation claims to be “the most advanced responsive front-end framework in the world.” It indeed takes responsive design to the next level by allowing you to selectively load entire sections based on the client device type. It also integrates fastclick.js, which provides mobile users with a snappier experience. Foundation is packed with some shiny awesomeness and allows a quicker learning curve. The best thing about Foundation is that it comes with great documentation—offered as online courses and lessons.
Skeleton
Skeleton is a lightweight boilerplate for responsive, mobile-friendly development. It is offered as a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size. It is based on three core principles: responsive grid down to mobile, fast to start and style agnostic. Skeleton is not really a UI framework—it has just the bare bones and you’ll need to work on styling it a lot. It can be a great fit if you’re looking for a lightweight framework to build a minimalist site.
Gumby
Gumby is a responsive CSS framework that is extremely customizable. It leverages Sass (a CSS preprocessor) to allow you to easily control the look and feel through changes to variables. It has some nice UI and component elements, though they are quite limited compared to frameworks like Bootstrap or Foundation.
GroundworkCSS
GroundworkCSS is a responsive HTML5, CSS and JavaScript framework. It has nice support for grid layout, form styling, typography, navigation and other commonly used patterns. Groundwork comes with Animate.css, which offers several nice transition effects entirely based on CSS3. Overall, GroundworkCSS is a good choice if you want to use a framework that comes with just the basics.
Semantic
Semantic takes quite a different approach. It harnesses natural language conventions to make development more intuitive. Instead of learning complex CSS class naming conventions, Semantic’s classes are easier to remember. The other plus of Semantic is that most of its UI components come with real-time debug, making it easier to trace JavaScript behaviors.
Zimit Framework
Zimit Framework is more of a prototyping framework. Its unified style gives each of its components a generic and pleasant style, resulting in a lightweight and user-friendly web interface. “Built with the idea of creating a robust base for a complete and uniform prototyping framework for HTML5 websites, Zimit provides a complete design skeleton and a suite of components fully stylized.” Best of all, Zimit—when compiled and minified—is just 84kb!
HTML KickStart
HTML KickStart is an HTML + CSS + JS (jQuery) frontend framework/templates/skeleton to help web designers and developers create high–quality, clean, and lean templates and web designs faster. HTML KickStart comes loaded with a bunch of elements: slideshows, suckerfish style menus, CSS buttons, form styles, typography basics, and more, so that with a little customization you can create a full featured web site layout in a fraction of the time it normally takes to design, create, code, and debug common user interface elements.
Google’s Web Starter Kit
Google’s Web Starter Kit is a collection of boilerplate code and tooling for creating multi-device websites. It comes with a multi-device responsive boilerplate, live browser reloading, built-in HTTP server, PageSpeed Insights and Saas support. Google Web Starter Kit may be more for advanced developers—for instance, to make it work properly, your system should have Node.js, Ruby and Ruby Saas Gem installed.
Hot Scripts Blog - Written by Ahmad Permessur.