Foundation CSS Introduction

Foundation CSS is a responsive front-end framework developed by ZURB. It provides a flexible grid system, UI components, and responsive design patterns to help you build beautiful, mobile-first websites quickly.

What is Foundation CSS?

Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps, and emails that look amazing on any device.

Key Features:

• Responsive Grid - Flexible 12-column grid system
• Mobile First - Designed for mobile devices first
• Semantic - Uses semantic class names
• Customizable - Easy to customize with Sass
• Accessible - Built with accessibility in mind

<div class="grid-x grid-margin-x">
  <div class="cell small-4">Column 1</div>
  <div class="cell small-4">Column 2</div>
  <div class="cell small-4">Column 3</div>
</div>

Foundation vs Bootstrap

<button class="button primary">Primary Button</button>
<button class="button secondary">Secondary Button</button>
<button class="button success">Success Button</button>
<button class="button warning">Warning Button</button>
<button class="button alert">Alert Button</button>

When to Use Foundation?

• When you need highly customized designs
• For enterprise-level applications
• When semantic HTML is important
• For email templates (Foundation for Emails)
• When you prefer Sass customization

Getting Started

To start using Foundation CSS, you can:

1. Use CDN links for quick setup
2. Install via npm/yarn for build processes
3. Download the compiled CSS/JS files
4. Use the CLI tool for scaffolding

<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="main-menu">
  <div class="top-bar-left">
    <ul class="menu">
      <li class="menu-text">My Site</li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

Conclusion

Foundation CSS is a powerful, professional-grade framework that offers great flexibility and customization options. While it has a steeper learning curve than Bootstrap, it rewards developers with semantic markup and highly customizable components.

Up next: How to Install Foundation CSS