Library for quickly applying rich interaction patterns without the need to write any JavaScript.
JavaScript HTML CSS Other
Latest commit 7625da7 Feb 24, 2017 @thet thet committed on GitHub Merge pull request #480 from Patternslib/thet-gallery-ui
pat-gallery UX improvements
Failed to load latest commit information.
_sass Include mixins and variables in the SCSS files. Apr 21, 2016
docs Fix some typos Nov 10, 2015
src pat-gallery UX improvements Feb 23, 2017
style added support for selectors, adding a class and listening to updates … Jan 15, 2017
tests Parser fix, don't treat & as a separator. Apr 21, 2016
.DS_Store Basic test case Oct 20, 2016
.bowerrc Use bower_components to drop deps Jan 29, 2014
.gitignore sort .gitignore Jul 27, 2016
.travis.yml Added travis_retry Feb 20, 2017 Tweak contrib doc Apr 24, 2014
Gemfile Add Sass files and a Makefile step. Apr 22, 2015
LICENSE.txt Add package metadata. Jan 19, 2012
Makefile there is no tests target Feb 23, 2017 Expand the readme. Oct 10, 2015 add version file, prepend version number to bundle.js when creating a… Oct 19, 2015 Update changes and roadmap Sep 18, 2015
VERSION.txt Bump version number for release. Aug 15, 2016
bower.json added sticky pattern Oct 8, 2016
build.js add version file, prepend version number to bundle.js when creating a… Oct 19, 2015 pat-gallery UX improvements Feb 23, 2017
index.html added support for selectors, adding a class and listening to updates … Jan 15, 2017
jshintrc Stop enforcing the double quotes rule. Apr 15, 2015
jshintrc-tests pat-inject: next-href wasn't working as advertised. Apr 21, 2016
main.js added sticky pattern Oct 8, 2016
package.json update jshint to be able to add an ignore and fix some ignores for main Sep 14, 2016
tests.html Move pattern tests into the pattern folders Jun 11, 2015
tests.js add scafolding for pat-tabs pattern, include it in the library. Nov 16, 2015


Build Status

Patterns is a toolkit that enables designers to build rich interactive prototypes without the need for writing any JavaScript. All events are triggered by classes and other attributes in the HTML, without abusing the HTML as a programming language. Accessibility, SEO and well structured HTML are core values of Patterns.

Browser support

Patterns aims to support at least the two latest major versions of all popular browsers.

Currently that means:

  • Apple Safari 5+
  • Google Chrome 30+
  • Microsoft Internet Explorer 9+

Other browser version may work too, but are not actively tested against.


git clone git://
cd Patterns

This will generate a bundle.js file which contains Patterns and all its dependencies.

Alternatively, you can download a bundle at


The individual patterns are located in their own folders in ./src/pat/.

Each pattern folder contains some or all of the following files:

  • index.html which contains HTML markup that shows a demonstration of the pattern.
  • which is a Markdown file that documents the pattern's purpose, how to use it and how to configure it.
  • A javascript file which implements the pattern's functionality.
  • A Sass (.scss) file which provides the CSS associated with the pattern.

To generate CSS files from the pattern's included Sass files, type make all_css 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.

Alternatively, patterns can also be demoed through the website, which is open-source. The code and setup instructions are here.

Contributing fixes

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.

Running tests

The simplest way to run the tests are to use make:

make check

This will install all required npm and bower packages and run the tests.

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 and Plone Intranet project both use Patternslib.

Interactive HTML/CSS prototypes made with Patternslib