Utility classes

Instructions

Below are the utility classes in the _bl-utility.scss scss file. These are to help build apps without the overloaded usage from systems like tailwind, etc.

Use these by inserting them in the components or elements you need to tweak.

Note: These are for small tweaks. Complex layout needs should be contained in a component's own scss file. Use your best judgment.

Usage example

<div class='flex flex-column p1>
    My content here
</div>

Full list


// Layout options
.flex {
    display: flex !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-row {
    flex-direction: row !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-gap {
    gap: 1rem !important;
}

.align-self-right {
    align-self: flex-end !important;
}

.align-self-left {
    align-self: flex-start !important;
}

.justify-self-start {
    justify-self: flex-start !important;
}

.justify-self-end {
    justify-self: flex-end !important;
}

.align-baseline {
    align-items: baseline !important;
}

.align-center {
    align-items: center !important;
}

.justify-start {
    justify-content: start !important;
}

.justify-end {
    justify-content: end !important;
}

.block {
    display: block !important;
}

.inline-block {
    display: inline-block !important;
}

.inline {
    display: inline !important;
}

.w100 {
    width: 100vw !important;
}

.w100p {
    width: 100% !important;
}

.h100 {
    height: 100vh !important;
}


// Element adjustments
.p0 {
    padding: 0 !important;
}

.p1 {
    padding: 1rem !important;
}

.pt0 {
    padding-top: 0rem !important;
}

.pr0 {
    padding-right: 0rem !important;
}

.pb0 {
    padding-bottom: 0rem !important;
}

.pl0 {
    padding-left: 0rem !important;
}

.pt1 {
    padding-top: 1rem !important;
}

.pr1 {
    padding-right: 1rem !important;
}

.pb1 {
    padding-bottom: 1rem !important;
}

.pl1 {
    padding-left: 1rem !important;
}

.m0 {
    margin: 0 !important;
}

.m1 {
    margin: 1rem !important;
}

.mt1 {
    margin-top: 1rem !important;
}

.mr1 {
    margin-right: 1rem !important;
}

.mb1 {
    margin-bottom: 1rem !important;
}

.ml1 {
    margin-left: 1rem !important;
}