Skip to content

v4.2.0

Compare
Choose a tag to compare
@jmjuanes jmjuanes released this 07 Aug 10:24
· 104 commits to main since this release
479c3cf

🎉 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