Foundation CSS Introduction (original) (raw)

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:

Syntax:

Hello Geeks

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.

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 `

<link rel="stylesheet" href=

"https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css" />

<!-- 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=

"" title="undefined" rel="noopener noreferrer">https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"> 

    <script>
        $(document).foundation();
    </script>
</div>

`

Output:

Advantages:

Disadvantages: