Installation
Install the Eddie packages you need via npm:
npm install @brad-frost-web/eddie-web-components @brad-frost-web/eddie-design-tokens
Optional packages:
npm install @brad-frost-web/eddie-icons # SVG icon sprites
npm install @brad-frost-web/eddie-recipes # Product-specific compositions
Quick Setup
1. Add the theme class
Add a theme class to your <html> element:
<html class="bfw">
Available themes: bfw, bfw-dark, bfw-v9, wowee-zowee, we-are-here
2. Import tokens and fonts
In your main JavaScript entry point:
import '@brad-frost-web/eddie-design-tokens/bfw/scss/fonts.scss';
import '@brad-frost-web/eddie-design-tokens/bfw/build/css/tokens.css';
3. Import components
Import each component you use:
import '@brad-frost-web/eddie-web-components/components/button/button';
import '@brad-frost-web/eddie-web-components/components/heading/heading';
import '@brad-frost-web/eddie-web-components/components/card/card';
4. Use in HTML
<ed-heading tagName="h1">Hello Eddie</ed-heading>
<ed-button variant="primary" text="Click me"></ed-button>
The Eddie-Only Rule
Consumer project CSS should contain only a viewport reset (box-sizing, html/body height). Everything else comes from Eddie:
- No custom component classes
- No raw
font-family, font-size, or font-weight values
- No hardcoded colors, spacing pixels, or border values
- No Google Fonts
<link> tags (fonts load via the token package)
If you need inline styles, use Eddie CSS custom properties:
<div style="padding: var(--ed-spacing-md); background: var(--ed-theme-color-background-default)">
What if Eddie doesn't have what I need?
Create a recipe component in packages/eddie-recipes/. Never write ad-hoc component CSS in consumer projects. See the Recipes page for details.