Patternlab Development

Basics

• Starting the Build and Watch Tasks grunt build && grunt watch

• Open the vuepress Dev Server npm start

Creating a new Pattern

TIP

Components are either Atoms, Molecules or Organisms. You can also add general Layout Styles or whole Pages. See Atomic Design Documentation.

mkdir components/atoms/patternlab-name
cd mkdir components/atoms/patternlab-name
mkdir -p src/images
touch README.md // contains the documentation and example implementations
touch src/_functions.scss
touch src/_helpers.scss
touch src/_mixins.scss
touch src/_variables.scss
touch _patternlab-name.scss  // contains general pattern styles and includes mixins, variables etc.

Usage

Adding new Stylesheets

TIP

To include the Stylesheet of your Pattern, import the SCSS file in /patternlab/src/main.scss like this:

@import "components/molecules/accordion/accordion";

Adding new JavaScript Modules

TIP

Access your new JS-Module in /patternlab/src/core/index.js:

Accordion.init();