diff --git a/README.md b/README.md index ed7218acb65c433a2fc1e8d038e5549d1385faa4..d250a65c097686dab10ad959eebfae1f04453a83 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,6 @@ 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 @@ -92,3 +91,43 @@ 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>`: + + +```html +<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: + + ```html + <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script> + ``` + +2. Include `pirati-ui` JS bundle: + + ```html + <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`: + +- https://styleguide.pir-test.eu/latest/ +- https://styleguide.pir-test.eu/1.x.x/ +- ... and so on + +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/`.