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.
Release a new version
To release a new version:
- Make your changes and commit them
- Update the version number in
package.jsonbased 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
mi-button
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:
mi-button--primarymi-button--basemi-button--outline-
mi-button--link.
Helpers
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-largeto set amax-heightof40px -
.width-noneto set awidthofnone -
.inline-flexto setdisplay: inline-flex; -
.margin-autoto center items withmargin-leftandmargin-rightset toauto