BLOG

img
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>

...

  <!-- Required meta tags -->

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

...

  </head>

  <body>

...

  <!-- Optional Javascript -->

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  </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>

<html class="no-js" lang="en">

  <head>

...

   <meta name="viewport" content="width=device-width, initial-scale=1.0" />

   <link rel="stylesheet" href="css/foundation.css" />

  </head>

  <body>

...

   <script src="js/vendor/jquery.js"></script>

   <script src="js/vendor/what-input.js"></script>

   <script src="js/vendor/foundation.min.js"></script>

   <script>

   $(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>

<html class="no-js" lang="en">

  <head>

...

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/UIKit/3.1.5/css/UIKit.min.css" />

  </head>

  <body>

...

   <script src="https://cdnjs.cloudflare.com/ajax/libs/UIKit/3.1.5/js/UIKit.min.js"></script>

   <script src="https://cdnjs.cloudflare.com/ajax/libs/UIKit/3.1.5/js/UIKit-icons.min.js"></script>

  </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
the-advanced-personalization-handbook

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

Vijay Kumar UI Developer | Altudo


Talk to our Experts

Talk to us about how we bring together 1:1 personalisation, deep Martech Expertise, CX & Demand Gen Strategy, Engagement Analytics & Cross-Channel Orchestration to drive award winning experiences that convert

Get in touch for a complimentary consultation or a demo today.

Expert Workshops

Free workshops, expert advice & demos- to help your realize value with Sitecore

Register

Session Presentations

  • Sitecore + SFMC= Marketing Success
  • Transforming The Future Of eCommerce
Meet Us

Giveaways:

Participate in our event survey , meet us at our booth , get free giveaways & a chance to win an iPhone 11

Let’s go
Close Button