BLOG

Vijay Kumar Author's Perspective

3 Minute read

Bootstrap vs Foundation vs UIKit

Introduction

When it comes to designing, there is a recurring question if or not we should use responsive design frameworks. So, the ground reality is that the use of responsive design is increasing with each passing day.

In this blog, we will discuss about three famous CSS frameworks that are used for developing either websites applications and/or emails. Before getting into the details of each framework, we must understand the importance of CSS frameworks. CSS offers a better and faster method to build responsive websites and web applications. A basic structure is provided to developers by CSS which includes grids, interactive UI patterns, tool tips, buttons so that they do not have to start web development from scratch.

Bootstrap

Bootstrap site

Currently hosted over GitHub, Bootstrap is one of the most popular CSS frameworks. It is a responsive, mobile-first CSS framework to develop projects over the web. It contains ready-to-use components which are developed with HTML, CSS and JavaScript. The word that best describes Bootstrap is “responsiveness”.

Official Website: https://getbootstrap.com/

Foundation

Foundation site

Foundation is a responsive front-end framework that aids designing applications and emails in addition to responsive websites. Foundation is a completely customizable, semantic and mobile-first framework that is used by many professional developers and designers.

Foundation, first released within a month of Bootstrap in 2011, is a class of front-end frameworks for not just websites, but applications and emails too!

Initially Foundation was released as an internal tool at the Zurb foundation and was finally released as it is known today- a framework. This framework focusses on mobile-first responsive designs and has a similar grid system as that of Bootstrap with 12 columns to select from. Foundation’s source code is an open source with an optional JavaScript option.

Official Website: https://get.foundation/

UIKit

UIKit site

UIKit is a modern, lightweight framework with a huge emphasis on modularity to create web interfaces. It is a relatively new, open-source framework with about 15k stars on GitHub. UIKit helps developers to create responsive designs, with automated continuous deployment on BrowserStack.

Official Website: https://getUIKit.com/

How to use Bootstrap

While building a new web page using Bootstrap, the below-mentioned steps need to be followed:

Use the HTML5 doctype
Create a viewport meta tag
Import the Bootstrap CSS in your head tag
Import scripts in the order of jQuery, Popper.js and then bootstrap.min.js to use any of Bootstrap’s JavaScript functionalities

Demo:

<!doctype html>

<html>

<head>

...

...

</head>

<body>

...

</body>

</html>

How to use Foundation

To use Foundation, you need to follow the below-mentioned steps:

Download the Foundation resources
Use the HTML5 doctype
Add the Foundation CSS file in the head tag
Include jQuery, what-input.js and Foundation’s scripts
Just before ending the body tag, call the foundation() function to attach the Foundation properties to various DOM elements

Demo:

<!doctype html>

<head>

...

</head>

<body>

...

$(document).foundation();

</script>

</body>

</html>

How to use UIKit

Using UIKit is as simple as using other frameworks. To use it, you need to follow the below-mentioned steps:

Include the HTML5 doctype
Load the UIKit CSS file
Include UIKit’s scripts for functionality and icons

Demo:

<!doctype html>

<head>

...

</head>

<body>

...

</body>

</html>

Companies Using Bootstrap, Foundation and UIKit

Responsive design framework is being utilized by almost all the companies at a global level. Some of the prominent names that have caught the viewers by the innovative implementation of design frameworks are tabulated here:

Bootstrap	Foundation	UIKit
Spotify	Nubank	Lumeneo.com
Udemy	LaunchDarkly	Crunchyroll
Twitter	Accenture	Dorper
Iz-shadow.us	Docker	Rover.com

Ebook

The Advanced Personalization Handbook

Download ebook

Conclusion:

Responsive web design is a pragmatic and economical approach to modem web design
Traditional design methods become unmanageable when going responsive
Mobile first helps us refocus on users and what they really need and want