Skip to content
Snippets Groups Projects
Select Git revision
  • 85b2edde50b80c61a47e01f8f983b5f332c29ed1
  • master default protected
  • feat/new-image-formats
  • clickable-select-chevron
  • 2.20.0
  • 2.19.0
  • 2.18.0
  • 2.17.0
  • 2.16.1
  • 2.16.0
  • 2.15.0
  • 2.14.0
  • 2.13.0
  • 2.12.1
  • 2.11.0
  • 2.10.0
  • 2.9.1
  • 2.9.0
  • 2.8.0
  • 2.7.1
  • 2.7.0
  • 2.6.0
  • 2.5.2
  • 2.5.1
24 results

ui-styleguide

user avatar
2.16.0
Tomáš Valenta authored
85b2edde
History
user avatar 85b2edde
History
Name Last commit Last update
docker/nginx
scripts
source
tailwind-plugins
.dockerignore
.editorconfig
.gitignore
.gitlab-ci.yml
.nvmrc
Dockerfile
LICENSE
README.md
gulpfile.js
package-lock.json
package.json
patternlab-config.json
screens.js
tailwind.config.js
README.md

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

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 develop

The 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 build

Releasing

First build for production as described previously:

npm run build

Now, 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 latest pointer
  • update minor version pointer like 1.x.x in case this was a patch update or minor update
  • update patch version pointer like 1.3.x in case this was the patch update
  • add 1.3.3 version if the tag name was 1.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:latest

Your 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:

  1. Include Vue.js:

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>

  2. Include pirati-ui JS 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/.

Pirátský GitLab - Home of the CopyLeft