Factorial Patterns

This repository is a collection of reusable UI patterns.

Warning: This is heavily work in progress and subject to change.

Semantic-versioning policy

• Everything below 1.0.0 should be considered unstable/prerelease. Breaking changes are likely to be introduced at MINOR 0.x.0 level. Do not depend on them in production or use --exact version matching.
• Everthing above 1.0.0 should be conidered stable. Breaking changes will bump MAJOR x.0.0 and new features with backwards compatible API will bump MINOR 0.x.0.

Patterns

Components

Components are distinct UI pieces that can be included and provide their own twig template and accept variables.

• components-button
• components-flex-embed
• components-image
• components-image-contain
• components-image-cover
• components-modal
• components-pagination
• components-rte

Utils

Utils are low-level CSS classes that can be used to build bigger UI parts. Their twig templates are only for demonstration purposes.

• utils-display-responsive
• utils-font
• utils-font-weight
• utils-margin
• utils-padding

Installation

Prerequisites

• composer
• Node.js
• Yarn

Pattern Lab

composer install

Merge (m) everything and no (n) to updates.

Build tools

yarn install

This will install all the necessary build tools.

Build

yarn run build

This will build all patterns to public.

Caveat: patternlab currently also builds node_modules within patterns. Use lerna clean to remove the dependencies of all patterns.

Serve

yarn run dev

View patternlab at http://localhost:8080.

Deploy

GitHub Pages

yarn run deploy

This will commit the public folder and push the gh-pages branch.

npm

Log into npm, then.

lerna publish 

This will diff all packages and ask you about version bumping anything that has changed. SEE: https://github.com/lerna/lerna/#publish