Releases: jmjuanes/siimple
v4.4.0
What's Changed
- ci: fix versions in all workflows by @jmjuanes in #206
- chore: change documentation site url by @jmjuanes in #207
- feat(modules): add gap helpers by @jmjuanes in #208
- chore: add release script and reset versions in all package.json files by @jmjuanes in #209
- ci: add release step and rename publish workflow to release by @jmjuanes in #210
- ci: add publish-packages script by @jmjuanes in #211
Full Changelog: v4.3.1...v4.4.0
Contributors
Assets 2
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.