Skip to content
WovenUI

Migrate from Foundation

Planning to migrate from Foundation to WovenUI? This guide maps Foundation classes and components to WovenUI core and the kit.

This page is for teams that build with Foundation for Sites (the XY grid, button primary, callout) and want ready-made HTML and CSS components on a token system, with no jQuery. Layout comes from WovenUI core, and @wovenui/components has the components. Install the kit from the install page. For the framework-level comparison, read WovenUI vs Foundation.

Grid and flex helpers

Section titled “Grid and flex helpers”

Foundation puts the breakpoint first (medium-6). Core puts it last, as a suffix (col-span-6@md), and mobile first: a breakpoint means that width and up. Gutters are a gap utility on the grid, not a margin or padding class on each cell. These are WovenUI core grid classes (Grid). The twelve columns are a default, and core’s $column-count setting changes it; breakpoint names such as md are a default too, set by $breakpoints. See the configuration page.

Foundation WovenUI core Notes
grid-container container Centered, with responsive max widths
grid-x grid-margin-x grid cols-12 gap-4 Twelve columns; the gap replaces the gutter classes
cell small-6 col-span-6 Applies from the smallest width
cell medium-4 col-span-4@md From md up
small-up-2 on the grid grid cols-2 Equal columns
medium-up-3 on the grid cols-3@md Added to a grid element
flex-container flex
align-center flex center Main axis, centered
align-justify flex between Space between the children
align-middle x-center x- is the cross axis
flex-dir-column col On a flex element
cell auto grow On a child of a flex element
cell shrink no-shrink On a child of a flex element

Anything with a custom value or a state goes through apply(), for example @include apply(p(13px), bg(brand-hover) hover). Read more in Grid, Flex and Responsive.

Component mapping

Section titled “Component mapping”

The kit uses a wu- root and bare words for variants, valid only together with the root: wu-btn brand sm. Colors use the core role names, so primary becomes brand and alert becomes danger.

Foundation WovenUI Components Notes
<a class="button primary"> <button class="wu-btn brand"> On a <button> or a link
<a class="button alert"> <button class="wu-btn danger"> Destructive actions
<a class="button secondary"> <button class="wu-btn"> The plain button is the neutral one; a bare button maps the same way
<a class="hollow button"> <button class="wu-btn brand subtle"> A tinted outline, the closest match
<a class="clear button"> <button class="wu-btn quiet"> Transparent until hover
small, large on a button sm, lg wu-btn brand sm
expanded on a button w-full Core class next to wu-btn
<div class="button-group"> <div class="wu-btn-group"> Pressed state from aria-pressed="true"
<div class="callout primary"> <div class="wu-alert brand"> Title in wu-alert-title; the marker shape repeats the role
<div class="callout success"> <div class="wu-alert success">
<div class="callout warning"> <div class="wu-alert warning">
<div class="callout alert"> <div class="wu-alert danger"> Use role="alert" for urgent messages
<div class="callout"> <div class="wu-alert"> The plain alert is neutral
<button class="close-button"> in a callout <button class="wu-alert-close"> A <button> with aria-label
<div class="card"> <article class="wu-card"> Parts: <header class="wu-card-header">, <div class="wu-card-body">, <footer class="wu-card-footer">; heading in wu-card-title
<div class="reveal" data-reveal> <dialog class="wu-modal"> Opened with commandfor and command="show-modal", no script
<div class="top-bar"> <header class="wu-topbar"> with <nav class="wu-topbar-nav"> Brand in <a class="wu-topbar-brand">, the right side in <div class="wu-topbar-end">

Modals and dropdowns without JavaScript

Section titled “Modals and dropdowns without JavaScript”

Foundation’s Reveal (modal), Off-canvas, Dropdown Pane and Accordion are JavaScript plugins, and Foundation 6 builds them on jQuery. The kit replaces them with browser features, so you no longer load those plugins for these components: modal and drawer are a <dialog>, dropdown and popover use the popover attribute, and the accordion is <details>. Foundation’s tooltip plugin is replaced by core tooltips.

What differs on purpose

Section titled “What differs on purpose”
  • No jQuery and no plugin script. Foundation’s JavaScript plugins need jQuery. The kit uses native elements instead: modals are <dialog>, menus and popovers use the popover attribute, and accordions are <details>. A small optional script adds only what the browser lacks, such as tab keyboard support.
  • No Sass settings file to copy. Foundation is configured through a _settings.scss you copy and edit. The kit reads core --wu-* tokens, and core is configured once with with() in Sass. Light, dark, inverse and high contrast switch with data-theme, with no extra classes.
  • Right to left is automatic. Foundation sets the direction in a Sass setting. Kit components use logical properties, so one stylesheet serves both directions. See Right to left.
  • State lives in attributes. Pressed, selected and current states come from aria-pressed, aria-selected and aria-current, not from extra classes.
  • No icon set. The kit ships no icons. Markers such as the select arrow and the close cross are drawn in CSS.
  • Motion is opt-in. Components are calm by default. Add animated (or wu-animated on an ancestor) to turn motion on; it still respects prefers-reduced-motion.

Migration checklist

Section titled “Migration checklist”
  1. Install the kit. Load the bundle or per-component entries, not both.
  2. Replace layout and helper classes with core utilities, using the first table.
  3. Swap components one at a time with the component table. Keep the old CSS loaded until the last one is gone.
  4. Move colors and spacing to core tokens, and switch themes with data-theme.
  5. Remove the old framework’s CSS and script.

Next steps

Section titled “Next steps”