Yeoman generator for a patternlab starterkit
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

generator-patternlab-starterkit - v1.5.0

A Yeoman generator for Pattern Lab, a static site generator based on Brad Frost's Atomic Design methodologies. Scaffolds out a new Pattern Lab site, along with a few other optional workflow bells and whistles (Sass, Autoprefixer, Bower, Grunt) and front-end dependencies (Angular, jQuery, Modernizr, Blocss etc.).


Make sure Node and npm are installed. A great guide can be found here:

  • Install Yeoman, Bower npm install -g yo bower grunt-cli gulp (one-time global install) or update: npm update -g yo bower grunt-cli gulp.
  • Install this generator with npm install -g generator-patternlab-starterkit (one-time global install) or update: npm update -g generator-patternlab-starterkit.

Note: Mac users need to run above commands with sudo.


Please make sure your system meets the prerequisites

  • Run npm update -g generator-patternlab-starterkit
  • From the terminal, navigate to your site's directory.
  • Type yo patternlab-starterkit, answer a few questions about your project, and wait.
  • Bask in the glory of your fully scaffolded patternlab installation.

Getting Started

Front-end developing

Run npm run start from the commandline. This creates all patterns, the styleguide, and the pattern lab site by BrowserSync which serve the files to you.


For a single compile of all code, to build on a server for example, you can run npm run build. This will compile the front-end one single time.


In general refer to patternlab-node for more in depth documentation about the use of patternlab. generator-patternlab-starterkit has some important additions compared to patternlab-node:


LibSass is a C/C++ port of the Sass engine. The point is to be simple, faster, and easy to integrate.


Autoprefixer is installed by default. This way we make sure that all our CSS can be written prefix-free while the prefixes are added later on based on the supported browsers. You can add/remove supported browsers by changing the browserlist property in config.json.

Stylelint is used to enforce some kind of code style throughout the project. By default we have some default checks in .stylelintrc, you can alter them per project.


ESLint is a tool that helps to detect errors and potential problems in your JavaScript code. By default we have some default checks in .eslintrc, you can alter them per project.


If you have any ideas or additions for this project please refer to the contributing guide