Nothing 🚀 Pattern Library Boilerplate

A boilerplate for building pattern libraries on top of Patternlab. It uses Patternlab Edition Node - Webpack as foundation and is preconfigured for Nothing's internal tools and frameworks.

Installation and Starting

1. Download/clone
2. npm install
3. npm run patternlab:serve

See upstream repository for further information.

Getting Started

List all of the available commands

To list all available commands type:

npm run patternlab:help

Generate Pattern Lab

Generate documentation front-end:

    npm run build

Generate production bundles:

    npm run package

Will store CSS, JavaScript, images and other assets minimized and production ready in the dist folder. Output location can be placed. See configuration manual.

Watch for changes and re-generate Pattern Lab

To watch for changes, re-generate the front-end, and server it via a BrowserSync server, type:

npm run serve

Webpack dev server should open http://localhost:3000 in your browser, both host and port are configurable in the patternlab-config.json file.

Pattern Lab - Configuration

Unlike the other editions, there were a few options added just for this edition that allow for easier upgrading, and better flexibility.

Custom Webpack Configuration and Merge Options

In this edition, it's important to make the configuration for webpack something very easy to update, and very easy to modify. The current setting for webpack custom configuration and merge are described here.

You can change how it merges by changing this object in patternlab-config.json:

    "webpackMerge": {
        "entry": "replace"
    },

By default merge does a append if that option works for you only set which webpack configuration you want to change. The merge setting is: smartStrategy which is documented over on this page.

Setting Webpack Dev Server

You can set several options to configure your dev server. You can also in the CLI pass any option on demand.

    "webpackDevServer": {
        "url": "http://localhost",
        "port": 3000,
        "watchContentBase": true,
        "watchOptions": {
            "aggregateTimeout": 500,
            "ignored": [],
            "info-verbosity": "verbose"
        }
    },

Modifying the compression settings for bundles

You can safely modify the following settings in the the main webpack.babel.config that can change how the bundles get optimized.

Note: in webpack 4, these settings are automatically triggered when mode=production when running the dev server this is not used.

All uglify settings are in the patternlab-config.json:

    "uglify": {
        "sourceMap": false,
        "parallel": true,
        "uglifyOptions": {
            "mangle": false
        }
    },

Namespace

In some cases you may want to add a namespace to your JS or CSS/SCSS files. You can now add a global NAMESPACE which can be read by any JS module. The sample of .scss includes how to use it in a .SCSS file.

This can be changed in thepatternlab-config.json under app:

    "app": {
        "namespace": ""
    }

Licenses

• babel-cli - MIT
• babel-core - MIT
• babel-polyfill -MIT
• babel-loader -MIT
• babel-preset-env - MIT
• babel-register -MIT
• copy-webpack-plugin - MIT
• event-hooks-webpack-plugin - MIT
• globby - MIT
• patternlab-node - MIT
• styleguidekit-assets-default - MIT
• styleguidekit-mustache-default - MIT
• uglifyjs-webpack-plugin - MIT
• webpack - MIT
• webpack-config-utils - MIT
• webpack-dev-server - MIT
• webpack-merge - MIT

Contributors

	Josh Schneider	GitHub
	Paul Wright	Website