Foundation Components

Foundation provides a collection of versatile and customizable components that simplify the process of building responsive and aesthetically pleasing web interfaces. In this guide, we'll explore two essential Foundation components: Responsive Navigation and Typography/Forms.

1. Responsive Navigation:

Foundation's responsive navigation component is designed to create navigation menus that adapt to different screen sizes, ensuring a smooth user experience across devices.

- Basic Responsive Navigation:

Foundation's navigation component uses the top-bar class to create a responsive navigation bar. It automatically adjusts its appearance based on the screen size.

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">Your Brand</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>
  <section class="top-bar-section">
    <!-- Add your navigation items here -->
    <ul class="right">
      <li><a href="#">Home</a></li>
      <li class="has-dropdown">
        <a href="#">Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
        </ul>
      </li>
    </ul>
  </section>
</nav>

- Customizing Responsive Navigation:

Foundation allows for extensive customization of the responsive navigation appearance. You can modify styles, add icons, and tailor the structure to fit your design requirements.

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">Your Brand</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>
  <section class="top-bar-section">
    <!-- Customized navigation items -->
    <ul class="right">
      <li><a href="#"><i class="fi-home"></i> Home</a></li>
      <li class="has-dropdown">
        <a href="#"><i class="fi-page-multiple"></i> Dropdown</a>
        <ul class="dropdown">
          <li><a href="#"><i class="fi-info"></i> Item 1</a></li>
          <li><a href="#"><i class="fi-info"></i> Item 2</a></li>
        </ul>
      </li>
    </ul>
  </section>
</nav>

2. Typography and Forms:

Foundation provides a clean and consistent approach to typography and form styling. Typography classes and form components streamline the creation of visually appealing and user-friendly text and input elements.

- Typography Classes:

Foundation offers typography classes that can be applied to text elements to control font size, weight, and other styles. For example, h1, h2, h3 classes define heading styles.

<h1 class="h1">Heading 1</h1>
<h2 class="h2">Heading 2</h2>
<h3 class="h3">Heading 3</h3>

- Form Styling:

Foundation styles form elements by default, providing a consistent and visually appealing look. Form components like buttons, inputs, and selects automatically inherit the framework's styling.

<form>
  <div class="row">
    <div class="large-6 columns">
      <label>Username
        <input type="text" placeholder="Enter your username">
      </label>
    </div>
    <div class="large-6 columns">
      <label>Password
        <input type="password" placeholder="Enter your password">
      </label>
    </div>
  </div>
  <button type="submit" class="button">Submit</button>
</form>

Note: The above example uses Foundation's grid system to structure form elements in a row.

These Foundation components, along with many others, contribute to the framework's appeal for developers aiming to create responsive and visually consistent web interfaces. By exploring and customizing these components, developers can leverage Foundation's power to streamline the design and functionality of their web projects.

Grid system Introduction