Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Counter Example - Foundation Typing CST Test
Counter Example — Foundation Code
Demonstrates a simple counter layout using Foundation classes and minimal JavaScript for interactivity.
<!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>Foundation Language Guide
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.
Primary Use Cases
- ▸Responsive web apps
- ▸Corporate websites
- ▸Prototyping and MVPs
- ▸Design systems and UI kits
- ▸Accessible front-end development
Notable Features
- ▸Mobile-first responsive grid
- ▸Prebuilt UI components (buttons, forms, modals)
- ▸Sass-based customization
- ▸Accessibility-ready components
- ▸Built-in JavaScript plugins
Origin & Creator
Created by ZURB in 2011 as a professional-grade front-end framework for rapid prototyping and production-ready websites.
Industrial Note
Foundation is ideal for teams needing accessible, responsive, and enterprise-ready front-end frameworks, especially in complex web applications and rapid prototyping environments.
Quick Explain
- ▸Foundation offers a flexible grid and prebuilt UI components like buttons, forms, and navigation.
- ▸It is responsive by default, with a mobile-first approach.
- ▸Supports accessibility standards and semantic markup.
Core Features
- ▸Flexible grid system (XY & Flex Grid)
- ▸Responsive typography and forms
- ▸UI components: buttons, cards, modals, dropdowns
- ▸JS plugins: accordion, dropdown, tooltip
- ▸Accessibility support (ARIA, keyboard navigation)
Learning Path
- ▸Learn grid system
- ▸Understand prebuilt components
- ▸Explore JS plugins
- ▸Customize with Sass
- ▸Build accessible responsive layouts
Practical Examples
- ▸Corporate websites
- ▸Landing pages
- ▸Prototyping MVPs
- ▸Dashboards with Foundation JS plugins
- ▸Accessible forms and navigation
Comparisons
- ▸More accessible than early Bootstrap versions
- ▸Less utility-driven than Tailwind
- ▸Heavier than minimal frameworks
- ▸Strong grid system for complex layouts
- ▸JS plugins similar to Bootstrap’s components
Strengths
- ▸Solid accessibility support
- ▸Responsive and mobile-first
- ▸Highly customizable via Sass
- ▸Component-rich with JS utilities
- ▸Trusted for enterprise-scale projects
Limitations
- ▸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
When NOT to Use
- ▸Projects needing lightweight atomic utilities
- ▸Rapid prototyping with small HTML files
- ▸Modern utility-first design systems
- ▸Small static landing pages
- ▸Teams preferring widely-adopted frameworks like Bootstrap
Cheat Sheet
- ▸`.grid-x` - grid container
- ▸`.cell` - grid item
- ▸`.button` - default button
- ▸`.menu` - navigation menu
- ▸`.reveal` - modal plugin
FAQ
- ▸Is Foundation still maintained?
- ▸Yes, actively maintained by ZURB.
- ▸Can I use Foundation with frameworks?
- ▸Yes, but wrappers may be needed.
- ▸Does Foundation support accessibility?
- ▸Yes, ARIA attributes and keyboard navigation included.
- ▸Is it beginner-friendly?
- ▸Moderate - requires learning grid & Sass.
- ▸Can I customize the theme?
- ▸Yes, via Sass variables and partials.
30-Day Skill Plan
- ▸Week 1: Grid system and layout
- ▸Week 2: Buttons, forms, typography
- ▸Week 3: Responsive navigation
- ▸Week 4: JS plugins (Accordion, Reveal, Dropdown)
- ▸Week 5: Custom themes via Sass
Final Summary
- ▸Foundation is a robust responsive framework for production-ready sites.
- ▸Includes grid system, UI components, and JS plugins.
- ▸Accessibility and mobile-first design are core principles.
- ▸Customizable via Sass for branding and themes.
- ▸Best suited for enterprise, prototyping, and complex projects.
Project Structure
- ▸index.html - main markup
- ▸scss/ - custom Foundation theme overrides
- ▸js/ - optional Foundation JS plugins
- ▸assets/ - images, fonts, media
- ▸node_modules/ - npm packages if used
Monetization
- ▸Build custom templates and themes
- ▸Create SaaS front-end kits
- ▸Offer Foundation-based UI solutions
- ▸Consulting on accessible front-end
- ▸Develop reusable component libraries
Productivity Tips
- ▸Use modular Sass imports
- ▸Leverage JS plugins only when needed
- ▸Create reusable components for layouts
- ▸Use prebuilt grid for rapid prototyping
- ▸Customize theme via _settings.scss
Basic Concepts
- ▸Grid: `.grid-x`, `.grid-margin-x`, `.cell`
- ▸Buttons: `.button`, `.success`, `.alert`
- ▸Forms: styled inputs, labels, and selects
- ▸Typography: headings, body text, lists
- ▸JS plugins: Accordion, Dropdown, Reveal modal