v4.2.0
🎉 New dropdown element added to siimple
You can now create dropdowns with siimple using the dropdown
class and the with-dropdown
modifier:
<div class="is-inlie-block with-dropdown">
<button class="button is-flex has-items-center has-pr-4">Dropdown</button>
<div class="dropdown">
<a class="navlink">Action</a>
<a class="navlink is-active has-bg-highlight">Another action</a>
</div>
</div>
Documentation: https://www.siimple.xyz/docs/elements/dropdown
🧰 Added integration with PostCSS
Now you can integrate siimple in your PostCSS build process. In your postcss.config.js
, include the plugin of siimple for PostCSS with the path to your siimple.config.js
:
const autoprefixer = require("autoprefixer");
const siimple = require("siimple/postcss.cjs");
module.exports = {
plugins: [
siimple("./siimple.config.js"),
autoprefixer(),
// other plugins
],
};
🔧 Simplified helpers and improved base preset
We have simplified our helpers, so for example you can just apply rounded corners to your element using is-rounded
modifier instead of using has-radius-md
. In case that you need to restore the previous helpers (or add news), we have added a new function called createHelper
to the @siimple/modules
package for generating helpers styles in your configuration (see https://www.siimple.xyz/docs/packages/modules):
import {createHelper} from "@siimple/modules";
export default {
// ...other configuration
styles: {
...createHelper({
prefix: "is",
states: ["default"],
responsive: false,
properties: ["textDecoration"],
values: {
"underlined": "underline",
"not-underlined": ["none", "!important"],
},
}),
// ...other styles
},
};
Also, we have removed some sizes and spaces values from the base preset to keep it as small as possible.
⛄ New Ice preset
We have added a new preset for siimple based on Nord Theme. You can explore this preset on https://www.siimple.xyz/docs/presets/ice
✨ New examples section
We have moved all recipes to a new Examples section: https://www.siimple.xyz/examples