Maskow Labs Logo Livewire Components

Helper Classes

The helper classes are a set of methods that can be used to simplify the design process.

Bootstrap Grid

The grid system is based on a 12-column layout. You can use the col-* classes to define the width of the columns.

Visit https://getbootstrap.com/docs/4.0/layout/grid/ for more informations.

Col-4
Col-6
Col-2
Col-8
Col-3
1<div class="container">
2    <div class="row g-2">
3        <div class="col-4 order-last"><div>Col-4</div></div>
4        <div class="col-6"><div>Col-6</div></div>
5        <div class="col-2"><div>Col-2</div></div>
6        <div class="col-8"><div>Col-8</div></div>
7        <div class="col-4 order-first"><div>Col-3</div></div>
8    </div>
9</div>

Display

The display classes can be used to change the display property of an element. Use responsive classes to change the display property on different screen sizes. (e. G. .d-sm-none, .d-md-block)

.d-inline
.d-inline-block
.d-block
.d-grid
.d-inline-grid
.d-flex
.d-inline-flex
.d-none
1<div class="d-inline">.d-inline</div>
2<div class="d-inline-block">.d-inline-block</div>
3<div class="d-block">.d-block</div>
4<div class="d-grid">.d-grid</div>
5<div class="d-inline-grid">.d-inline-grid</div>
6<div class="d-flex">.d-flex</div>
7<div class="d-inline-flex">.d-inline-flex</div>
8<div class="d-none">.d-none</div>

Flex

The flex classes can be used to change the flex property of an element. Use responsive classes to change the flex property on different screen sizes. (e. G. .flex-sm-row, .flex-md-column)

Fill
Row
Column
Row-Reverse
Column-Reverse
Grow-0
Grow-1
Shrink-0
Shrink-1
Wrap
Nowrap
Wrap-Reverse
 1<div class="flex-fill">Fill</div>
 2<div class="flex-row">Row</div>
 3<div class="flex-column">Column</div>
 4<div class="flex-row-reverse">Row-Reverse</div>
 5<div class="flex-column-reverse">Column-Reverse</div>
 6<div class="flex-grow-0">Grow-0</div>
 7<div class="flex-grow-1">Grow-1</div>
 8<div class="flex-shrink-0">Shrink-0</div>
 9<div class="flex-shrink-1">Shrink-1</div>
10<div class="flex-wrap">Wrap</div>
11<div class="flex-nowrap">Nowrap</div>
12<div class="flex-wrap-reverse">Wrap-Reverse</div>

Justify Content

The justify content classes can be used to change the justify-content property of an element. Use responsive classes to change the justify-content property on different screen sizes. (e. G. .justify-content-sm-start, .justify-content-md-end)

Start
End
Center
Between
Around
Evenly
1<div class="justify-content-start">Start</div>
2<div class="justify-content-end">End</div>
3<div class="justify-content-center">Center</div>
4<div class="justify-content-between">Between</div>
5<div class="justify-content-around">Around</div>
6<div class="justify-content-evenly">Evenly</div>

Align Items

The align items classes can be used to change the align-items property of an element. Use responsive classes to change the align-items property on different screen sizes. (e. G. .align-items-sm-start, .align-items-md-end)

Items Start
Items End
Items Center
Items Baseline
Items Stretch
Content Start
Content End
Content Center
Content Between
Content Around
Content Stretch
Self Auto
Self Start
Self End
Self Center
Self Baseline
Self Stretch
 1<div class="align-items-start">Items Start</div>
 2<div class="align-items-end">Items End</div>
 3<div class="align-items-center">Items Center</div>
 4<div class="align-items-baseline">Items Baseline</div>
 5<div class="align-items-stretch">Items Stretch</div>
 6 
 7<div class="align-content-start">Content Start</div>
 8<div class="align-content-end">Content End</div>
 9<div class="align-content-center">Content Center</div>
10<div class="align-content-between">Content Between</div>
11<div class="align-content-around">Content Around</div>
12<div class="align-content-stretch">Content Stretch</div>
13 
14<div class="align-self-auto">Self Auto</div>
15<div class="align-self-start">Self Start</div>
16<div class="align-self-end">Self End</div>
17<div class="align-self-center">Self Center</div>
18<div class="align-self-baseline">Self Baseline</div>
19<div class="align-self-stretch">Self Stretch</div>

Opacity

The opacity classes can be used to change the opacity of an element.

Opacity 0
Opacity 25
Opacity 50
Opacity 75
Opacity 100
1<div class="opacity-0">Opacity 0</div>
2<div class="opacity-25">Opacity 25</div>
3<div class="opacity-50">Opacity 50</div>
4<div class="opacity-75">Opacity 75</div>
5<div class="opacity-100">Opacity 100</div>

Sensitive Information

Use the .sensitive class to mark sensitive information. The text will be blurred by default. Hover over the text or focus the element to reveal the content.

You can also use the sensitive attribute on <x-input> and <x-textarea> components.

You are awesome.
1<div class="sensitive">You are awesome.</div>
2<x-input sensitive value="MySuperSecretKey" />

Width

The width classes can be used to change the width of an element.

10%
20%
25%
30%
33.33%
40%
50%
60%
66.66%
70%
75%
80%
90%
100%
 1<div class="d-flex flex-wrap gap-2">
 2    <div class="w-10"><div>10%</div></div>
 3    <div class="w-20"><div>20%</div></div>
 4    <div class="w-25"><div>25%</div></div>
 5    <div class="w-30"><div>30%</div></div>
 6    <div class="w-33"><div>33.33%</div></div>
 7    <div class="w-40"><div>40%</div></div>
 8    <div class="w-50"><div>50%</div></div>
 9    <div class="w-60"><div>60%</div></div>
10    <div class="w-66"><div>66.66%</div></div>
11    <div class="w-70"><div>70%</div></div>
12    <div class="w-75"><div>75%</div></div>
13    <div class="w-80"><div>80%</div></div>
14    <div class="w-90"><div>90%</div></div>
15    <div class="w-100"><div>100%</div></div>
16</div>

Spacing

The spacing classes can be used to add margin, padding and gap to an element. Margin and padding can be added to all sides or to specific sides. Gap can be added to flex containers. Spacing classes can have a value from 0 to 5 or auto.

  • Padding: .p-*, .pt-*, .pe-*, .pb-*, .ps-*, .px-*, .py-*.
  • Margin: .m-*, .mt-*, .me-*, .mb-*, .ms-*, .mx-*, .my-*.
  • Gap: .gap-*.
Padding 1
Padding 2
Margin 1
Margin 2
Gap 1
Gap 2
 1<div class="d-flex">
 2    <div class="px-4 py-2">Padding 1</div>
 3    <div class="py-2 pe-4">Padding 2</div>
 4</div>
 5<div class="w-100"></div>
 6<div class="d-flex">
 7    <div class="me-5">Margin 1</div>
 8    <div class="ms-1">Margin 2</div>
 9</div>
10<div class="w-100"></div>
11<div class="d-flex gap-4">
12    <div>Gap 1</div>
13    <div>Gap 2</div>
14</div>

Radius

The radius classes can be used to add border-radius to an element. 

1<div class="radius-0"></div>
2<div class="radius-1"></div>
3<div class="radius-2"></div>
4<div class="radius-3"></div>
5<div class="radius-4"></div>
6<div class="radius-5"></div>
7<div class="radius-circle"></div>

Colors

The color classes can be used to change the text color, background color and border color of an element. We use the tailwindcss color palette - https://tailwindcss.com/docs/customizing-colors.

  • Shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 and 950.
  • Helper Classes: .text-<color>-<shade>, .bg-<color>-<shade>, .border-<color>-<shade>.
  • CSS Variables: color: var(--color-primary-500).
  • SCSS Variables: $color-primary-500.
Primary
Slate
Gray
Zinc
Neutral
Stone
Red
Orange
Amber
Yellow
Lime
Green
Emerald
Teal
Cyan
Sky
Blue
Indigo
Violet
Purple
Fuchsia
Pink
Rose
 1<div class="bg-primary-400">Primary</div>
 2<div class="bg-slate-400">Slate</div>
 3<div class="bg-gray-400">Gray</div>
 4<div class="bg-zinc-400">Zinc</div>
 5<div class="bg-neutral-400">Neutral</div>
 6<div class="bg-stone-400">Stone</div>
 7<div class="bg-red-400">Red</div>
 8<div class="bg-orange-400">Orange</div>
 9<div class="bg-amber-400">Amber</div>
10<div class="bg-yellow-400">Yellow</div>
11<div class="bg-lime-400">Lime</div>
12<div class="bg-green-400">Green</div>
13<div class="bg-emerald-400">Emerald</div>
14<div class="bg-teal-400">Teal</div>
15<div class="bg-cyan-400">Cyan</div>
16<div class="bg-sky-400">Sky</div>
17<div class="bg-blue-400">Blue</div>
18<div class="bg-indigo-400">Indigo</div>
19<div class="bg-violet-400">Violet</div>
20<div class="bg-purple-400">Purple</div>
21<div class="bg-fuchsia-400">Fuchsia</div>
22<div class="bg-pink-400">Pink</div>
23<div class="bg-rose-400">Rose</div>

Font

The font classes can be used to change the font size, font weight and text alignment of an element.

Font-Size

Extra Small
Small
Base
Medium
Large
Extra Large
Exxtra Large

Font-Weight

Regular
Medium
Bold

Letter Spacing

-Large
-Medium
-Small
Base
+Small
+Medium
+Large
 1<h3 class="w-100">Font-Size</h3>
 2<div class="d-flex gap-3 align-items-center w-100">
 3    <div class="fs-xs">Extra Small</div>
 4    <div class="fs-sm">Small</div>
 5    <div class="fs-base">Base</div>
 6    <div class="fs-md">Medium</div>
 7    <div class="fs-lg">Large</div>
 8    <div class="fs-xl">Extra Large</div>
 9    <div class="fs-xxl">Exxtra Large</div>
10</div>
11<hr>
12<h3 class="w-100">Font-Weight</h3>
13<div class="d-flex gap-3 align-items-center w-100">
14    <div class="fw-regular">Regular</div>
15    <div class="fw-medium">Medium</div>
16    <div class="fw-bold">Bold</div>
17</div>
18<hr>
19<h3 class="w-100">Letter Spacing</h3>
20<div class="d-flex gap-3 align-items-center w-100">
21    <div class="ls--lg">-Large</div>
22    <div class="ls--md">-Medium</div>
23    <div class="ls--sm">-Small</div>
24    <div class="ls-base">Base</div>
25    <div class="ls-sm">+Small</div>
26    <div class="ls-md">+Medium</div>
27    <div class="ls-lg">+Large</div>
28</div>