Pattern Library for Crimson 2.0

Development & Contribution

Clone the repo:

git clone [email protected]:crimson-2.0/pattern-library.git
cd pattern-library

npm install
npm run compile

Usage:

First:

npm i crimson-pl

Then, make sure you've included both dist/css/crimson.css and dist/js/components.js somehow in your application. Javascript in currently necessary only if you want to use TranscludedContent or PopupTransclusion components.

Publishing

WARNING: This is deprecated! You should use the CI/CD pipeline instead.

The patten-library should be published to npmjs.org as a public package. The Postbox relies on npmjs in order to update the package Currently each user needs a personal account and must be added to the Repo by Jacek Bilski or Thomas Kentemich. See (https://tracker.innoq.com/browse/INNOQ-5813)

Login to npm with the following command:

npm adduser

Publish the package (don't forget to bump the version!):

npm publish

CI/CD and automatic deplyoment

When you push a new commit, a new version is build via the Gitlab CI pipeline and stored as a job artifact (but not published!)

In order to publish a new version to npmjs run the following command:

npm version xx.xx.xx

The new version is tagged, pushed to the Gitlab CI and automatically deoployed to npmjs. In order to make that possible, an Automation Key is stored as a secret variable in the Gitlab CI.

Documentation

Documentation for components is provided using aiur. To access it use npx aiur --liveserve and go to localhost:3000.

INNOQ-bootstrap-theme

All necessary styles are included in dist/scc/crimson.css, so just simply include that somewhere in your page, and you're good to go. How to use that theme and Bootstrap in general, is documented on INNOQ-bootstrap-theme and Bootstrap pages.

Bootstrap-icons

Styles required to use those icons are already included in dist/scc/crimson.css. Fonts containing the icons are available from dist/fonts/bootstrap-icons.woff and dist/fonts/bootstrap-icons.woff2. CSS expects that the fonts are provided from the same folder as the CSS itself, bear that in mind when using the icons. Documentation is available on Bootstrap-icons page.

Crimson logo

There are 5 icons to use, available from dist/logos/. There is no special styling for them, just use them as any other SVG/PNG picture.

Limitations

Bootstrap-icons are only available using WOFF/WOFF2 font formats, SVG is not directly supported. Bootstrap-icons are a transitive dependency, so all SVG files are available under node_modules/bootstrap-icons/icons, but using those might require some additional magic to be used.

Crimson-pl is available only as a NPM package. The assets are also not published using any CDN. The repository is not public, so linking some assets directly from the repository is also not possible. That might be problematic for projects not using NPM.

Currently, there's no SASS/SCSS version of styles provided. The file is actually available under src/index.scss, but using it outside crimson-pl will cause issues of will require some configuration that might not be fitting the project.