Learning ZURB Foundation

Build a foundation base page from minimum code, including doctype, meta, and no-js handling, link normalize.css and foundation.css, load modernizr and jquery, load foundation.js, initialize foundation, and add sample content.

Explore how media queries power responsive design in the Foundation grid, adjusting sizing, spacing, and gutters across mobile, tablet, desktop, and beyond using breakpoint classes.

Learn to structure content with the Foundation grid by organizing blocks into rows and columns using a 12-column system and responsive size classes for small, medium, and large screens.

Explore how inheritance in foundation's grid drives mobile-first responsive layouts, from small 12-column defaults to medium and large splits. Learn to use the panel class to create blocks with gutters.

Align all panels with a shared panel class to reveal column boundaries, then collapse gutters to visualize the 12-column grid and responsive behavior across small to large sizes.

Learn to nest rows and columns in the Foundation grid, using 12-column units, responsive sizes (large, medium, small), and gutters to align images and paragraphs.

Use layout classes like offset, center, push, and pull to control column position and order. Experiment with eight-column widths and responsive swaps to center content across desktop and mobile.

Discover how to use the Foundation equalizer to automatically even column heights with data-equalizer and data-equalizer-watch attributes, enabling mobile-first, responsive layouts.

Explore Foundation's built-in content styles to quickly style headers, subheads and small headings, adjust text alignment, float blocks, justify text by screen size, and customize lists without touching css.

Apply the Foundation pricing table structure by labeling items with classes like title, price, description, bullet item, and CTA button to present product information clearly.

Learn to customize ZURB Foundation by adding a site stylesheet that overrides styles, using browser inspector to target subheader and pricing table price, and ensuring the override order for consistency.

Discover how to create evenly spaced content blocks using block grids in Foundation by turning content into a ul with li items and applying block-grid classes.

Implement tabbed and accordion content using Foundation, wiring tab lists with data attributes, tab title classes, and content panels, then control active states and layout, including vertical tabs.

Master foundation visibility with hide and show classes that adapt to small, medium, and large screens. Explore hidden and visible for accessibility and media queries for orientation and touch.

Learn to implement foundation buttons for anchors and inputs, explore hover and size variants, and apply color classes like primary, secondary, alert, success, and info, with CSSA overrides.

Group buttons into a cohesive set using a button group, then apply even, round, and stack classes to adapt layout from desktop to mobile.

Create a dropdown by turning a link into a dropdown button, add the f-dropdown class and data-dropdown-content, and link the trigger to the target ul with the data-dropdown attribute.

Explore how to implement side navigation using the side nav class on a ul. Set up a dropdown content block with an id and data attributes to show subnav links.

Build subnavs with a definition list using dl, dt, and dd items as links, applying an active state and optional dividers for consistent sub and side nav styling.

Apply the breadcrumb class to the ul to render a full-width breadcrumb trail with linked items separated by a delimiter, and use a current class for the active page.

Discover the foundation top bar navigation, a fully responsive, customizable menu with left-aligned branding, a dropdown-enabled main menu, a right-side search area, and a fixed position that stays visible.

Discover how to build a foundation icon bar using font icons, download fonts and css, place them in an icons folder, and style the bar with horizontal or vertical layouts.

Explore how to design responsive forms with Foundation’s grid system, using rows and columns to size inputs, align labels, and ensure consistent layout across devices.

Learn to style forms with Foundation helper classes, apply button styles and expand options, add rounded radii, and create connected label and input rows with prefix and postfix elements.

Learn to implement foundation form validation using the built-in Abide, add error messages, mark fields as required, apply patterns for numbers and emails, and ensure password confirmation matches.

Explore how to implement tool tips, alerts, and modal overlays with Foundation, including positioning, responsive behavior, and close functionality. Configure data attributes and classes to create interactive UI components.

Learn how foundation reveal creates modal windows with a tinted overlay to display messages, forms, galleries, and videos, using data attributes and close buttons for control.

Learn how to implement joy ride in the foundation framework, creating a fully interactive site tour with labeled stops, data-id markers, and customizable modal controls.

Learn how Foundation delivers responsive site content and a consistent base to build on. Start with mobile sites, test on multiple devices, and use cheat sheets, forums, and templates.