Minimal base elements.

Some basic elements that you will need to build your website or your app.

Button

Basic button variations and states

Pagination

Bulma pagination styles and variations

Progress

Bulma progress bar styles and variations

64% 64% 64% 64% 15%

Tag

Bulma tag and badges styles

Education Economy History Philosophy
Education Economy History Philosophy
Education Economy History Philosophy

Avatar

Avatar images size examples

Avatar
Avatar
Avatar
Avatar
Avatar
Avatar

Helpers

Class helpers shipped with Minimal

Class Values Description

.text-*

white, primary, light, muted, medium Sets the target element's color to the specified value

.bg-*

white, primary, light, muted, medium Sets the target element's background color to the specified value

.border-*

white, primary, light, muted, medium Sets the target element's border color (2px width) to the specified value

.opacity-*

5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100 Sets the target element's opacity to the specified value

.p-*

0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 Sets the target element's padding to the specified value (see _utilities.scss)

.px-*

0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 Sets the target element's horizontal padding to the specified value (see _utilities.scss)

.py-*

0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 Sets the target element's vertical padding to the specified value (see _utilities.scss)

.pt-*

0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 Sets the target element's top padding to the specified value (see _utilities.scss)

.pb-*

0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 Sets the target element's bottom padding to the specified value (see _utilities.scss)

.pl-*

0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 Sets the target element's left padding to the specified value (see _utilities.scss)

.pr-*

0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 Sets the target element's right padding to the specified value (see _utilities.scss)

.m-*

0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 Sets the target element's margin to the specified value (accepts negative values: -m-*)

.mx-*

0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 Sets the target element's horizontal margin to the specified value (accepts negative values: -m-*)

.my-*

0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 Sets the target element's vertical margin to the specified value (accepts negative values: -m-*)

.mt-*

0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 Sets the target element's top margin to the specified value (accepts negative values: -m-*)

.mb-*

0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 Sets the target element's bottom margin to the specified value (accepts negative values: -m-*)

.ml-*

0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 Sets the target element's left margin to the specified value (accepts negative values: -m-*)

.mr-*

0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64 Sets the target element's right margin to the specified value (accepts negative values: -m-*)

.max-w-*

1, 2, 3, 4, 5, 6, 7, 8, 9, full Sets the target element's max-width to the specified value

.size-*x*

24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 70, 80, 90, 100, 110, 120, 130, 140, 150, 175, 200 Sets the target element's height and width to the specified value

.text-*

uppercase, capitalize, italic Sets the target element's font style to the specified value

.is-weight-*

300, 400, 500, 600, 700, 800, 900 Sets the target element's font weight to the specified value

.rem-*

70, 75, 80, 85, 90, 95, 100, 115, 125, 150, 175, 200, 225, 250, 275, 300 Sets the target element's font size (in rem) to the specified value

On-Demand

You need to customise this template or you need a brand new design? Hit us.

Need Support?

You an issue or simply want to ask a question? Feel free to open a ticket.