Pirati UI kit
This repository holds UI styleguide for Czech Pirate Party websites. It's intention is to made a core framework to be used across all sites and build all UI using it. This will ensure better consistency a easier updates.
It is built upon:
- Patternlab is a tool for developing design systems
- Tailwind CSS is a brilliant utility-first CSS framework built on top of PostCSS
Getting Started
These instructions are for getting the project running off a local development environment:
- Install any system requirements on your dev environment
- Use NPM to install project dependencies and build the project
System Requirements
- Node.js (v14.5.x or later)
Install and Run
It's JavaScript all the way down so once you have the the system requirements you can run the following commands:
npm i
npm run developThe npm command will install project dependencies and the npm run develop
command builds the project, sets up a local server for the Patternlab UI and
watches relevant template files to rebuild on any changes.
Build
The build command compiles the styleguide CSS and the Patternlab output but it doesn't create a server for the styleguide website. To build, run:
npm run buildReleasing
First build for production as described previously:
npm run buildNow, make new version using semver principle:
npm version [VERSION_NUMBER]This will create a new git tag which will be recongnized by the build server and it will generate following:
- update
latestpointer - update minor version pointer like
1.x.xin case this was a patch update or minor update - update patch version pointer like
1.3.xin case this was the patch update - add
1.3.3version if the tag name was1.3.3
Running locally with Docker
Create a docker image:
docker build -t pirati-ui .You can then run the docker container like this:
docker run -p 8001:80 pirati-ui:latestYour docker container will be available at http://localhost:8001.
Updating icons
This styleguide features iconset too. Icons themselves are managed using
Icomoon web app. If you don't have your Icomoon account
yet, start by creating one. Then, use source/icons/selection.json to load
current project settings. Add/modify icons and finally download your new icon
font. Delete contents of the source/icons and put all the content from your
downloaded font. When finished, run npm run update-iconset that will update
both the style and pattern file automatically.
Developing other websites with pirati-ui
In order to integrate pirati-ui with other websites, you will need to include
at least the CSS source that defines look and feel. Simply place the following
code in your <head>:
<link rel="stylesheet" href="[ROOT_URL]/css/styles.css">If you want to use the JS enahancements as well, you will also need to:
-
Include Vue.js:
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script> -
Include
pirati-uiJS bundle:<script src="[ROOT_URL]/js/main.bundle.js"></script>
Make sure that Vue.js is included before the JS bundle. The best place for both of the JS sources is at the end of your HTML document.
The [ROOT_URL] should point to the root address of your pirati-ui installation. This can either be
one of official bundles hosted at https://styleguide.pir-test.eu:
Alternatively, you can run the pirati-ui locally. In this case, just run
npm run develop and use whatever opens in the browser as your ROOT_URL.
Usually, this will be http://localhost:3000/.