Foundation Getting Started

This chapter will introduce how to start using the Foundation framework, including installation methods, basic setup, and creating your first Foundation page.

Installing Foundation

Foundation provides multiple installation methods. You can choose the appropriate method based on your project needs.

Method 1: Using CDN (Recommended for Beginners)

The simplest way is to directly include Foundation files via CDN:

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My First Foundation Page</title>

    <!-- Foundation CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
</head>
<body>
    <!-- Page content -->

    <!-- jQuery (Foundation dependency) -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Foundation JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Method 2: Download Files

You can download Foundation files from the Foundation official website:

Visit the Foundation Download Page
Select the version you need (Complete or Essential)
Extract the downloaded files
Copy CSS and JS files to your project directory

Directory structure example:

project/
├── css/
│   └── foundation.min.css
├── js/
│   ├── vendor/
│   │   └── jquery.js
│   └── foundation.min.js
└── index.html

Method 3: Using npm

For projects using Node.js, you can install via npm:

bash

npm install foundation-sites

Method 4: Using Foundation CLI

Foundation provides a command-line tool to create projects:

bash

# Install Foundation CLI
npm install --global foundation-cli

# Create new project
foundation new

Basic Template

Here's a complete Foundation basic template:

html

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Template</title>

    <!-- Foundation CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">

    <!-- Custom styles -->
    <style>
        /* Add your custom styles here */
    </style>
</head>
<body>
    <!-- Top navigation -->
    <div class="top-bar">
        <div class="top-bar-left">
            <ul class="menu">
                <li class="menu-text">Site Name</li>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
    </div>

    <!-- Main content area -->
    <div class="grid-container">
        <div class="grid-x grid-padding-x">
            <div class="cell">
                <h1>Welcome to Foundation!</h1>
                <p>This is your first Foundation page.</p>
                <a class="button" href="#">Learn More</a>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Important Meta Tags

viewport Tag

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This tag is crucial for responsive design. It tells the browser:

width=device-width: Page width equals device width
initial-scale=1.0: Initial zoom scale is 1

no-js Class

html

<html class="no-js" lang="en">

The no-js class is used to detect if JavaScript is available. When JavaScript loads, Foundation will automatically replace it with the js class.

Initializing Foundation

Foundation's JavaScript components need to be initialized to work:

javascript

// Basic initialization - initialize all components
$(document).foundation();

// Or initialize specific components
$(document).foundation('dropdown');
$(document).foundation('tabs');

First Example: Responsive Layout

Let's create a simple responsive three-column layout:

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">
    <title>Responsive Layout Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <style>
        .demo-box {
            background: #1779ba;
            color: white;
            padding: 20px;
            margin-bottom: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Responsive Three-Column Layout</h1>

        <div class="grid-x grid-padding-x">
            <!-- Full width on small screens, 4 columns on medium screens -->
            <div class="cell small-12 medium-4">
                <div class="demo-box">First Column</div>
            </div>
            <div class="cell small-12 medium-4">
                <div class="demo-box">Second Column</div>
            </div>
            <div class="cell small-12 medium-4">
                <div class="demo-box">Third Column</div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Effect Description:

On mobile (small screens): Three columns stack vertically, each occupying full width
On tablet/desktop (medium and above screens): Three columns display side by side

Foundation Directory Structure

A typical Foundation project structure:

my-foundation-project/
├── css/
│   ├── foundation.css      # Foundation styles
│   ├── foundation.min.css  # Minified version
│   └── app.css             # Custom styles
├── js/
│   ├── vendor/
│   │   └── jquery.js
│   ├── foundation.js
│   ├── foundation.min.js
│   └── app.js              # Custom scripts
├── img/                    # Image resources
└── index.html              # Main page

Browser Support

Foundation 6 supports the following browsers:

Browser	Supported Versions
Chrome	Last 2 versions
Firefox	Last 2 versions
Safari	Last 2 versions
Edge	Last 2 versions
IE	11+
iOS Safari	Last 2 versions
Android	Last 2 versions

Common Issues

1. JavaScript Components Not Working?

Make sure:

jQuery is loaded before Foundation JS
$(document).foundation() is called
No JavaScript errors (check browser console)

2. Styles Not Taking Effect?

Check:

CSS file is included correctly
Other styles are overriding
Class names are correct

3. Responsive Not Working?

Ensure viewport meta tag is added:

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Summary

In this chapter, we learned:

Multiple installation methods for Foundation
Basic template structure
Important meta tags
How to initialize Foundation
Creating the first responsive layout

In the next chapter, we will learn about Foundation Text styling.

Exercise: Try modifying the above example to create a four-column layout and observe how it behaves on different screen sizes.

Foundation Getting Started ​

Installing Foundation ​

Method 1: Using CDN (Recommended for Beginners) ​

Method 2: Download Files ​

Method 3: Using npm ​

Method 4: Using Foundation CLI ​

Basic Template ​

Important Meta Tags ​

viewport Tag ​

no-js Class ​

Initializing Foundation ​

First Example: Responsive Layout ​

Foundation Directory Structure ​

Browser Support ​

Common Issues ​

1. JavaScript Components Not Working? ​

2. Styles Not Taking Effect? ​

3. Responsive Not Working? ​

Summary ​

Foundation Getting Started

Installing Foundation

Method 1: Using CDN (Recommended for Beginners)

Method 2: Download Files

Method 3: Using npm

Method 4: Using Foundation CLI

Basic Template

Important Meta Tags

viewport Tag

no-js Class

Initializing Foundation

First Example: Responsive Layout

Foundation Directory Structure

Browser Support

Common Issues

1. JavaScript Components Not Working?

2. Styles Not Taking Effect?

3. Responsive Not Working?

Summary