start learning
Image 1
2877700077707

Fundation Examples

you can include the Foundation CSS file in your HTML document by downloading it from the official Foundation website (https://foundation.zurb.com/) or by using a package manager like npm or yarn.

Here are the general steps to include Foundation in your HTML document:

  1. Visit the official Foundation website (https://foundation.zurb.com/) and navigate to the download page.
  2. Choose the version of Foundation you want to use (e.g., Foundation 6) and click on the "Download" button.
  3. Once the download is complete, extract the downloaded zip file (if applicable) to obtain the Foundation CSS file.
  4. In your HTML document, include the Foundation CSS file by adding a <link> tag in the <head> section, specifying the path to the Foundation CSS file: 

   <!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="path/tofolder/foundation.css">
</head>
<body>
  <!-- Your HTML code here -->
</body>
</html>

Responsive Grid System


  <div class="row">
  <div class="column small-12 medium-6 large-4">
    <!-- Content for small screens (12 columns) and medium screens (6 columns) -->
  </div>
  <div class="column small-12 medium-6 large-4">
    <!-- Content for small screens (12 columns) and medium screens (6 columns) -->
  </div>
  <div class="column small-12 large-4">
    <!-- Content for small screens (12 columns) and large screens (4 columns) -->
  </div>
</div>

In this example, the row class creates a responsive row, and the column class defines the columns within the row. The small-12, medium-6, and large-4 classes specify the width of the columns for different screen sizes.

Buttons



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

Foundation provides various button styles. The button class creates a basic button, and the primary and secondary classes modify the button style accordingly.

Navigation Bar


<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <p><a href="#">Logo</a></p>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
  </ul>
  <section class="top-bar-section">
    <ul class="right">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </section>
</nav>

This example demonstrates a responsive navigation bar using the top-bar class. The title-area class contains the logo or site title, and the toggle-topbar class is used to toggle the visibility of the menu on small screens. The navigation links are defined within the top-bar-section class.

Forms


<form>
  <div class="row">
    <div class="small-12 medium-6 columns">
      <label for="name">Name</label>
      <input type="text" id="name" placeholder="Enter your name">
    </div>
    <div class="small-12 medium-6 columns">
      <label for="email">Email</label>
      <input type="email" id="email" placeholder="Enter your email">
    </div>
  </div>
  <div class="row">
    <div class="small-12 columns">
      <label for="message">Message</label>
      <textarea id="message" placeholder="Enter your message"></textarea>
    </div>
  </div>
  <div class="row">
    <div class="small-12 columns">
      <input type="submit" class="button" value="Submit">
    </div>
  </div>
</form>

This form example utilizes Foundation's grid system to create a responsive form layout. The row class is used to define rows, and the columns class specifies the column width. Labels, inputs, and textarea elements are styled using Foundation's default styles.

Resources for Further Learning

Explore the possibilities and create unique effects on your web pages by using the interactive code editor

HTML

Write and customize HTML code

CSS

Add style and design to your web pages with CSS

JavaScript

Enhance interactivity with JavaScript code

Go to Code Editor
×