siimple

🐛 Bug fixes

• Fixed bug in CLI tool running on Windows (#192).
• Added missing "exports" entry to package.json in all packages (b29bf44b90f674802f7f4fbdf57cce04ad53ff12)

📚 Documentation

• Fixed typo in fonts scale in some configurations examples (#191).

🌚 Introducing Color Modes

Color modes makes it easy to change the color mode of your website, including support for dark and light modes. Color modes are enabled with the useColorModes flag and providing a map with the colors for each color mode in the colorModes field of your configuration:

import colors from "@siimple/colors";

export default {
    useColorModes: true,
    colors: {
        text: colors.gray["700"],
        background: "#fff",
        primary: colors.blue["500"],
        // ...other colors
    },
    colorModes: {
        dark: {
            text: "#fff",
            background: colors.gray["800"],
        },
        // ...other color modes
    },
    // ...other configuration
};

Color modes documentation: https://www.siimple.xyz/color-modes.

⚙️ Automatically generate variants modifiers

In 4.3.0 some elements will generate additional variant modifiers based in the mixins that you specify in your configuration. For example, buttons will generate one additional variant for each item defined in the buttons field of your configuration.

As an example, the following buttons configuration:

export default {
    buttons: {
        default: {
            color: "white",
        },
        outlined: {
            borderColor: "primary",
            borderStyle: "solid",
            borderWidth: "2px",
        },
        full: {
            textAlign: "center",
            width: "100%",
        },
    },
};

Will generate the following CSS:

.button {
    /* Default button styles plus defined in buttons.default */
}
.button.is-outlined {
    /* Styles defined in buttons.outlined */
}
.button.is-full {
    /* Styles defined in buttons.full */
}

Note that the default variant will will be automatically applied to the base element styles instead of generating an additional .is-default modifier.

✨ Build siimple directly in your browser (experimental)

We introduce a new way to build siimple directly from your browser without any additional setup, using our new @siimple/standalone package: just include the following script tag in your HTML file:

<script type="module" src="https://esm.sh/@siimple/standalone"></script>

And provide your siimple configuration in a <script type="text/siimple"> tag:

<script type="text/siimple">
    export default {
        // ...your configuration
    };
</script>

Read more about the @siimple/standalone package here: https://www.siimple.xyz/packages/standalone

🎨 New icons

We have added 55 new icons to siimple-icons: https://www.siimple.xyz/icons.

💅 New presets

We have added three new presets in 4.3.0:

• Dark: https://www.siimple.xyz/presets/dark.
• Noir: https://www.siimple.xyz/presets/noir.
• Mustard: https://www.siimple.xyz/presets/mustard.

♻️ Deprecations

• We have deprecated some elements and moved them to the markup module.
  • divider element: use <hr> instead.
  • paragraph element: use <p> instead.
  • table element: use <table> instead.
  • title element: use headings instead (<h1>, <h2>, ...).
• The PostCSS plugin in siimple/postcss.cjs has been deprecated: migrate to the new plugin in @siimple/postcss package.
• The @siimple/styled package has been renamed as @siimple/css.

🐛 Bug fixes

• Fixed minor bug applying mixins (f9ccc1f831cbe4e9ddb3359f9249ed5a4508b4ab).

📚 Documentation

• Improved mixins documentation (412bd3979ace170f592ecf94bc6b429390103d68).
• Fix feature request template (96685a2249cf87a921039b77ab7fbc288dea5f69).

🐛 Bug fixes

• Fixed missing selectors in checkbox element (bafbd7c78696cdc57b9c71c5ff92c1734f35df1f).

🚀 Improvements

• Allow providing a list of mixins to the apply rule (157dda846bc225d5280ea943531331b981d9f6a8).

🐛 Bug fixes

• Fixed important option in createHelper utility of @siimple/modules (ed768f900b02f6256f25c55b3455137d81645eb8).
• Fixed lead variant of paragraph element (17d23e2b99371f61da96210a4bb06528717eb8ca).

📚 Documentation

• Fixed typo in the documentation page of the text center helper (4189d6caf07c890f6d3b91756458e36733b42dfe).
• Added link to v3 documentation site in README (3f548a16989380ecd4d3f68af715f9c00fe2eca9).

🎉 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

🚀 New modules field

We have added a new modules field in the configuration to configure the core modules (elements, helpers, markup and reset) that will be added to the output CSS. Now you do not need to import core presets: all are included by default in siimple and can be configured using this new field.

You can exclude the modules that you do not need for your project by providing an object where the key is the module name and the value is false if you want to skip it:

export default {
    modules: {
        button: false,
        title: false,
        margin: false,
        reset: false,
    },
    // ...other configuration
};

You can include only some specific modules providing an array with the modules names to include:

export default {
    modules: ["button", "margin", "padding"],
    // ...other configuration
};

You can disable all modules providing an empty array or a false value:

export default {
    modules: [],
    // ...other configuration
};

Also, the @siimple/preset-elements, @siimple/preset-helpers, @siimple/preset-markup, and @siimple/preset-reboot packages have been deprecated and merged into a single @siimple/modules package.

🚀 New siimple-icons package

We have deprecated the @siimple/preset-icons package and added a standalone siimple-icons package with new and redesigned pure CSS icons. You can now include the CSS provided in this package for displaying icons in your website or application:

<i class="si-home" style="color:blue;font-size:23px"></i>

You can explore the new icons and check the installation and usage guides at https://www.siimple.xyz/icons.

📚 Documentation improvements

We have made some improvements in the documentation website:

• All documentation pages are now at https://www.siimple.xyz/docs.
• The playground tool has been moved to https://www.siimple.xyz/playground.

✨ Other improvements

• The @siimple/preset-theme package has been renamed as @siimple/preset-base (bdc0948).
• We have improved the structure of the website folder (#166).
• Some fixes in recipes (#163).

🚀 New features

• Add default 1px size value to all sizing and spacing helpers (9ad8fde9376d2b00ca8a603e004f7a14e3fbeeb9).

🐛 Bug fixes

• Fixed missing hover state in opacity helpers (d6b7f9486cb2811daf1ff978476a4035691a46d1).

🏡 Chore

• Fix workflow for publishing website on release (931d51aa0cf5168638f081c3f8169921002b3106).
• Update website dependencies (afaf53b58f675bd7f03cb6364d99f7e2b64924ee).

🐛 Bug fixes

• Fixed missing is-disabled modifier in button element (1473529b4a896dcaad5424ddf851a0499fe14b24).

📚 Documentation

• Minor website improvements (#161).
• Fixed a typo and add disabled button example (cbec397f05513ed9f55cfb6cbb8ee5124d1675a1).

🏡 Chore

• Fixed internal workflows for publishing packages (d9c2824f5b346c0658548553d60b3300803ae312).
• Moved all utilities for generating icons to @siimple/preset-icons/utils.js (e41bc3a8b199866799a791194ebb600700a6ed94).

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.

v3.3.1 (April 30, 2019)

Improvements

• Fixed table border size (reported on issue #64)
• Minor improvements on button element. Added default button color.
• Minor improvements on menu component.
• Minor improvements on card component.

v3.3.0 (January 24, 2019)

New features

• Added siimple-table--fixed modifier to table component to automatically divide equally the width of the columns across the table.
• Added table column modifier to display a sorting indicator in the table header.
• Added big button modifier.
• Added siimple-btn-group class to wrap a collection of buttons.
• Added siimple-paragraph--lead modifier to highlight a paragraph.
• Added miscellanea helpers.

Changes and improvements

• Changed default font-family to Roboto.
• Changed default font-size to 16px.
• Changed default line-height to 24px.
• Changed default background color of the input, select and textarea form elements.

Bug fixes

• Fixed bug on switch element: only changes to checked/unchecked state if user clicks on the circle button, not in the background of the switch.
• Fixed bug in grid row: removed extra 10px padding added at the left side and the right side of the grid.

v3.2.1 (January 9, 2019)

Improvements

• Added !important flag to all colors and spacing helpers.
• Changed siimple-navbar-item padding attribute to 10px instead of 15px.

Bug fixes

• Fixed missing px in padding-left attribute of siimple-navbar-item (thanks to @VictorVSa in #53).

v3.2.0 (December 15, 2018)

New features

• Added new experimental components: modal, steps and progress.
• Added spacing helpers.
• Added siimple-alert-close class-name to display a close icon in the alert component.
• Added new footer elements (siimple-footer-title, siimple-footer-subtitle, siimple-footer-link, siimple-footer-group and siimple-footer-rule).
• Added table sizes (thanks to @yoshikawaa in #51).
• Added checkbox, switch and radio color modifier (thanks to @0x92 in #36).
• Added small button modifier (thanks to @HDVinnie in #41).

Changes and improvements

• Redesigned table component.
• Updated some navbar styles.
• Disabled textarea horizontal resize.
• Deprecate siimple-close element.

Bug fixes

• Fixed some typos in README and documentation.

v3.1.1 (August 4, 2018)

Improvements

• Import semi-bold style of Montserrat font.
• Changed headings font-weight to semi-bold.
• Changed success base color.
• Changed blockquote padding-top and padding-bottom values.
• Now we are using our custom Jekyll theme for the documentation.

Bug fixes

• Fixed bug when list-item is a link.
• Fixed input size too wide when the siimple-input--fluid modifier is used (thanks to @andreashouben in #45).
• Fixed typo in README (thanks to @jdriviere in #46).

v3.1.0 (June 24, 2018)

New features

• Added card and list components.
• Added rule element (thanks to @BerkhanBerkdemir on #33 )
• Added color, display, float, sizing and text helpers.
• Introduced a new and simplified colors API. Moved old colors to legacy colors.
• Added the extra-small size to the layout size modifiers and to the grid responsive breakpoints.
• Added modifier to hide a grid column at specific breakpoint.
• Added fluid button style.
• Added rounded tag style.
• Added radio button for forms.
• Added navbar subtitle style.
• Added alert title style.
• Added menu selected item style.

Changes

• Renamed siimple-form-field class to siimple-field.
• Changed the size values of the layout size modifiers.
• Changed the grid responsive breakpoints values.
• Renamed siimple-tabs-tab class to siimple-tabs-item.
• Renamed siimple-breadcrumb-crumb class to siimple-breadcrumb-item.
• Renamed siimple-navbar-link class to siimple-navbar-item.

Internal changes

• Added a new group called components. Moved alert, breadcrumb, menu, table and tabs to the new group.

Bugs

• Fixed bug with the grid breakpoints format.
• Fixed bug with the switch element in some browsers (thanks to @alextjd and @chaitanyanettem on #23 )

CSS and SCSS

• Added layout.
• Added table, tip, spinner and close elements.
• Added grid sizes.
• Added tag.
• Added main form, form field and switch.

Internal changes

• New SCSS files organisation: grouped in typography, elements, layout, form and grid.
• Changed build method.

• Added support for btn styles on button elements (Thanks to @timojarv, PR #17 )

Updates on February 12, 2017:

• New simple redesign.
• Added colors.
• Added checkbox element.

Updates on September 23, 2016:

• Added autoprefixer for IE9+ and other browsers.
• Fixed some SCSS.
• CSS is now passing validation.

Thanks @dyzajash! (Pull request #11 )