Skip to content

v4.0.0
Compare
Choose a tag to compare
@jmjuanes jmjuanes released this 16 May 23:46
· 174 commits to main since this release
v4.0.0
a692660
This commit was signed with the committer’s verified signature.
jmjuanes Josemi Juanes
GPG key ID: 166383C5AFEABC42
Learn about vigilant mode.

We are excited to announce siimple v4.0.0 🎉 🎉 . This new release introduces a tons of new features and new ideas for the future. We will try to summarize all on this release notes.

Goodbye SASS 👋 👋

The main change in this new version is that we have rewritten all the framework into JS. Now we follow a CSS-in-JS approach, implemented from scratch and with zero dependencies. We also provide a tiny CLI utility that will help you to generate your own version of siimple. You can learn more in our getting started guide.

Now it is fully customizable 💅

The new version of siimple is based in a set of configuration rules written in JavaScript where you can define:

  • Your custom theme: you can define your custom colors, fonts, shadows, sizes, and more! Or apply a third party theme created by the community.
  • Your custom breakpoints.
  • The presets that you want to include: use our presets for adding core features like elements, helpers or icons, or use third party presets created by the community.
  • Additional styles: add your custom styles following our styles syntax.

This is an example of a configuration for siimple:

import colors from "@siimple/colors";
import theme from "@siimple/preset-theme";
import elements from "@siimple/preset-elements";

export default {
    ...theme,
    useRootStyles: false,
    useBorderBox: true,
    prefix: "",
    colors: {
        primary: colors.blue["500"],
        secondary: colors.mint["600"],
        text: colors.gray["800"],
        background: "#fff",
        muted: colors.gray["200"],
    },
    fonts: {
        body: ["Roboto", "sans-serif"],
        heading: ["Montserrat", "sans-serif"],
        code: ["monospace"],
    },
    styles: {
        ...elements.styles,
    },
};

Learn more about configuring siimple.

New naming methodology ✏️

We have switched to SMACSS for naming the CSS classes of our elements and helpers. For example, creating a primary button in previous versions required the following classnames:

<button class="siimple-btn siimple-btn--primary">...</button>

In v4.0.0 you can style the button just using the following classnames:

<button class="button is-primary">...</button>

Simple, right? You can learn more about our new naming system in this page.

New documentation site 📚

We have redesigned our documentation site with a new fresh and minimalistic style. Visit https://www.siimple.xyz.

Try siimple in your browser 💻

You can try siimple in your browser using our new online editor. This online editor allows you to:

  • Trying the latest features of siimple without installing anything, directly in your browser.
  • Using your own configuration, that is compiled in runtime.
  • Generating a link for sharing your code and configuration.

Other amazing new features ✨

  • Redesigned and simplified elements.
  • Redesigned helpers.
  • Added a collection of hand-crafted and pure CSS icons. Learn more about our icons.
  • Custom reboot included.

Getting started 🚀

Some tips for getting started with the new version of siimple:

  • Start reading the documentation. Learn the basics and all the new features.
  • Try it first in your browser using our online playground without installing anything.
  • When you are ready, follow the getting started guide for adding siimple to your project and creating your first configuration file.
  • Questions? We are always happy to help! The fastest way for getting support is using our discussions forum.
  • Something is unclear? You can help us improving the documentation. Open a new issue or create a new pull request with your improvements.
Assets 2
Loading