1.2.2 • Published 4 years ago

@miraidesigns/base v1.2.2

Weekly downloads
-
License
ISC
Repository
github
Last release
4 years ago

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

FunctionTypeDescription
.addClass(...classes)(string[]): voidAdd a class or a set of classes
.removeClass(...classes)(string[]): voidRemove a class or a set of classes
.removeClassByPrefix(prefix)(string): voidRemove a class with a specific prefix
.toggleClass(className, condition?)(string, any): voidToggle the given class on the Element, optionally based on a condition
.replaceClass(oldClass, newClass)(string, string): voidReplace one class with another
.hasClass(className)(string): booleanReturns wether or not the Element has the given class
.show()(): voidRemove the mdf-hidden class to show the Element
.hide()(): voidAdds the mdf-hidden class to hide the Element

String

FunctionTypeDescription
.truncate(limit)(number): stringStop 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');