rikki-patterns
🎽⚡️ Living pattern library generator. Move fast and don't break your patterns.
Last updated 2 years ago by thibaudcolas .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install rikki-patterns 
SYNC missed versions from official npm registry.

Rikki Patterns npm Build Status Coverage Status

:running_shirt_with_sash::zap: 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!

Current Tags

  • 0.4.0                                ...           latest (2 years ago)

5 Versions

  • 0.4.0                                ...           2 years ago
  • 0.3.0                                ...           2 years ago
  • 0.2.0                                ...           2 years ago
  • 0.1.1                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (31)
Dev Dependencies (6)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |