@mapsindoors/css NPM

MapsIndoors CSS

CSS button component and helpers using MapsIndoors Design Tokens (midt)

The component is using the BEM methodology.

See the demo page (index.html) for an overview.

To release a new version:

Make your changes and commit them
Update the version number in package.json based on Semantic Versioning
Tag the last commit with the version number in this format: v1.2.3
Push your commits with git push origin --tags
GitHub Actions on the repo will create a Release with the tag's version number and push that versioned release to npm

The .mi-button block class is used for styling buttons.

Basic example:

<button type="button" class="mi-button mi-button--primary">Click me</button>

Variants:

The helpers.css-file is a range of CSS utility classes that each serve a particular purpose.

Example:

<body class="debug">

Sets golden yellow lines around all elements on the page for easier debugging (when using .flex for instance).

Other examples:

.max-height-xx-large to set a max-height of 40px
.width-none to set a width of none
.inline-flex to set display: inline-flex;
.margin-auto to center items with margin-left and margin-right set to auto