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 (https://get.foundation/) 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:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.3/dist/css/foundation.min.css" />
    <title>My Foundation Website</title>
  </head>
  <body>
    <!-- Add Foundation components here -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/what-input@5.2.10/dist/what-input.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.3/dist/js/foundation.min.js"></script>
  </body>
</html>

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.

Example:

HTML
<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>
  </div>
</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):

HTML
<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):

HTML
<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>

Conclusion​

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.