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
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 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 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:
Spotify | Nubank | Lumeneo.com |
Udemy | LaunchDarkly | Crunchyroll |
Accenture | Dorper | |
Iz-shadow.us | Docker | Rover.com |
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
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.
Free workshops, expert advice & demos- to help your realize value with Sitecore
RegisterParticipate in our event survey , meet us at our booth , get free giveaways & a chance to win an iPhone 11
Let’s go