@siimple/preset-base

Default theme preset for the siimple CSS toolkit.

Install

Install this package using npm:

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

Usage

Use the base theme in your siimple.config.js file:

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

export default {
    // Import all default scales, breakpoints and root styles
    ...base,
    // Extend default theme scales
    colors: {
        ...base.colors,
        text: "#000",
    },
    // ...other configuration
};

Demo

Colors

base colors

primary
secondary
highlight
muted
text
heading
background
dark
light
white

Typography

Font family

body
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-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

Alerts

primary alert
secondary alert

Badges

primarysecondary

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