See the Changelog at GitHub.
Patterns aims to support at least the two latest major versions of all popular browsers:
- Apple Safari
- Google Chrome
Other browser version may work too, but are not actively tested against.
Additionally we do support Microsoft Internet Explorer 11 until a certain extend via optional polyfills loading.
For Internet Explorer 11 support we have included a
You can inlcude it optionally via
src/polyfills-loader.js which injects the polyfills bundle only if the current browser is Internet Explorer.
For this to work, include the following in BEFORE you load the patternslib bundle:
Note: this only works, if the bundle nor the polyfills-loader are not loaded asynchronously. The script loading order matters here and async loading has no deterministic loading order.
Development installation requirements
Make sure, you have these requirements installed:
- Node.js ( https://nodejs.org/en/ ) - yarn ( https://yarnpkg.com/ ) - make - git
On OSX you need
gnu-tar instead of tar (GNU tar supports the
Please install it with e.g.
brew install gnu-tar.
The following commands will generate a
bundle.min.js file in the
which contains Patterns and all its dependencies:
git clone git://github.com/Patternslib/Patterns.git cd Patterns make
Alternatively, you can download a bundle at patternslib.com.
The individual patterns are located in their own folders in
Each pattern folder contains some or all of the following files:
- index.html which contains HTML markup that shows a demonstration of the pattern.
- documentation.md which is a Markdown file that documents the pattern's purpose, how to use it and how to configure it.
- A Sass (.scss) file which provides the CSS associated with the pattern.
To generate CSS files from the pattern's included Sass files, type
and the css files will be generated in the same location as the Sass files.
You'll need to have a Sass compiler installed.
How to demo patterns
To demo the patterns, simply type
make serve to install the necessary
dependencies and to start a simple Node.js HTTP server.
You can then visit http://localhost:4001 to see a site with demos.
To develop on Patterns, clone the repository and set it's push-url to your fork:
git remote set-url --push origin <url_to_your_fork>
Create a branch for the feature/bug you are working on:
git checkout -b <feature>
For inclusion use either a GitHub pull request or create a ticket with a url to your external repository.
The simplest way to run the tests are to use make:
This will install all required npm and bower packages and run the tests.
Eventually add to tests:
import "core-js/stable"; import "regenerator-runtime/runtime";
node --inspect-brk node_modules/.bin/jest --runInBand ./src/pat/tooltip/tooltip.test.js
Connect in chrome via:
You can pass Jest any parameter it accepts, like
node --inspect-brk node_modules/.bin/jest --runInBand ./src/pat/tooltip/tooltip.test.js -t will.be.closed.when
Enabling log messages
To facilitate debugging you can change the default log level through the URL query string by adding
http://www.example.com/?loglevel=DEBUGchanges the default log level to
http://www.example.com/?loglevel-inject=DEBUGchanges the log level for just the inject pattern to
http://www.example.com/?loglevel=ERROR&loglevel-inject=INFOchanges the standard log level error, but enables messages at the
INFOlevel for the inject pattern.
Bundle build analyzation
Build the stats.json file:
Check dependency tree and why which package was included: https://www.npmjs.com/package/whybundled
Visualize dependency tree and analyze bundle size: https://www.npmjs.com/package/webpack-bundle-analyzer
Organisations and projects which use Patternslib
- Overstroom ik?, a website which informs Dutch citizens of their risk of flooding. It was introduced and highly praised by the Dutch minister of infrastructure and environment, Melanie Schultz.
- OiRA, an online risk assessment tool, created for the Occupational Health and Safety Agency (OSHA) of the European Union.
- Staralliance uses Patternslib in their intranet.
- Plone CMS via Mockup, which is built upon Patternslib.
- Quaive Intranet uses Patternslib.