Klarna UI CSS Components


1129.6.05 years ago5 years agoMinified + gzip package size for @klarna/ui-css-components in KB


Klarna UI CSS Components

Build Status

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


Please check the LICENSE file.


Make sure...

  1. ...your contribution is aligned with the styleguide.
  2. ...your contribution doesn't break the grid. To avoid that use always the $grid variable to define your sizes, as in line-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.
  3. ... your code is linted: npm run lint.
  4. ... 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.


  1. Send a PR to GitHub.
  2. Once approved:
    1. Update the version using npm version (tag will have v prefix) & update CHANGELOG.md.
    2. Merge to master and push (with the new tag as well).

Travis will take care of publishing your new version to npm.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.