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