Foundation CSS Introduction

Last Updated : 14 Feb, 2022

A Foundation is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is based on bootstrap, which is similar to SaaS. It's more complex, versatile, and configurable. It also comes with a command-line interface, making it simple to use with module bundlers. Email framework provides you with responsive HTML emails, which can be read on any device. Foundation for Apps allows you to build fully responsive web applications.

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.

Syntax:

<section class="callout large primary">     <h1>Hello Geeks</h1>  </section>

Installing Foundation: We can use Foundation using any one of the following methods:

Method 1: Go to the official documentation of the Foundation https://get.foundation/ and click on the Download All button to use the foundation offline.

Method 2: Use the following CDN Links inside the head tag.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>

Now let's understand the working of foundation using an example.

Example: This example illustrates the use of the CSS Foundation’s classes for making the blogging webpage.

HTML

<!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= "https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css" /> </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=     "https://code.jquery.com/jquery-2.1.4.min.js">         </script>         <script src= "https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js">         </script>                  <script>             $(document).foundation();         </script>     </div> </body>  </html>

Output:

Advantages:

It is open source and has good community support.
It is easy to use but you must have a basic understanding of HTML and CSS.
It offers various templates that you can use to make your website with much lesser effort.

Disadvantages:

It may take some time for beginners to learn.
It offers very less themes as compared to other frameworks available.

Foundation CSS Global Styles

kartik

Improve

Article Tags :

Foundation CSS Introduction

Similar Reads

Foundation Setup

Foundation Containers

Foundation Navigation

Foundation Typography

Foundation Controls

Foundation Media