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: https://docs.npmjs.com/getting-started/installing-node
- 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
npm update -g generator-patternlab-starterkit
- From the terminal, navigate to your site's directory.
yo patternlab-starterkit, answer a few questions about your project, and wait.
- Bask in the glory of your fully scaffolded patternlab installation.
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
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.
.eslintrc, you can alter them per project.
If you have any ideas or additions for this project please refer to the contributing guide