The minimal and themeable CSS toolkit for flat and clean designs
MIT License
Bot releases are hidden (Show)
"exports"
entry to package.json
in all packages (b29bf44b90f674802f7f4fbdf57cce04ad53ff12)fonts
scale in some configurations examples (#191).Published by jmjuanes about 2 years ago
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.
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.
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
We have added 55 new icons to siimple-icons
: https://www.siimple.xyz/icons.
We have added three new presets in 4.3.0
:
divider
element: use <hr>
instead.paragraph
element: use <p>
instead.table
element: use <table>
instead.title
element: use headings instead (<h1>
, <h2>
, ...).siimple/postcss.cjs
has been deprecated: migrate to the new plugin in @siimple/postcss
package.@siimple/styled
package has been renamed as @siimple/css
.Published by jmjuanes about 2 years ago
Published by jmjuanes about 2 years ago
Published by jmjuanes about 2 years ago
apply
rule (157dda846bc225d5280ea943531331b981d9f6a8).important
option in createHelper
utility of @siimple/modules
(ed768f900b02f6256f25c55b3455137d81645eb8).Published by jmjuanes about 2 years ago
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
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
],
};
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.
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
We have moved all recipes to a new Examples section: https://www.siimple.xyz/examples
Published by jmjuanes over 2 years ago
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.
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.
We have made some improvements in the documentation website:
@siimple/preset-theme
package has been renamed as @siimple/preset-base
(bdc0948).website
folder (#166).Published by jmjuanes over 2 years ago
1px
size value to all sizing and spacing helpers (9ad8fde9376d2b00ca8a603e004f7a14e3fbeeb9).Published by jmjuanes over 2 years ago
is-disabled
modifier in button element (1473529b4a896dcaad5424ddf851a0499fe14b24).@siimple/preset-icons/utils.js
(e41bc3a8b199866799a791194ebb600700a6ed94).Published by jmjuanes over 2 years ago
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.
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.
The new version of siimple is based in a set of configuration rules written in JavaScript where you can define:
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.
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.
We have redesigned our documentation site with a new fresh and minimalistic style. Visit https://www.siimple.xyz.
You can try siimple in your browser using our new online editor. This online editor allows you to:
Some tips for getting started with the new version of siimple:
siimple-table--fixed
modifier to table component to automatically divide equally the width of the columns across the table.siimple-btn-group
class to wrap a collection of buttons.siimple-paragraph--lead
modifier to highlight a paragraph.font-family
to Roboto.font-size
to 16px
.line-height
to 24px
.10px
padding added at the left side and the right side of the grid.!important
flag to all colors and spacing helpers.siimple-navbar-item
padding attribute to 10px
instead of 15px
.px
in padding-left
attribute of siimple-navbar-item
(thanks to @VictorVSa in #53).modal
, steps
and progress
.siimple-alert-close
class-name to display a close icon in the alert component.siimple-footer-title
, siimple-footer-subtitle
, siimple-footer-link
, siimple-footer-group
and siimple-footer-rule
).siimple-close
element.font-weight
to semi-bold.padding-top
and padding-bottom
values.siimple-input--fluid
modifier is used (thanks to @andreashouben in #45).card
and list
components.rule
element (thanks to @BerkhanBerkdemir on #33 )extra-small
size to the layout size modifiers and to the grid responsive breakpoints.siimple-form-field
class to siimple-field
.siimple-tabs-tab
class to siimple-tabs-item
.siimple-breadcrumb-crumb
class to siimple-breadcrumb-item
.siimple-navbar-link
class to siimple-navbar-item
.components
. Moved alert
, breadcrumb
, menu
, table
and tabs
to the new group.