Releases: jmjuanes/siimple
v4.3.1 (2022-10-12)
v4.3.0 (2022-09-18)
🌚 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.
dividerelement: use<hr>instead.paragraphelement: use<p>instead.tableelement: use<table>instead.titleelement: use headings instead (<h1>,<h2>, ...).
- The PostCSS plugin in
siimple/postcss.cjshas been deprecated: migrate to the new plugin in@siimple/postcsspackage. - The
@siimple/styledpackage has been renamed as@siimple/css.
v4.2.3
v4.2.2
v4.2.1
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
v4.1.0
🚀 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
v4.0.2
v4.0.1
v4.0.0
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.