@miraidesigns/base

Mirai Designs Framework: Base module

Usage no npm install needed!

<script type="module">
  import miraidesignsBase from 'https://cdn.skypack.dev/@miraidesigns/base';
</script>

README

Base

Base serves as the core foundation for a lot of the components, both in Sass and TypeScript.


Sass

Base includes a CSS reset we load first to create a standardized look for our apps and websites.

// Apply the CSS reset.
@forward '@miraidesigns/base/styles';

// Make use of the Base model with all its components.
@use '@miraidesigns/base';

Prefix

The prefix variable is generally applied to every given class for consistency sake.

.#{base.$prefix}-class__name {
    color: #fff;
}

Breakpoints

To serve content appropriately to a variety of devices, we use breakpoints (media queries) to set rules for various display dimensions.

Media queries are stored in the $breakpoints map and are called through the mixin of the same name.

.#{base.$prefix}-class__name {
    color: #fff;

    @include base.breakpoint('tablet-landscape') {
        color: #000;
    }
}

Layers

Layers are indicator for the elevation and/or importance of a given element.

All layers are stored inside the $layers map and are called through the mixin and function of the same name.

.#{base.$prefix}-class__name {
    // Using the mixin.
    @include base.layer('sidebar');

    // OR through the function.
    z-index: base.layer('sidebar');
}

TypeScript

Prototypes

For ease of access and readability we use prototypes to extend the functions of native JS objects.

Element

Function Type Description
.addClass(...classes) (string[]): void Add a class or a set of classes
.removeClass(...classes) (string[]): void Remove a class or a set of classes
.removeClassByPrefix(prefix) (string): void Remove a class with a specific prefix
.toggleClass(className, condition?) (string, any): void Toggle the given class on the Element, optionally based on a condition
.replaceClass(oldClass, newClass) (string, string): void Replace one class with another
.hasClass(className) (string): boolean Returns wether or not the Element has the given class
.show() (): void Remove the mdf-hidden class to show the Element
.hide() (): void Adds the mdf-hidden class to hide the Element

String

Function Type Description
.truncate(limit) (number): string Stop the String from exceeding the set length and adds ellipses at the end

A quick example on how to use the prototypes.

// Simply importing the base module is enough
import '@miraidesigns/base';

// We get the element we want to manipulate
const elem = document.querySelector('.example');

// Aaaand we added a class. It's just that easy
elem.addClass('class-name');