koordinatesui v2.0.5
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
Run locally
- Install node.js
nvm install
npm install
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 intoicons/output/sprite/sprite.svg
- To preview all icons, open
icons/output/sprite/sprite.symbol.html