The Nimiq style framework.
Clone or download
Latest commit 1e37711 Dec 21, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Small spacing fixes Dec 21, 2018
.gitignore Folder structure, README, release npm package Nov 3, 2018
LICENSE Initial commit Jan 22, 2018
README.md Format README Dec 8, 2018
demo.html Make section headers into links Dec 8, 2018
nimiq-style-icons.min.css v0.4.0 Dec 8, 2018
nimiq-style.min.css v0.4.1 Dec 21, 2018
package.json merge Dec 19, 2018
yarn.lock Folder structure, README, release npm package Nov 3, 2018

README.md

Nimiq Style Framework

The Nimiq CSS framework, defining UI look and feel: colors, fonts, sizes.

Please refer to the demo page 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 (available via Google Fonts).

Add Nimiq Style CSS to your project

From NPM

yarn add @nimiq/style
# or
npm install @nimiq/style

Then import the style into your CSS or module files:

@import 'node_modules/@nimiq/style/nimiq-style.min.css';
/* If you need the icons: */
@import 'node_modules/@nimiq/style/nimiq-style-icons.min.css';

From a CDN

You can also link to the Nimiq Style CSS directly in your HTML:

<link href="https://cdn.jsdelivr.net/npm/@nimiq/style@v0/nimiq-style.min.css" rel="stylesheet">
<!-- If you need the icons: -->
<link href="https://cdn.jsdelivr.net/npm/@nimiq/style@v0/nimiq-style-icons.min.css" rel="stylesheet">

Use the official fonts

To use Nimiq's main font "Muli", include it from Google Fonts:

<link href="https://fonts.googleapis.com/css?family=Muli:400,600,700" rel="stylesheet">

Nimiq also uses the monospace font "Fira Mono" to display account numbers. Include the required subset from Google Fonts:

<link href="https://fonts.googleapis.com/css?family=Fira+Mono&text=0123456789ABCDEFGHJKLMNPQRSTUVXY" rel="stylesheet">