‚̧Norse Polytheistic Mythology

    rikki-patterns

    0.4.0¬†‚Äʬ†Public¬†‚Äʬ†Published

    Rikki Patterns npm Build Status Coverage Status

    ūüéĹ‚ö°ÔłŹ 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!

    Install

    npm i rikki-patterns

    DownloadsWeekly Downloads

    4

    Version

    0.4.0

    License

    MIT

    Last publish

    Collaborators

    • yuzima
    • synecdokey
    • springloaders
    • thibaudcolas
    • holloway