WovenUI vs Foundation

Side by side

The same component in both

A responsive card grid in Foundation's XY grid, and the same grid in WovenUI, once as utility classes and once as BEM classes built with apply(). In SCSS, WovenUI sets every breakpoint in one apply() line instead of nested breakpoint() blocks. The utility version is rendered below in a light and a dark section, because every value reads a theme token.

<div class="grid cols-1 cols-2@md cols-3@lg gap-4">
  <div class="p-4 bg-surface border rounded-lg">
    <h3 class="text-lg font-semibold">Card title</h3>
    <p class="text-muted">Some quick example text.</p>
  </div>
  <div class="p-4 bg-surface border rounded-lg">...</div>
  <div class="p-4 bg-surface border rounded-lg">...</div>
</div>

<div class="grid-container">
  <div class="grid-x grid-margin-x small-up-1 medium-up-2 large-up-3">
    <div class="cell">
      <h3>Card title</h3>
      <p>Some quick example text.</p>
    </div>
    <div class="cell">...</div>
    <div class="cell">...</div>
  </div>
</div>

@use "@wovenui/core" as * with (
  $brand: #4361ee
);

.gallery {
  @include apply(grid, cols(1), cols(2) md, cols(3) lg, gap(4));
}

.gallery__item {
  @include apply(p(4), bg(surface), border(1), rounded(lg), shadow(md) hover);
}

.gallery__title {
  @include apply(font-size(lg), font(semibold));
}

.gallery__text {
  @include apply(text-color(muted));
}

@import 'settings';
@import 'foundation';

.gallery {
  @include xy-grid;
}

.gallery__item {
  @include xy-cell(12);

  @include breakpoint(medium up) {
    @include xy-cell(6);
  }

  @include breakpoint(large up) {
    @include xy-cell(4);
  }
}

@use "@wovenui/core" as * with (
  $brand: #4361ee,
  $breakpoints: ("sm": 640px, "md": 768px, "lg": 1024px),
  $light-theme: ("bg-base": #fff),
  $dark-theme: ("bg-base": #101010)
);

.page {
  @include apply(bg(base), text-color(regular), px(4) lg);
}

// _settings.scss, copied into your project
$button-padding: 0.85em 1em !default;
$button-background: $primary-color !default;

// app.scss
@import 'settings';
@import 'foundation';

@include foundation-global-styles;
@include foundation-button;
@include foundation-xy-grid-classes;

Moving from Foundation

1. Install the WovenUI extension for VS Code for completion, hover docs and one-click fixes while you convert. See Editor support.
2. Replace the copied _settings.scss with one @use "@wovenui/core" with (...) block. Colors move to $brand and the theme maps. See Configuration.
3. Replace @import of Foundation with @use of WovenUI, and drop the foundation-* export mixins: classes come from $generate-utility-classes and the feature flags.
4. Rebuild grid markup. grid-x with cell small-12 medium-6 becomes grid cols-1 cols-2@md on the parent, or cols(1), cols(2) md in apply(). Move the breakpoint from the front to the end of the class. See Grid and Media queries.
5. Replace xy-cell() and breakpoint() with apply() items that carry a breakpoint, such as cols(3) lg. See apply().
6. Build your components as your own classes with apply(), starting from the free card, navbar and form field recipes. See Component styles.
7. Replace show-for-dark-mode with data-theme and the theme tokens. See Theming and Tokens.
8. Keep the JavaScript you choose for interactive behavior; WovenUI adds no JavaScript dependency. Core tooltips are CSS only: see Tooltips.

Sources

Every statement about Foundation on this page comes from its official documentation or repository. Statements about WovenUI come from the core source, its changelog and the core documentation.

1. [1] Foundation for Sites: Sass
2. [2] Foundation for Sites: XY Grid
3. [3] Foundation for Sites: Sass Mixins
4. [4] Foundation for Sites: Sass Functions
5. [5] Foundation for Sites: Flexbox Utilities
6. [6] Foundation for Sites: JavaScript
7. [7] Foundation for Sites 6 maintenance announcement
8. [8] Foundation 6 Sass source (v6 branch, scss folder)
9. [9] Foundation 6 breakpoint source
10. [10] Foundation 6 visibility source
11. [11] Foundation 6 package.json
12. [12] Foundation 6 settings file
13. [13] Sass: @import
14. [14] Foundation 6 entry file (foundation.scss)