koordinates.ui

This contains our UI components and common styles to use across all of our apps. The goal of this repo is to reach the utopia where design & development shares a consistent language for Koordinates user interface.

Table of contents

1. Run locally
2. Installation in projects
3. Make a new package release
4. Component path
5. Overrides

Run locally

1. Install node.js
2. nvm install
3. npm install
4. npm run start

This will build the assets from source and start a watcher to run and compile any changes made inside /sass folder.

If you just want to build the assets:

npm run build

Developing on other projects

If you are developing on other projects and would like to automatcially pull ing changes from koordinates.ui, run

npm link

from your koordinates.ui folder before running npm run start.

Then run npm link koordinatesui from the project folder you're working on.

Linting

Lint your SaSS with

npm run lint

Creating your own components

From the root folder of the project run:

$ python koordinatesui/commands/create_component.py --component="My new Component"

You should get 2 files:

• Component .html under koordinatesui/templates/koordinates/components/
• Components .scss under koordinatesui/static_src/sass/components/

TODO: generate JS component.

Installation in projects

Koordinatesui is available as a Python package in our DevPi package repository.

Just add the dependency in your requirements.txt file and run a pip install -r requirements.txt.

When using Django remember to add it to the INSTALLED_APS var in your settings.py.

Make a new package release

Make sure you run build and dist tasks before uploading a new version:

npm run dist
python setup.py sdist
devpi upload -y --formats sdist.tgz,bdist_wheel --from-dir dist/

Check the notes on devpi if you have issues while logging in.

Component path

Set the variable $koordinates-ui-base-path to the relative path to the component from the including sass file. This ensures that font imports and other non-sass assets are correctly found.

E.g.

// Koordinates.ui
$koordinates-ui-base-path: "../components/koordinates.ui/";
@import "koordinates.ui/sass/main.scss";

Overrides

Set the overrides in the beginning of the sass file.

E.g.

// Overrides
$base-font-size: 10px;
@import "koordinates.ui/sass/main.scss";

Icon System

• Add svg icons into icons/src directory.
• Run gulp icons to compile all of them into icons/output/sprite/sprite.svg
• To preview all icons, open icons/output/sprite/sprite.symbol.html