@themecraftstudio/stylish
v0.5.0
Published
Stylish ===========================
Downloads
17
Readme
Stylish
Modular and minimalist SCSS toolkit empowering vanilla CSS development.
Usage
Configure your package manager to use GitHub's npm registry, then @use
the module as you normally would:
@use './path/to/node_modules/@themecraftstudio/stylish' as util;
or
@use './path/to/node_modules/@themecraftstudio/stylish/reset';
@use './path/to/node_modules/@themecraftstudio/stylish/device';
You'll likely want to include classes and rules defined by this module in your above-the-fold stylesheets.
Colors
Define your color palette as variables in a module:
// ui/_colors.scss
$red: #d6001c;
$brown: #3a2c24;
Then pass them to stylish/colors
as such:
// main.scss
@use 'ui/colors' as colors;
@use 'sass:meta';
@use './path/to/node_modules/@themecraftstudio/stylish/colors' as color-helper with (
$colors: meta.module-variables('colors'),
);
@include color-helper.classes;
@include color-helper.rules;
The classes
mixin generates color classes using the pattern color-<name>
,
whereas the rules
mixin adds CSS custom properties named --color-<name>
to the document element (html
).
This allows you to override these custom properties through the higher specificity :root
pseudo-class.
Reset
@use './path/to/node_modules/@themecraftstudio/stylish/reset';
@include reset.styles;
Device
TODO document mixins, functions, variables
Debug
All debug mixins are gated by the isWip
function that must be defined through the Javascript API. For instance:
const sass = require('sass');
sass.compile('front.scss', {
functions: {
isWip: () => {
return process.env.WIP ?
dartSass.types.Boolean.TRUE :
dartSass.types.Boolean.FALSE
;
}
}
});
Design philosophy
- minimalistic: does not define any visual or typographic style
- modularity: authors shall be allowed to include only the rules they need;
- mixins do not define any classes;
- semantic classes must be explicitly included via *-classes mixins.