An SCSS/CSS theming system.
This is just another UI framework that nobody want to use, but me, or isn't it?
It is an effort of unifying the web UI development experience:
- 💚 Just standard HTML, CSS/SCSS & JS (when needed).
- 🌓 Supports multiple skins in app runtime.
- 👌 No icon fonts; only register whatever icons you ever need.
- ⚡ Imports just the parts you want.
- 🔨 Customize to the bone, at microscopic level.
- 🔌 Replacement (-ish) for other frameworks.
- 😍 A member of the Lam Nhan Ecosystem.
- Step 1: Install the core
npm i @unistylus/core
- Step 2: Install a collection (see list)
npm i @unistylus/boostrap
- Step 3: Create a file in
src/unistylus.scss
@import '@unistylus/bootstrap/skins/light-default';
@import '@unistylus/bootstrap/reset';
@import '@unistylus/bootstrap/core';
@import '@unistylus/bootstrap/content/typography';
@import '@unistylus/bootstrap/components/button';
- Step 4 (OPTIONAL): To use minxins
@import '@unistylus/core';
Includes in your HTML:
<link rel="stylesheet" href="https://unpkg.com/@unistylus/bootstrap-css@latest/skins/light-default.min.css">
<link rel="stylesheet" href="https://unpkg.com/@unistylus/bootstrap-css@latest/reset.min.css">
<link rel="stylesheet" href="https://unpkg.com/@unistylus/bootstrap-css@latest/core.min.css">
<link rel="stylesheet" href="https://unpkg.com/@unistylus/bootstrap-css@latest/content/typography.min.css">
<link rel="stylesheet" href="https://unpkg.com/@unistylus/bootstrap-css@latest/components/button.min.css">
In the context of the Unistylus framework, these terms have their special meaning.
SKIN
: a look of a UI (colors, sizes, fonts, ...)SOUL
: a feel of a UI (Bootstrap, Material, ...)THEME
: a combination of a SKIN (a look) or multiple skins + a SOUL (a feel)
Add this to the global style file (ex.: styles.scss for Angular apps):
[data-theme=name] {
// add properties here
}
Apply skin in runtime:
document.body.setAttribute('data-theme', 'name');
Register icons globally, see styles.scss for example:
@import '@unistylus/core';
$icons: (
menu: ('bootstrap', 'list', 'latest'),
github: ('bootstrap', 'github', 'latest')
);
@include register_icons($icon);
To use registered icons, in component .html
:
<i class="icon icon-menu"></i>
There are also built-in icon packs:
- Bootstrap: @unistylus/bootstrap-icons
- Material: @unistylus/material-icons
- Fluent: @unistylus/fluent-icons
To access buit-in icon url, use the variable $[icon_pack]_icons
:
@import '@unistylus/core';
$light_theme_icons: (
menu: '#{$bootstrap_icons}/light/list.svg'
);
To customize a skin (see styles.scss for example). Place this under the skin imports:
@import 'path/to/a/skin';
[data-theme=name] {
// place properties here
}
To customize a soul, override its CSS:
@import 'path/to/a/soul';
.button {
// override anything
}
Provide you own skin and soul, overall its just HTML & CSS, so you can do whatever you want.
@import 'path/to/your/own/skin';
@import 'path/to/your/own/soul';
To add your own properties:
@import '@unistylus/core';
$shared_properties: ();
$light_theme_properties: (
foo: 'Foo',
bar: 'Bar',
);
$dark_theme_properties: (
foo: 'Foo',
bar: 'Bar',
);
@include register_theme_properties(
(
light: $light_theme_properties,
dark: $dark_theme_properties,
default: merge-map($shared_properties, $light_theme_properties),
)
);
See the list of mixins.
@unistylus/core is released under the MIT license.