Klarna UI CSS Components

Downloads in past


1029.6.06 years ago6 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.