Components

This starter is delivering with ready-to-use utils, styled components, helpers and much more. Some majors of these are described in this section.

Grow and auto width columns controlled with .fill class

Equal-width columns defined in .row with .cols-{breakpoint}-{size} syntax

Control column width in each .col with .col-{breakpoint}-{size} syntax

Offset columns with .offset-{breakpoint}-{size} syntax

Gaps controlled with .gap-{breakpoint} for XY axes, .gap-{breakpoint}-x for X axis or .gap-{breakpoint}-y for Y axis syntax defined in .row class

There are a bunch of different css helper classes such as .d-flex, .mt-4, .bg-primary, .color-error etc.

Full list you can view in @/src/sass/partial/helper.scss file.

Default table

Table with .table_striped and .table_sm class

Table with .table_borderless and .table_sm class

Controls with data-toast, data-toast-type and data-toast-duration attributes.

If the data-toast is empty then toast text will be equal event.target.textContent .

Example with custom text, primary type and 10s duration.

Controls with data-copy attribute.

If the data-copy is empty then text to copy will be equal event.target.textContent .

Also you can combine data attributes and set data-toast to notify user.