@siimple/preset-ice

A frosty and clean theme for siimple. Based on Nord Theme.

Installation

Install this package using npm:

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

Usage

Use this theme in your siimple.config.js file:

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

export default {
    ...ice,
    // ...other configuration
};

This preset uses Poppins as default font for body text and headings. You will need to import this font in your HTML file:

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

Additional variants

This preset introduces additional variants for some elements like buttons, alerts and badges. You can use the success, warning and danger variants to style your buttons, alerts and badges:

<!-- Buttons -->
<button class="button is-danger">Danger button</button>
<button class="button is-warning">Warning button</button>
<button class="button is-success">Success button</button>

<!-- Alerts -->
<div class="alert is-danger">Danger alert</div>
<div class="alert is-warning">Warning alert</div>
<div class="alert is-success">Success alert</div>

<!-- Badges -->
<span class="badge is-danger">Danger badge</span>
<span class="badge is-warning">Warning badge</span>
<span class="badge is-success">Success badge</span>

Acknowledgement

This theme has been inspired in Nord Color palette.

Demo

Colors

base colors

primary
secondary
background
text
heading
muted
danger
warning
success

polar

polar.0
polar.1
polar.2
polar.3

snow

snow.0
snow.1
snow.2

frost

frost.0
frost.1
frost.2
frost.3

aurora

aurora.0
aurora.1
aurora.2
aurora.3
aurora.4

Typography

Font family

body
Poppins, sans-serif
heading
Poppins, sans-serif
monospace
Menlo, monospace

Font sizes

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

Buttons

primary
secondary
danger
warning
success

Alerts

primary alert
secondary alert
danger alert
warning alert
success alert

Badges

primarysecondarydangerwarningsuccess

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