Grid

Normal flexbox grids have no spacings integrated, the spacing must exist at the child, here this is faked for the grey background.

flex flex-wrap classes for the wrapper
col-1, col-2, col-3 till 12 (or otherwise configured) for column sizing
col-sm-1, col-md-1, col-lg-1, col-xl-1 for responsive column classes in bootstrap naming style
sm-col-1, md-col-1, lg-col-1, xl-col-1 for responsive column classes in Basscss naming style

Nested Grid / Grid with Spacings

Nested grids have the spacings integrated, they currently use $spacing-def: 1, 0.5, 2 and 3. The spacing is applied to direct children which have a class that begins with col-. Blue background cells are second level, grey first level.

Classes for wrapper:

flex flex-wrap grid-s05
flex flex-wrap grid-s1
flex flex-wrap grid-s2
flex flex-wrap grid-s3

Grid Offset

Container

xl

lg

md

sm

Buttons

standard size, normal vs. elevations:

Click Click Click Click Click Click

small size, normal vs. elevations:

Click Click Click Click Click Click

works also with a tags:

Click Click Click Click Click Click Click Click Click

filled with .btn-<semantic>:

outlined colors with .btn-<semantic>-o:

only text with .btn-text / .btn-<semantic>-text:

sizes .btn-sm, .btn, .btn-lg, normal vs. .btn-round:

Click Click Click Click Click Click

icons with .btn.btn-ic, supporting all semantics:

button groups with .btn-group on the parent:

button reset .btn-raw for easy custom buttons:

Typography

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5

Headline 6

Subtitle 1

Subtitle 2

Lorem 1 ipsum dolor sit amet.

Lorem 2 ipsum dolor sit amet.

Bold

Regular

Italic

Caps

Left align

Center

Right align

Justify Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.

No wrap

Underline

Truncate

Font Family Inherit

Font Size Inherit

Text Decoration None

List Item 1
List Item 2

List Reset
Removes bullets
Removes numbers
Removes padding

Half-Smoke
Kielbasa
Bologna
Prosciutto

Colored Text .color-primary

Colored Text .color-secondary

Colored Text .color-success

Colored Text .color-info

Colored Text .color-warning

Colored Text .color-danger

Colored Text .color-light

Colored Text .color-strong

Spacings

m* for margin, p* for padding, support of responsive gutters with e.g. -sm, -md, ... and multiple affected sides.

mx*, px* = margins and paddings on x-axis
my*, py* = margins and paddings on y-axis
mt*, pt* = margins and paddings on top side
mr*, pr* = margins and paddings on right side
mb*, pb* = margins and paddings on bottom side
ml*, pl* = margins and paddings on left side
mxa, mla, mra = margin auto on different sides
ml0, ml05, ml1, ml2, ml3, ml4, ml5 = margin-left for all configured $spacings-def sizes
ml1, ml1-sm, ml1-md, ml1-lg and for responsive spacings

only compact overview.

mxa

mra

mla

mt0

mt05

mt1

mt2

mt3

mt4

mt5

Spacings Negative

mln0

mln05

mln1

mln2

mln3

mln4

mln5

Spacings Padding

p0

p05

p1

p2

p3

p4

p5

px4 py2

px2 py1 px3-md px4-lg px5-lg py3-md py4-lg py5-xl

Form

Normal Field

Dropdown Field

Dropdown Dense

Toggled Inputs

Checkbox

Radio

Invalid Field

Please enter a valid value.

Grouped Field 1

Grouped Field 2

Text Area

Content

Lorem ipsum dolores umbridge.

- Jon Doe

Content Code

Use the $color-primary variable to change the accent color.

.some {
    height: 100vh
}

Loading