Learn Foundation - 9 Code Examples & CST Typing Practice Test
Foundation is a responsive front-end framework that provides a mobile-first grid system, prebuilt UI components, and flexible styling utilities. It is designed to speed up development while maintaining accessibility and consistency.
Learn FOUNDATION with Real Code Examples
Updated Nov 23, 2025
Code Sample Descriptions
1
Foundation Counter Example
<!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.5/dist/css/foundation.min.css">
<title>Foundation Counter</title>
</head>
<body>
<div class="grid-container text-center" id="container">
<h2>Counter: <span id="count">0</span></h2>
<div class="button-group">
<button id="increment" class="button">+</button>
<button id="decrement" class="button alert">-</button>
<button id="reset" class="button secondary">Reset</button>
</div>
<button id="theme-btn" class="button warning">Switch Theme</button>
</div>
<script>
let count = 0;
let isDark = false;
const countEl = document.getElementById('count');
const container = document.getElementById('container');
document.getElementById('increment').onclick = () => { count++; countEl.textContent = count; };
document.getElementById('decrement').onclick = () => { count--; countEl.textContent = count; };
document.getElementById('reset').onclick = () => { count = 0; countEl.textContent = count; };
document.getElementById('theme-btn').onclick = () => {
isDark = !isDark;
container.classList.toggle('dark-theme', isDark);
container.classList.toggle('text-white', isDark);
container.classList.toggle('light-theme', !isDark);
container.classList.toggle('text-black', !isDark);
};
</script>
<style>
.dark-theme { background-color: #222; color: #eee; }
.light-theme { background-color: #fff; color: #000; }
</style>
</body>
</html>
Demonstrates a simple counter layout using Foundation classes and minimal JavaScript for interactivity.
2
Foundation Callout Example
<!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.5/dist/css/foundation.min.css">
<title>Foundation Callout</title>
</head>
<body>
<div class="grid-container">
<div class="callout primary">
<h5>Primary Callout</h5>
<p>This is an example of a Foundation callout box.</p>
<button class="close-button" aria-label="Dismiss" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<script>
document.querySelectorAll('.close-button').forEach(btn => {
btn.onclick = () => btn.parentElement.remove();
});
</script>
</body>
</html>
Shows a Foundation callout box for notifications or important messages.
3
Foundation Top Bar Example
<!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.5/dist/css/foundation.min.css">
<title>Foundation Top Bar</title>
</head>
<body>
<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="dropdown menu" data-dropdown-menu>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
Demonstrates a responsive top navigation bar using Foundation Top Bar classes.
4
Foundation Card Example
<!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.5/dist/css/foundation.min.css">
<title>Foundation Card</title>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell small-12 medium-6 large-4">
<div class="card">
<img src="https://via.placeholder.com/300" alt="Placeholder">
<div class="card-section">
<h4>Card Title</h4>
<p>Example of a card using Foundation.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Shows a simple card layout using Foundation's card component classes.
5
Foundation Accordion Example
<!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.5/dist/css/foundation.min.css">
<title>Foundation Accordion</title>
</head>
<body>
<div class="grid-container">
<ul class="accordion" data-accordion>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Section 1</a>
<div class="accordion-content" data-tab-content>
<p>Content for Section 1</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Section 2</a>
<div class="accordion-content" data-tab-content>
<p>Content for Section 2</p>
</div>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Demonstrates an accordion component for collapsible sections.
6
Foundation Reveal Modal Example
<!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.5/dist/css/foundation.min.css">
<title>Foundation Modal</title>
</head>
<body>
<div class="grid-container text-center">
<button class="button" data-open="exampleModal1">Open Modal</button>
<div class="reveal" id="exampleModal1" data-reveal>
<h1>Modal Title</h1>
<p>This is a Foundation Reveal modal example.</p>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Shows how to create a modal dialog using Foundation's Reveal component.
7
Foundation Tabs Example
<!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.5/dist/css/foundation.min.css">
<title>Foundation Tabs</title>
</head>
<body>
<div class="grid-container">
<ul class="tabs" data-tabs id="example-tabs">
<li class="tabs-title is-active"><a href="#panel1">Tab 1</a></li>
<li class="tabs-title"><a href="#panel2">Tab 2</a></li>
<li class="tabs-title"><a href="#panel3">Tab 3</a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1"><p>Content for Tab 1</p></div>
<div class="tabs-panel" id="panel2"><p>Content for Tab 2</p></div>
<div class="tabs-panel" id="panel3"><p>Content for Tab 3</p></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Demonstrates a tabbed interface using Foundation Tabs component.
8
Foundation Form Example
<!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.5/dist/css/foundation.min.css">
<title>Foundation Form</title>
</head>
<body>
<div class="grid-container">
<form>
<div class="grid-x grid-padding-x">
<div class="cell small-12">
<label>Name
<input type="text" placeholder="Your Name">
</label>
</div>
<div class="cell small-12">
<label>Email
<input type="email" placeholder="Your Email">
</label>
</div>
<div class="cell small-12">
<button class="button">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>
Shows a simple form layout using Foundation form classes.
9
Foundation Table Example
<!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.5/dist/css/foundation.min.css">
<title>Foundation Table</title>
</head>
<body>
<div class="grid-container">
<table class="hover stack">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john@example.com</td>
<td>Admin</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>jane@example.com</td>
<td>User</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Demonstrates a responsive table using Foundation table classes.
Frequently Asked Questions about Foundation
What is Foundation?
Foundation is a responsive front-end framework that provides a mobile-first grid system, prebuilt UI components, and flexible styling utilities. It is designed to speed up development while maintaining accessibility and consistency.
What are the primary use cases for Foundation?
Responsive web apps. Corporate websites. Prototyping and MVPs. Design systems and UI kits. Accessible front-end development
What are the strengths of Foundation?
Solid accessibility support. Responsive and mobile-first. Highly customizable via Sass. Component-rich with JS utilities. Trusted for enterprise-scale projects
What are the limitations of Foundation?
Less popular than Bootstrap - smaller community. Heavier bundle if unused components aren’t purged. Learning curve for XY Grid and Sass customization. Verbose markup compared to utility-first frameworks. Less frequent updates compared to modern frameworks
How can I practice Foundation typing speed?
CodeSpeedTest offers 9+ real Foundation code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.