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, Babel, Bundle splitting, modern+legacy JS output) and front-end dependencies (Supple, ConditionerJS, etc.).
Make sure Node 14 and npm are installed. A great guide can be found here: https://docs.npmjs.com/getting-started/installing-node
Please make sure your system meets the prerequisites
- From the terminal / command prompt, navigate to your site's directory.
- Type
npm init yo patternlab-starterkit, answer a few questions about your project, and wait. - Bask in the glory of your fully scaffolded Pattern Lab installation.
- Install Yeoman
npm install -g yo(one-time global install) or update:npm update -g yo. - Install this generator with
npm install -g generator-patternlab-starterkit(one-time global install) or update:npm update -g generator-patternlab-starterkit. - Run
yo patternlab-starterkit.
Run npm run serve from the commandline. This creates all patterns, the styleguide, assets, and the Pattern Lab site by BrowserSync which serves the files to you. Assets are not optimized for production environments.
For a single compile of all code, run npm run build. This will compile the front-end assets one single time in production-ready code.
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:
Dart Sass is the primary implementation of Sass, which means it gets new features before any other implementation. It's fast, easy to install, and it compiles to pure JavaScript which makes it easy to integrate into modern web development workflows.
Supple CSS is a small but powerfull (S)CSS framework designed specially with the latest browsers in mind. The framework is made with an eye on the future. It uses custom properties for configuration and utilises new CSS webstandards.
PostCSS is installed by default, and plugins are configured in postcss.config.js. You can add more PostCSS plugins here. Autoprefixer makes 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 package.json. PostCSS Normalize lets you use the parts of normalize.css you need from your browserslist.
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.
Conditioner.js: Frizz free, context-aware, JavaScript modules.
A smaller and faster bundle is built as bundle.es6.js, and a bundle for browsers that don't support modules a bundle.es5.js is built.
If you have any ideas or additions for this project please refer to the contributing guide