Foundation Overview
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. Foundation was created by ZURB in 2011 and is maintained by volunteers.
Key Features
- Responsive Grid: Flexible, mobile-first grid.
- Accessibility: Built with accessibility in mind.
- Customizable: Easily customize with Sass.
- Component Library: 50+ UI components.
- Motion UI: CSS transitions and animations.
- Email Framework: Foundation for Emails.
- Flexbox Support: Optional flexbox grid.
Common Use Cases
Responsive Websites
Building sites that work on all devices.
Web Applications
Creating complex web apps.
Marketing Sites
Building promotional websites.
HTML Emails
Creating responsive emails.
Example Code
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
</head>
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">My Site</li>
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
</ul>
</div>
</div>
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell medium-6">
<div class="card">
<div class="card-divider">
<h4>Welcome</h4>
</div>
<div class="card-section">
<p>This is a card built with Foundation.</p>
<a href="#" class="button primary">Click Me</a>
</div>
</div>
</div>
<div class="cell medium-6">
<form>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<label>Email
<input type="email" placeholder="your@email.com">
</label>
</div>
<div class="cell">
<button type="submit" class="button">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>