Rikki Patterns

🎽⚡️ Living pattern library generator. Move fast and don't break your patterns.

Features

• Colour definitions
• Type styles
• Components documentation
• Guidelines for writing content

Usage

npm install --save-dev rikki-patterns

Running the preview server

rikki start

Building tokens

We use a system of Design Tokens similar to SalesForce Lightning Design System, so that you can export the tokens for your environment.

rikki tokens
# Potential future arguments: --tokens colours,breakpoints,typography --path ./my_app/tokens --format sass 

Available formats are Sass, CSS, JSON, XML.

Creating a new component

rikki component <name>

Installing into Python apps

The templates use Nunjucks/Jinja2 and React. You can add the template paths to your application to make direct use of the components.

TEMPLATES = [ 
    { 
        'BACKEND': 'django.template.backends.jinja2.Jinja2', 
        'APP_DIRS': True, 
        'DIRS': [ 
            normpath(join(DJANGO_ROOT, 'client/ui/components')), 
            normpath(join(DJANGO_ROOT, 'client/ui')), 
        ], 
        'OPTIONS': { 
            'extensions': [ 
                'wagtail.wagtailcore.jinja2tags.core', 
                'wagtail.wagtailadmin.jinja2tags.userbar', 
                'wagtail.wagtailimages.jinja2tags.images', 
                'jinja2.ext.with_', 
                'jinja2.ext.i18n', 
                'jinja2.ext.do', 
                'core.jinja2_extensions.IncludeBlockWithContext', 
            ], 
            # 'environment': '<your_project>.jinja2.environment' 
        }, 
    }, 
]

Installing into your Sass workflow

To build the frontend assets into your application's static file directory:

npm run build ./my_app/static

To watch changes to the Design System and automatically export them to your app:

npm run watch ./my_app/static

Configuration

Development

Install

Clone the project on your computer, and install Node. This project also uses nvm.

nvm install
# Then, install all project dependencies. 
npm install
# Install the git hooks. 
./.githooks/deploy
# Set up a `.env` file with the appropriate secrets. 
touch .env

Working on the project

Everything mentioned in the installation process should already be done.

# Make sure you use the right node version. 
nvm use
# Start the server and the development tools. 
npm run start
# Runs linting. 
npm run lint
# Runs tests. 
npm run test
# View other available commands with: 
npm run

Releases

• Make a new branch for the release of the new version.
• Update the CHANGELOG.
• Update the version number in package.json, following semver.
• Make a PR and squash merge it.
• Back on master with the PR merged, follow the instructions below.

npm run dist
# Use irish-pub to check the package content. Install w/ npm install -g first. 
irish-pub
npm publish

• Finally, go to GitHub and create a release and a tag for the new version.
• Done!