@siimple/preset-noir

An elegant and classic theme for siimple.

Installation

Install this package using npm:

$ npm install --save @siimple/preset-noir

Usage

Add this theme to your siimple.config.js file:

import noir from "@siimple/preset-noir";

export default {
    ...noir,
    // ...other configuration
    styles: {
        ...noir.styles,
        // other custom styles
    },
};

This preset uses Noto Serif for body text and for headings, so you will need to import this font in your HTML file:

<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700" rel="stylesheet">

Additional variants

This preset introduces additional variants for some elements. You can use the outlined variant to create an outlined button or badge:

<!-- Outlined button -->
<button class="button is-outlined">Outlined button</button>

<!-- Outlined badge -->
<span class="badge is-outlined">Outlined badge</span>

Demo

Colors

base colors

primary
secondary
muted
text
heading
highlight
background

Typography

Font family

body
'Noto Serif', serif
heading
inherit
code
SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace

Font sizes

0.875rem16px1.25rem1.5rem1.75rem2rem2.5rem3rem3.5rem4rem4.5rem

Buttons

primary
secondary
outlined

Alerts

primary alert
secondary alert

Badges

primarysecondaryoutlined

Table

RankNameTeamTotal Points
1Sandra HoylesThe Champs80.005
2Mathew SimsJava Lovers68.750
3Helen BoothCode Plus Plus49.120

Cards

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Action
Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Action

Forms


Modals

Open modal

Navigation


Dropdown


Designed and maintained with by @jmjuanes.

Code is licensed under MIT, documentation under Creative Commons Attribution 4.0.

Currently v4.3.1