Skip to main content

Getting Started with Foundation

In this tutorial, we'll introduce Foundation, a popular CSS framework, and demonstrate how to use it in a simple project. We'll cover its key features, including the grid system, components, and utility classes.

What is Foundation?

Foundation is an advanced, open-source CSS framework designed to help developers create responsive, mobile-first websites. It includes a flexible grid system, pre-built components, and utility classes that simplify the web design process.

Using Foundation in your project

To start using Foundation, you can either download the files from the official website ( or use the CDN links. For this tutorial, we'll use the CDN links.

Add the following links to the head section of your HTML file:

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="" />
<title>My Foundation Website</title>
<!-- Add Foundation components here -->
<script src=""></script>
<script src=""></script>
<script src=""></script>

Foundation grid system

The Foundation grid system uses a series of containers, rows, and columns to create responsive layouts. Containers hold rows, and rows hold columns. The grid is based on a 12-column layout.


<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell medium-4">Column 1</div>
<div class="cell medium-4">Column 2</div>
<div class="cell medium-4">Column 3</div>

Foundation components

Foundation includes pre-built components like buttons, forms, and navigation. To use a component, simply add the appropriate Foundation classes to your HTML elements.

Example (buttons):

<button class="button">Default Button</button>
<button class="button primary">Primary Button</button>
<button class="button secondary">Secondary Button</button>

Foundation utility classes

Utility classes in Foundation provide quick ways to apply common CSS properties. They help you customize elements without writing additional CSS code.

Example (spacing):

<div class="padding-top-2">Padding top 2</div>
<div class="padding-bottom-3">Padding bottom 3</div>
<div class="margin-top-1">Margin top 1</div>
<div class="margin-bottom-4">Margin bottom 4</div>


In this tutorial, we introduced Foundation, a popular CSS framework, and demonstrated how to use it in a simple project. By using Foundation's grid system, components, and utility classes, you can create responsive, mobile-first websites with ease. Foundation offers a solid foundation for web development, allowing you to build professional-looking websites without writing extensive CSS code. Keep exploring the various features and components that Foundation has to offer to enhance your web projects further.