Basis

Basic formatting styles for web applications.

github.com/tobento-ch/css-basis

Import CSS

Anchor tags will be styled with the defined "click colors" css custom properties.

A Tag

You may use the link class for any other elements.

Link

You may use the active class indicating that the link is active.

A Tag Link

Typography

Text Sizes

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Text Weight

Text weight might depend on the font family set!

thin

light

regular

medium

bold

black

Text Alignment

text-left

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

text-right

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

text-center

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

text-justify

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Text Transformation

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Truncate String with Ellipsis

Titles

Lorem ipsum

Lorem ipsum

Fonts

Lorem ipsum

Lorem ipsum

@font-face

Example of importing font families with its weight range corresponding to the basis.css weights.

Colors

Signal Colors

text-success

background-success

text-warning

background-warning

text-error

background-error

text-info

background-info

text-highlight

background-highlight

Design Colors

text-primary

background-primary

text-secondary

background-secondary

Gray Colors

You may use the following CSS custom properties for other design element classes.

var(--color-gray-900)

var(--color-gray-700)

var(--color-gray-500)

var(--color-gray-400)

var(--color-gray-300)

var(--color-gray-100)

Buttons

Button Types

A Tag

Button Sizes

Text Sizes

Label Label Label Label Label Label Label Label

fit

Button Styles

Button normal Button primary Button raw

Button States

Active Button

Button Icons

User⚥

List Of Buttons

Spaced

A Tag

Grouped

Grouped Small

Expanded

Grouped and Expanded

Icons

You may check out the Icon Service to easily manage your icons for your application.

SVG Icons

Download
Download

Font Awesome and others

Icon Sizes

You may use the Text Sizes for the icon size. Only svg or text icons scales though.

Download

Icon Text

You may use the icon-text class within any paragraph of text.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lists

Bulleted List

Numbered List

  1. Coffee
  2. Tea
    1. Black tea
    2. Green tea
  3. Milk

Unstyled List

Description List

Coffee
- black hot drink
Milk
- white cold drink

Spaced

The spaced class assigns default paddings for the items which can be used in combination with your menu style class.

Icons and Badges

You may use the Icons structure! For badges add the badge class.

Spaced

The spaced class assigns default paddings for the items which can be used in combination with your menu style class.

Add the top class as to align to the top.

Form

Elements

Input

Textarea

Select

Element Sizes

Fit Width

Use the fit class to fit its parent container.

Small

Use the small class for small elements.

Input Icons

Small Input

Field

Vertical field

Some description or message.

Horizontal field

The field gets vertical on mobile breakpoint.

Some description or message.

Vertical checkbox or radio

Some description or message.

Horizontal checkbox or radio

Some description or message.

Vertical example

Some description or message.

Some description or message.

Some description or message.

Some description or message.

Read our terms and conditions.

Horizontal example

Some description or message.

Some description or message.

Content

You may use the content class to format content text.

First heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Second heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk

Third heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

  1. Coffee
  2. Tea
    1. Black tea
    2. Green tea
  3. Milk
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Coffee
- black hot drink
Milk
- white cold drink

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Fourth heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

One Two
Three Four
Five Six
Seven Eight
Nine Ten
Eleven Twelve
Fifth heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Sixth heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Helpers

Position

Class Css
position-sticky position: sticky;
position-absolute position: absolute;
position-relative position: relative;
position-fixed position: fixed;

Display

Class Css
display-none display: none;
display-block display: block;
display-inline-block display: inline-block;
display-flex display: flex;
display-inline-flex display: inline-flex;

Float

Class Css
float-left float: left;
float-right float: right;

Overflow

Class Css
overflow-hidden overflow: hidden;
overflow-visible overflow: visible;
overflow-auto overflow: auto;
overflow-x-auto overflow-x: auto;
overflow-y-auto overflow-y: auto;

Cursor

Class Css
cursor-pointer cursor: pointer;
cursor-move cursor: move;

Misc

Class Css
scroll-behavior-smooth scroll-behavior: smooth;

Sizing

Max Width

  • max-width-xxs is of width 4rem
  • max-width-xs is of width 8rem
  • max-width-s is of width 16rem
  • max-width-m is of width 32rem
  • max-width-l is of width 48rem
  • max-width-xl is of width 64rem
  • max-width-xxl is of width 80rem
  • max-width-min is equal to css max-width: min-content;
  • max-width-max is equal to css max-width: max-content;
  • max-width-fit is equal to css max-width: fit-content;
  • max-width-full is equal to css max-width: 100%;

Spacing

Margin

Available margin directions:

  • m for top, right, bottom, left
  • mt for top
  • mr for right
  • mb for bottom
  • ml for left
  • mx horizontally for both left and right
  • my vertically for both top and bottom

Available sizes to be appended to margin directions like mt-s:

  • 0 is of size 0
  • xxs is of size 0.25rem
  • xs is of size 0.5rem
  • s is of size 1rem
  • m is of size 2rem
  • l is of size 4rem
  • xl is of size 6rem
  • xxl is of size 8rem
  • auto

Padding

Available padding directions:

  • p for top, right, bottom, left
  • pt for top
  • pr for right
  • pb for bottom
  • pl for left
  • px horizontally for both left and right
  • py vertically for both top and bottom

Available sizes to be appended to padding directions like pt-s:

  • 0 is of size 0
  • xxs is of size 0.25rem
  • xs is of size 0.5rem
  • s is of size 1rem
  • m is of size 2rem
  • l is of size 4rem
  • xl is of size 6rem
  • xxl is of size 8rem

Columns

Columns is a simple grid system based on CSS flexbox. It is a desktop-first approach.

Sizes

Compose column by column with class like col-1 to col-12.

col-12
col-11
col-1
col-10
col-2
col-9
col-3
col-8
col-4
col-7
col-5
col-6
col-6

Auto width column

Keep in mind that in this way, your columns will only be a row!

first col
second col
third col

Content width column

Just leave the col class out if you want to fit the width of the content.

Lorem ipsum
col
Lorem ipsum
col

Options for columns

Nowrap

Columns will only be a row.

col-12
col-6

Horizontal alignment: left, center and right

col-2
col-2
col-2
col-2
col-2
col-2

Vertical alignment: top, middle and bottom

...

Lorem Ispsum

Lorem Ispsum

Lorem Ispsum

Lorem Ispsum

...
...

Lorem Ispsum

Lorem Ispsum

Lorem Ispsum

Lorem Ispsum

...
...

Lorem Ispsum

Lorem Ispsum

Lorem Ispsum

Lorem Ispsum

...

Reverse

first col
second col
third col

Single row per column

first col
second col
third col

Single row per column reversed

first col
second col
third col

Space between

col-2
col-2
col-2

Space around

col-2
col-2
col-2

Options for column

Vertical alignment: top, middle and bottom

...

Lorem Ispsum

Lorem Ispsum

Lorem Ispsum

Lorem Ispsum

...
...

Column Gaps

You may use the padding spacing for gaps.

col-3
col-6
col-3

Column Responsiveness

Sizes

col
col
col

Options for columns

Use widescreen-*, desktop-*, tablet-*, mobile-* with the following alignment classes like tablet-middle.

...

Lorem Ispsum

Lorem Ispsum

Lorem Ispsum

Lorem Ispsum

...

Options for column

Use widescreen-*, desktop-*, tablet-*, mobile-* with the following alignment classes like tablet-middle.

...

Lorem Ispsum

Lorem Ispsum

Lorem Ispsum

Lorem Ispsum

...
...

Responsiveness

Basis.css uses the following breakpoints for its core classes.

Mobile First Breakpoints

Desktop First Breakpoints