Skip to content
Related Articles

Related Articles

Foundation CSS Introduction

View Discussion
Improve Article
Save Article
  • Last Updated : 14 Feb, 2022
View Discussion
Improve Article
Save Article

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.

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

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.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!