Klarna UI CSS Components
Note: This project and it's sister project Klarna UI React Components are in their way to being deprecated in favor of the unified Klarna UI Components. There will be a migration guide once the new Klarna UI Components hit 1.0 and we expect the migration effort for consumers to be small.
This project contains CSS components to be used in all Klarna user facing projects.
The showroom of these components is available online at klarna.github.io/ui-css-components.
The reference for its implementation is Klarna's styleguide.
The project follows a non strict version of BEM, and it doesn't include any kind of JavaScript so no behaviour is defined. If you use React use the ui-react-components.
Running locally
To run the showroom locally:
npm install
make dev
License
Please check the LICENSE file.
Contributing
Make sure...
- ...your contribution is aligned with the styleguide.
- ...your contribution doesn't break the grid. To avoid that use always the
$grid
variable to define your sizes, as inline-height: ($grid * 4)
. As a rule of thumb, if your element total height (sum of content, paddings, margins, etc...) has an integer multiple of$grid
you should be good. - ... your code is linted:
npm run lint
. - ... it works in the major browsers, the simplest way is to spawn ngrok and use the cloud service of your choice. Else, you can download IE virtual machines for virtualbox using
curl -s https://raw.githubusercontent.com/xdissent/ievms/master/ievms.sh | env IEVMS_VERSIONS="9" bash
.
Then:
- Send a PR to GitHub.
- Once approved:
- Update the version using
npm version
(tag will havev
prefix) & updateCHANGELOG.md
. - Merge to master and push (with the new tag as well).
- Update the version using
Travis will take care of publishing your new version to npm.