0.3.1 • Published 2 years ago
@siimple/preset-mustard v0.3.1
@siimple/preset-mustard
A very clean and yellowish theme preset for the siimple CSS toolkit.
Installation
Add this preset to your project using npm or yarn:
$ npm install --save @siimple/preset-mustard
Usage
Include this preset in your siimple.config.js
file:
import mustard from "@siimple/preset-mustard";
export default {
...mustard,
// ...other configuration
// If you need to define your own variants, first extend the preset variants.
// For example:
buttons: {
...mustard.buttons,
// ...your custom buttons variants
},
// In case that you need to add your custom styles, first extend the styles
// defined in mustard.styles:
styles: {
...mustard.styles,
// ...your custom styles
},
};
This preset uses Inter
as the default font family for both body and headings, so you will need to import this font in your HTML file:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">
Additional variants
This preset introduces additional variants for some elements like buttons, alerts and badges. For example, you can use the light
variant to create a more lithen alert, badge or button:
<!-- Light button -->
<button class="button is-light">Light button</button>
<!-- Light alert -->
<div class="alert is-light">
Light alert content
</div>
<!-- Light badge -->
<span class="badge is-light">Light badge</span>
You can also create outlined
buttons or badges:
<button class="button is-outlined">Outlined button</button>