Write, Run & Share Foundation code online using OneCompiler's Foundation online editor for free. It's one of the robust, feature-rich online editors for Foundation. Getting started with the OneCompiler's Foundation online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'Foundation' and start writing code to learn and test online without worrying about tedious process of installation.
Foundation is a responsive front-end framework created by ZURB. It provides a responsive grid system, HTML and CSS UI components, templates, and code snippets. Foundation is known for its flexibility and is used by many large companies including Facebook, eBay, Mozilla, and Disney.
Foundation uses a powerful 12-column flexible grid called the XY Grid system, built on CSS Flexbox for modern layouts. The grid automatically scales to any screen size with responsive breakpoints for small (0px+), medium (640px+), large (1024px+), xlarge (1200px+), and xxlarge (1440px+) screens. Use the grid-x class for horizontal grids with cell classes to define column widths. The grid system supports auto-sizing cells, offsets for positioning, and various gap options to control spacing between columns.
<!-- Basic grid: small-*, medium-*, large-*, xlarge-*, xxlarge-* -->
<div class="grid-x grid-padding-x">
<div class="cell small-4">4 columns</div>
<div class="cell small-4">4 columns</div>
<div class="cell small-4">4 columns</div>
</div>
<!-- Responsive grid -->
<div class="grid-x grid-padding-x">
<div class="cell small-12 medium-6 large-4">Responsive cell</div>
</div>
<!-- Auto-sizing: auto, shrink -->
<div class="grid-x grid-padding-x">
<div class="cell auto">Auto width</div>
<div class="cell shrink">Shrink to content</div>
</div>
<!-- Container: grid-container, grid-container fluid -->
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">Contained grid</div>
</div>
</div>
<!-- Offset: small-offset-*, medium-offset-*, etc. -->
<div class="grid-x grid-padding-x">
<div class="cell small-4 small-offset-2">Offset by 2</div>
</div>
Foundation includes comprehensive typography styles that establish a clear visual hierarchy for your content. The framework provides semantic heading styles from h1 to h6, along with special classes like subheader for lighter styled headings and lead for introductory paragraphs that stand out. Text alignment, transformation, and weight utilities allow you to customize text appearance at different breakpoints, making it easy to create responsive typography that looks great on all devices.
<!-- Headings: h1-h6, subheader -->
<h1 class="subheader">Subheader style</h1>
<p class="lead">Lead paragraph text</p>
<!-- Alignment: text-left, text-center, text-right, text-justify -->
<!-- Responsive: small-text-center, medium-text-left, etc. -->
<p class="text-center">Centered text</p>
<!-- Transform: text-uppercase, text-lowercase, text-capitalize -->
<!-- Weight: font-bold, font-normal, font-italic -->
<p class="font-bold text-uppercase">Bold uppercase text</p>
Foundation provides a versatile button system with multiple color themes, sizes, and style variations to match any design. Buttons can be styled as solid, hollow (outlined), or clear (text-only), and can be applied to anchor tags, button elements, or input elements interchangeably. The expanded class creates full-width buttons that span their container, while button groups allow you to cluster related actions together with options for horizontal or stacked layouts.
<!-- Colors: button, primary, secondary, success, warning, alert -->
<button class="button primary">Primary</button>
<!-- Sizes: tiny, small, (default), large -->
<button class="button small">Small</button>
<button class="button large">Large</button>
<!-- Styles: hollow, clear, disabled, expanded -->
<button class="button hollow primary">Hollow Primary</button>
<button class="button expanded">Full Width</button>
<!-- Button group: button-group, stacked -->
<div class="button-group">
<a class="button">One</a>
<a class="button">Two</a>
</div>
Foundation forms are designed for clarity and usability with clean default styling that works across all browsers. The framework supports inline help text for field guidance, validation states for error feedback, and input groups that combine inputs with labels or buttons. Form elements maintain consistent sizing and spacing, and the label element can wrap inputs directly for simplified markup structure.
<form>
<label
>Name
<input type="text" placeholder="Enter your name" />
</label>
<label
>Email
<input type="email" placeholder="Enter email" />
<p class="help-text">We'll never share your email.</p>
</label>
<label
>Select
<select>
<option value="">Select an option</option>
<option value="1">Option 1</option>
</select>
</label>
<label
>Message
<textarea placeholder="Enter message"></textarea>
</label>
<!-- Checkbox, Radio, Switch available -->
<input type="checkbox" id="check1" /><label for="check1">Checkbox</label>
<button type="submit" class="button">Submit</button>
</form>
<!-- Input group -->
<div class="input-group">
<span class="input-group-label">$</span>
<input type="number" class="input-group-field" />
<div class="input-group-button">
<input type="submit" class="button" value="Submit" />
</div>
</div>
Callouts are highlighted panel components used to draw attention to important information or display contextual messages to users. They come in semantic color variants including primary, secondary, success, warning, and alert to convey different levels of importance or message types. Callouts can be made dismissible by adding the data-closable attribute along with a close button, allowing users to acknowledge and hide the message.
<!-- Types: callout, primary, secondary, success, warning, alert -->
<div class="callout primary">
<h5>Primary Callout</h5>
<p>Important information here.</p>
</div>
<!-- Closable callout -->
<div class="callout" data-closable>
<p>Closable callout.</p>
<button class="close-button" data-close>×</button>
</div>
<!-- Sizes: small, large -->
Cards are flexible container components for organizing and displaying related content in a clean, bordered layout. Each card can include a header section using card-divider, an optional image, and a content area with card-section for text and actions. Cards work seamlessly with Foundation's grid system to create responsive card layouts, and their minimal default styling makes them easy to customize for your specific design needs.
<div class="card">
<div class="card-divider">Card Header</div>
<img src="image.jpg" alt="Card image" />
<div class="card-section">
<h4>Card Title</h4>
<p>Card content goes here.</p>
</div>
</div>
Foundation provides robust navigation patterns that adapt gracefully from desktop to mobile devices. The top bar component creates a horizontal navigation area with support for left and right sections, dropdown menus, and search inputs. Menu components can be styled as horizontal, vertical, icon-based, or dropdown menus, and they integrate with Foundation's JavaScript to provide smooth dropdown and mobile toggle functionality.
<!-- Top bar -->
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search" /></li>
<li><button class="button">Search</button></li>
</ul>
</div>
</div>
<!-- Menu types: menu, menu vertical, menu icons, dropdown menu -->
<ul class="menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
Tabs organize content into separate panels that users can switch between, reducing page clutter while keeping all information readily accessible. The tabs component uses a combination of a tab navigation list and corresponding content panels linked by matching IDs and data attributes. Foundation's JavaScript handles the tab switching automatically, and you can configure tabs for horizontal or vertical orientation depending on your layout needs.
<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>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1">Content 1</div>
<div class="tabs-panel" id="panel2">Content 2</div>
</div>
Modals in Foundation are called Reveal and provide dialog overlays for important content that requires user attention or interaction. The Reveal component supports multiple size options from small to full-screen, with built-in animations for smooth open and close transitions. Modals are triggered via data attributes and can be closed with a close button, clicking the overlay background, or pressing the Escape key.
<button class="button" data-open="modal1">Open Modal</button>
<!-- Sizes: small, large, full -->
<div class="reveal" id="modal1" data-reveal>
<h1>Modal Title</h1>
<p>Modal content.</p>
<button class="close-button" data-close>×</button>
</div>
Accordions display collapsible content sections, allowing users to expand only the information they need while keeping the interface clean and organized. Each accordion item consists of a clickable title and hidden content panel that slides open when activated. You can configure accordions to allow multiple sections open simultaneously with data-multi-expand, or force all sections to be closable with data-allow-all-closed.
<ul class="accordion" data-accordion>
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>Content 1</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 2</a>
<div class="accordion-content" data-tab-content>Content 2</div>
</li>
</ul>
<!-- Options: data-multi-expand="true", data-allow-all-closed="true" -->
Foundation provides clean table styling with optional enhancements for improved readability and user interaction. The hover class adds a background highlight when users mouse over rows, making it easier to track data across wide tables. The striped class alternates row background colors for better visual separation, while stack enables responsive behavior that stacks table cells vertically on smaller screens.
<!-- Modifiers: hover, striped, stack (responsive) -->
<table class="hover striped">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>
Foundation includes a variety of additional UI components for common interface patterns like pagination, breadcrumbs, progress indicators, and status labels. Pagination helps users navigate through large datasets with numbered pages and previous/next controls. Breadcrumbs show the user's location in a site hierarchy, while progress bars visualize completion status. Badges and labels provide compact visual indicators for counts, statuses, or categories.
<!-- Pagination -->
<ul class="pagination">
<li class="pagination-previous disabled">Previous</li>
<li class="current">1</li>
<li><a href="#">2</a></li>
<li class="pagination-next"><a href="#">Next</a></li>
</ul>
<!-- Breadcrumbs -->
<ul class="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li>Current Page</li>
</ul>
<!-- Progress bar: primary, secondary, success, warning, alert -->
<div class="progress primary">
<span class="progress-meter" style="width: 50%"></span>
</div>
<!-- Badge & Label: primary, secondary, success, warning, alert -->
<span class="badge primary">2</span>
<span class="label success">Success</span>
Visibility classes provide powerful control over element display based on screen size or device orientation, essential for building responsive interfaces. The show-for classes make elements visible only at specified breakpoints, while hide-for classes do the opposite. You can also target device orientation with landscape and portrait classes, making it easy to optimize layouts for different viewing contexts without writing custom media queries.
<!-- Show: show-for-small-only, show-for-medium, show-for-large, etc. -->
<!-- Hide: hide-for-small-only, hide-for-medium, hide-for-large, etc. -->
<!-- Orientation: show-for-landscape, show-for-portrait -->
<div class="show-for-medium">Visible on medium and up</div>
<div class="hide-for-small-only">Hidden on small only</div>
Foundation provides utility classes for common layout needs including floats, flexbox alignment, and element positioning. The flex utilities offer a quick way to create flexible layouts with vertical and horizontal alignment options without writing custom CSS. These utilities are designed to work alongside the XY Grid system and other Foundation components, giving you fine-grained control over element positioning and distribution.
<!-- Float: float-left, float-right, float-center, clearfix -->
<!-- Flex: flex-container, align-center, align-middle, flex-dir-column -->
<div class="flex-container align-center align-middle">
<div class="flex-child-auto">Auto grow</div>
<div class="flex-child-shrink">Shrink</div>
</div>
