Foundation CSS Introduction

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/foundation-sites@6.5.1/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/foundation-sites@6.5.1/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.

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.