Getting started

This guide is designed to touch upon the very basics of @daffodil/design to get you up and running quickly. It includes information on prerequisites, installation steps, and how to use a component.

Before you begin

@daffodil/design is designed to be used with Angular. Make sure Angular CLI has been installed before you begin. You'll also need a pakcage manager like npm or Yarn.

@daffodil/design is built with Sass, so we recommend you learn it!

Installation

To install @daffodil/design, use the following commands in your terminal:

Install with npm:

npm install @daffodil/design --save 

Install with Yarn:

yarn add @daffodil/design

Set up your style environment

1. Create a styles.scss in the root of your Angular app.
2. Add the stylesheet to your angular.json file. This step can be skipped if SASS is already in use in the application and the stylesheet already exists.

"projects": {
  "app-name": {
    "architect": {
      "build": {
        "options": {
          "styles": [
            "src/styles.scss"
          ],
        }
      }
    }
  }
}

Add global styles

There is a minimal required global style for the Daffodil Design System to operate effectively in all supported browsers. Update your styles.scss file to include the following:

@forward '@daffodil/design/scss/global';

For more information on our approach to these kinds of styles, see the Global Styles guide.

Add a theme

A theme must be configured in order for the components to work properly. The components in the design library can be configured with customized colors in addition to a dark and light mode for those same colors.

To use @daffodil/design's default theme, include the following in your styles.scss file:

@use '@daffodil/design/scss/theme' as daff;

.daff-theme-light {
    @include daff.daff-theme(daff.$theme);
}

.daff-theme-dark {
    @include daff.daff-theme(daff.$theme-dark);
}

See the Theming guide for more information on how to customize your own theme.

Use a component

Now you're ready to use Daffodil Design components! For example, here's how to use the Hero component.

@Component({
  standalone: true,
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DAFF_HERO_COMPONENTS,
  ],
})
export class CustomComponent {}

With the component imported, you can add it to your CustomComponent template like so:

<daff-hero>
  <div daffHeroTagline>Frontend framework for ecommerce PWAs</div>
  <h1 daffHeroTitle>Daffodil: The next great leap in ecommerce.</h1>
  <h2 daffHeroSubtitle>
    <p>Daffodil provides everything you need to create powerful and flexible ecommerce experiences.</p>
    <p>With Daffodil, ambitious businesses are able to achieve more while minimizing development and maintenance costs.</p>
  </h2>
</daff-hero>

Next steps

We've just walked through the basics of setting up @daffodil/design and using the basic features of the Hero component. Now try to change the color of the Hero!

Check out the full list of components, try and add them to your sample app, and imagine all the wonderful things you can now build!