Foundation CSS

Read

Courses

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.

Foundation CSS

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

Why Foundation?

It allows for speedier development by utilizing the Sass compiler, which is significantly faster than the default compiler.
It adds pricing tables, switches, joyride, range sliders, lightbox, and more to your website.
For faster coding and control, it includes development packages such as Grunt and Libsass.
Foundation for Apps allows you to build fully responsive web applications.
It is open source and has good community support.

How to use Foundation?

Method 1: Go to the official documentation https://get.foundation/ and click on the Download All button to use it 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 how to use it using an example.

Example: This example illustrates the use of customize column for the menu.

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> 
    <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 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> 
</body> 
  
</html> 

Output:

Learn to code easily with our course Coding for Everyone. This course is accessible and designed for everyone, even if you're new to coding. Start today and join millions on a journey to improve your skills!

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Commit to GfG's Three-90 Challenge! Purchase a course, complete 90% in 90 days, and save 90% cost click here to explore.

Last Updated : 13 Dec, 2023

Foundation CSS Introduction

Share your thoughts in the comments

Dec	JAN	Feb
	18
2023	2024	2025

Foundation Setup

Foundation Containers

Foundation Navigation

Foundation Typography

Foundation Controls

Foundation Media

Foundation Plugins

Foundation Utilities

Foundation Setup

Foundation Containers

Foundation Navigation

Foundation Typography

Foundation Controls

Foundation Media

Foundation Plugins

Foundation Utilities

Foundation CSS

Why Foundation?

How to use Foundation?

HTML

Please Login to comment...

What kind of Experience do you want to share?