In this article, we will know about the Foundation & Bootstrap frameworks in CSS, and will also understand their implementation through the example along with discussing the major differences between them.
Foundation 6: A Foundation is an open-source & responsive front-end framework built by ZURB in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
A Foundation has a slightly more advanced interface compared to other framings. The responsive menu is one of its important properties. The menu is inconceivable when it comes to functionality and can also be freely baptized using CSS. This responsive architecture allows contrivers to beget elegant websites with added of a design-it-yourself approach.
Syntax:
<section class="callout large primary">
<h1>Hello Geeks</h1>
</section>Features:
- Includes XY grids: The default grid system in Foundation allows the developer to control the layouts based on both horizontal and vertical positions.
- Smooth scrolling note: This feature contains built-in JavaScript code, in order to add the “smooth scroll” property to a specific or any link present inside the webpage.
- Easier prototyping: It facilitates built-in functionality that helps to speed up the prototyping process.
Note:
- The Foundation’s grid uses box-sizing: border-box property to apply gutters to columns, but this property & along with the ES5 features is not supported by the Internet Explorer v8.
- The browsers will not support media queries properties for displaying the mobile styles of the site.
Example: This example illustrates the use of the CSS Foundation’s classes for making the blogging webpage.
<!DOCTYPE html><html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
</head>
<body>
<!-- Start Top Bar -->
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">Blog Post</li>
</ul>
</div>
</div>
<!-- End Top Bar -->
<div class="callout small primary">
<div class="row column text-center">
<h2>GeeksforGeeks Blogs</h2>
</div>
</div>
<div class="row" id="content">
<div class="medium-8 columns">
<div class="blog-post">
<h3>Java blog <small>3/6/2021</small></h3>
<p>
Java syntax is similar to C/C++. But
Java does not provide low level
programming functionalities like
pointers. Java is one of the most
popular and widely used programming
language and platform. A platform
is an environment that helps to
develop and run programs written
in any programming language.
</p>
<div class="callout">
<ul class="menu simple">
<li><a href="#">
Author: Mike Mikers
</a></li>
<li><a href="#">Comments: 3</a></li>
</ul>
</div>
<div class="blog-post">
<h3>Python blog <small>18/8/2021</small></h3>
<p>
Python is a high-level, general-purpose
and a very popular programming language.
Python programming language (latest Python
3) is being used in web development,
Machine Learning applications, along with
all cutting edge technology in Software
Industry.
</p>
<div class="callout">
<ul class="menu simple">
<li><a href="#">Author: Mike Mikers</a></li>
<li><a href="#">Comments: 10</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src=
</script>
<script src=
</script>
<script>
$(document).foundation();
</script>
</div>
</body>
</html>
|
Output:
Customization menu of Foundation: There are several ways to customize the menu using Foundation such as the Basic menu, alignment menu, vertical menu, simple menu, nested menu, etc, for proving the flexibility along with making it an all-purpose navigation component.
Example: This example illustrates the CSS Foundation to make use of the customize column for the menu.
<!DOCTYPE html><html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<link rel="stylesheet" href=
</head>
<body>
<style>
.row {
padding: 1rem 0;
}
.singleline {
padding-right: 1rem;
}
</style>
<div class="row">
<h2>Customize Menu using Foundation</h2>
<!--Basic Menu-->
<div class="columns">
<h4>Basic Menu</h4>
</div>
</div>
<div class="row">
<div class="columns">
<ul class="menu">
<li><a href="#">
Programming Language
</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">DSA</a></li>
</ul>
</div>
</div>
<!--Alignment Menu-->
<div class="row">
<div class="columns">
<h4>Alignment Menu</h4>
<ul class="menu align-right">
<li><a href="#">
Programming Language
</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">DSA</a></li>
</ul>
<div>
<ul class="menu expanded">
<li><a href="#">Articles</a></li>
</ul>
<ul class="menu expanded">
<li><a href="#">Blogs</a></li>
<li><a href="#">DSA</a></li>
</ul>
<ul class="menu expanded">
<li><a href="#">
Programming Language
</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">DSA</a></li>
</ul>
<ul class="menu expanded">
<li><a href="#">
Programming Language
</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">DSA</a></li>
</ul>
</div>
</div>
</div>
<!--Vertical Menu-->
<div class="row">
<div class="column">
<h4>Vertical Menu</h4>
<ul class="vertical menu">
<li><a href="#">
Programming Language
</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">DSA</a></li>
</ul>
</div>
</div>
<!--Simple Style-->
<div class="row">
<div class="column">
<h4>Simple Style</h4>
<ul class="menu simple">
<li class="singleline">
<a href="#">DSA</a>
</li>
<li><a href="#">
Programming Language
</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Blogs</a></li>
</ul>
</div>
</div>
<!--Nested Style-->
<div class="row">
<div class="column">
<h4>Nested Style</h4>
<ul class="vertical menu">
<li>
<a href="#">DSA</a>
<ul class="nested vertical menu">
<li><a href="#">Contribute</a></li>
<li><a href="#">
Programming Language
</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Blogs</a></li>
</ul>
</li>
<li><a href="#">Programming Language</a></li>
<li><a href="#">DSA</a></li>
<li><a href="#">Blogs</a></li>
</ul>
</div>
</div>
</script>
<script src=
</script>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Pros:
- Semantic: Everything is semantic. We can make the markup as neat & clean without sacrificing the utility and speed of the Foundation.
- Mobile-First Design: The Foundation facilitates the building of applications for all-purpose devices. As the device size increase, the layers will be more complex for a completely responsive design.
- Customizable: The Foundation provides the customizable option for building the apps that may contain including or removing certain elements, defining the size of columns, colors, font size, and more.
Cons:
- Not recommended framework for beginners at the initial level.
- Less popular than Bootstrap.
Bootstrap 5:
A Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating dynamic websites layout and web applications. It was designed by former Twitter retainers Mark Toto and Jacob Thornton. Bootstrap is one of the most popular front-end frameworks which has really a nice set of predefined CSS codes. Bootstrap uses different types of classes to make responsive websites. Bootstrap 5 was officially released on 16 June 2020 after several months of redefining its features. It is used by many companies such as Vogue, Indeed, Walmart, Code Academy and more.
Syntax:
<section class="bts"> <h1 class="bg-success">Hello Geeks</h1> </section>
Example: This example illustrates the simple use of the Bootstrap framework for making the pill navigation menu.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
</head>
<body>
<nav class="nav nav-pills p-4 bg-dark">
<a class="nav-link active bg-warning"
aria-current="true" href="#">Home
</a>
<a class="nav-link text-warning" href="#">
About Us
</a>
<a class="nav-link text-warning" href="#">
Careers
</a>
<a class="nav-link text-warning" href="#">
Contact Us
</a>
</nav>
<p class="p-4">
GeeksforGeeks - A Computer Science
portal for geeks. It contains well
written, well thought and well
explained computer science and programming
articles, quizzes and practice/
competitive programming/company interview
Questions.
</p>
</body>
</html>
|
Output:
Bootstrap Pills Menu
Pros:
- Preprocessors: Bootstrap has vanilla CSS, although utilize the 2 popular CSS preprocessors, LESS & SASS in its source code.
- Every device, One framework: Bootstrap facilitates easy & efficient way to scales the websites or apps with a single code base, with CSS media queries.
- Full of features: Bootstrap facilitates the extensive & complete documentation for the HTML elements, that are commonly used, along with lots of custom HTML and CSS components, and the jQuery plugins, & many more.
Cons:
- Similar look pattern for every website.
- Bit heavier to load the website.
Difference between Bootstrap 5 and Foundation 6:
S.No. |
Bootstrap 5 |
Foundation 6 |
|---|---|---|
| 1. |
Bootstrap supports the SASS properties but it is actually built using LESS, which implies the Bootstrap uses both LESS & SASS. |
Foundation contains its specific CLI i.e. it only implements the SASS property. |
| 2. |
Despite of having 12-column grid system, which is the featured of both the frameworks, Bootstrap contains the fixed-width grid layout. |
Foundation contain a fluid layout. In other words, it contains a more flexible grid system. |
| 3. |
The integration of the Bootstrap class names to various HTML elements such as form elements, images, etc., is must that will ensures the responsiveness and to display base CSS styles. |
Base CSS of Foundation framework is “out of the box.” |
| 4. |
Bootstrap comprehends 12 JavaScript plugins. |
Foundation framework hold 16 JS plugins |
| 5. |
Bootstrap has a reboot.css. |
Foundation has normalize.css |
| 6. |
It permits inline forms. |
It doesn’t permit inline forms. |
| 7. | Bootstrap allows the creation of a simple & easy with elegant website having a very little knowledge of CSS and JavaScript. | Foundation facilitates slightly more complex feature ie., Do it yourself approach that will help to create more unique and custom designs. |