https://nimiq.github.io/nimiq-style/
The Nimiq style framework.
https://nimiq.github.io/nimiq-style/
Last synced: 4 months ago
JSON representation
The Nimiq style framework.
- Host: GitHub
- URL: https://nimiq.github.io/nimiq-style/
- Owner: nimiq
- License: mit
- Created: 2018-01-22T03:10:42.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-21T21:45:36.000Z (over 2 years ago)
- Last Synced: 2025-01-14T04:51:41.016Z (4 months ago)
- Language: HTML
- Homepage: https://nimiq.github.io/nimiq-style
- Size: 493 KB
- Stars: 8
- Watchers: 6
- Forks: 10
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- nimiq-awesome - Nimiq Style Framework
- nimiq-awesome - Nimiq Styles
README
# Nimiq Style Framework
The Nimiq CSS framework, defining UI look and feel: colors, fonts, sizes.
**Please refer to the [demo page](https://nimiq.github.io/nimiq-style/demo.html)**
for examples and in-depth explanations of available UI components, what they look
like, and how to use them.
The style framework consists of two parts, the CSS definitions and
[the fonts](#use-the-official-fonts) (available via Google Fonts).
## Add Nimiq Style CSS to your project
### From NPM
```bash
yarn add @nimiq/style
# or
npm install @nimiq/style
```
Then import the style into your CSS or module files:
```css
@import 'node_modules/@nimiq/style/nimiq-style.min.css';
```
To use icons, you need to link to the icon sprite:
```html
```
### From a CDN
You can also link to the Nimiq Style CSS directly in your HTML:
```html
```
**Note:** To use icons, you need to host and serve
[the `nimiq-style.icons.svg` file](https://cdn.jsdelivr.net/npm/@nimiq/[email protected]/nimiq-style.icons.svg)
yourself, because cross-origin requests of SVG sprites are not allowed by browsers.
## Use the official fonts
To use Nimiq's main font "Muli", include it from Google Fonts:
```html
```
Nimiq also uses the monospace font "Fira Mono" to display account numbers.
Include the required subset from Google Fonts:
```html
```