Never Pay your Mortgage

    @unistylus/core

    0.0.11 • Public • Published

    Unistylus

    An SCSS/CSS theming system.

    What is this?

    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.

    Install and usage

    SCSS

    • 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';

    CDN

    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">

    Tutorials

    Terminology

    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 new skins

    Add this to the global style file (ex.: styles.scss for Angular apps):

    [data-theme=name] {
      // add properties here
    }

    Apply app skins

    Apply skin in runtime:

    document.body.setAttribute('data-theme', 'name');

    Use icons

    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:

    To access buit-in icon url, use the variable $[icon_pack]_icons:

    @import '@unistylus/core';
    
    $light_theme_icons: (
      menu: '#{$bootstrap_icons}/light/list.svg'
    );

    Customization

    Level 1

    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
    }

    Level 2

    To customize a soul, override its CSS:

    @import 'path/to/a/soul';
    
    .button {
      // override anything
    }

    Level 3

    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';

    Custom properties

    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),
      )
    );

    Mixins

    See the list of mixins.

    License

    @unistylus/core is released under the MIT license.

    Install

    npm i @unistylus/core

    DownloadsWeekly Downloads

    2

    Version

    0.0.11

    License

    MIT

    Unpacked Size

    16.4 kB

    Total Files

    13

    Last publish

    Collaborators

    • lamnhan