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