Skip to content
Snippets Groups Projects
Select Git revision
  • e2c3d22ceabe6a846d87a3f4fdf6c2f20b98ac12
  • master default protected
2 results

sql

  • Clone with SSH
  • Clone with HTTPS
    • 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