Docs

Docs

Utility Classes

Source

A set of CSS utility classes that enable building any UI without custom CSS.

The classes are based on Lumo’s custom properties which ensures a consistent looking application. While the classes can be used with Vaadin’s web components they are primarily intended for creating layouts and styling text.

Caution
Work in progress
All utility classes are not yet documented.
Note
External dependency
The utility classes are currently part of an external dependency. They are going to be included in a future Vaadin release, and after that you don’t need an additional dependency. See roadmap for details.

Usage

The utility classes can be used with both Flow (Java) and Fusion (TypeScript).

Install the package with the following command:

npm i lumo-css-framework

Alternative, add the dependency manually in package.json:

{
  "dependencies": {
    "lumo-css-framework": "^3.0.13"
  }
}

Then import the classes in your application’s styles.css.

@import 'lumo-css-framework/all-classes.css';

Classes

// Import all Lumo CSS custom properties into the global style scope
import '@vaadin/vaadin-lumo-styles/color';
import '@vaadin/vaadin-lumo-styles/typography';
import '@vaadin/vaadin-lumo-styles/sizing';
import '@vaadin/vaadin-lumo-styles/spacing';
import '@vaadin/vaadin-lumo-styles/style';
import 'lumo-css-framework/all-classes.css';

All utility classes are listed below.

Accessibility

Accessibility related classes.

Preview

Class

Screen reader only content

.sr-only
Hides content visually while remaining available to screen readers

Backgrounds

Classes for applying a background color.

Base

Preview

Class

.bg-base

Transparent

Preview

Class

.bg-transparent

Contrast

Preview

Class

.bg-contrast-5

.bg-contrast-10

.bg-contrast-20

.bg-contrast-30

.bg-contrast-40

.bg-contrast-50

.bg-contrast-60

.bg-contrast-70

.bg-contrast-80

.bg-contrast-90

.bg-contrast

Primary

Preview

Class

.bg-primary-10

.bg-primary-50

.bg-primary

Error

Preview

Class

.bg-error-10

.bg-error-50

.bg-error

Success

Preview

Class

.bg-success-10

.bg-success-50

.bg-success

Borders

Border related classes.

Preview

Class

.border-0

.border

.border-b

.border-l

.border-r

.border-t

Border Color

Classes for setting the border color of an element.

Contrast

Preview

Class

.border-contrast-5

.border-contrast-10

.border-contrast-20

.border-contrast-30

.border-contrast-40

.border-contrast-50

.border-contrast-60

.border-contrast-70

.border-contrast-80

.border-contrast-90

.border-contrast

Primary

Preview

Class

.border-primary-10

.border-primary-50

.border-primary

Error

Preview

Class

.border-error-10

.border-error-50

.border-error

Success

Preview

Class

.border-success-10

.border-success-50

.border-success

Border Radius

Classes for setting the border radius of an element.

Preview

Class

.rounded-none

.rounded-s

.rounded-m

.rounded-l

Box Shadow

Classes for applying a box shadow.

Preview

Class

.shadow-xs

.shadow-s

.shadow-m

.shadow-l

.shadow-xl

Flexbox & Grid

Classes for flexbox and grid layouts.

Align Content

Classes for distributing space around and between items along a flexbox’s cross axis or a grid’s block axis. Applies to flexbox and grid layouts.

Preview

Class

1234

.content-center

1234

.content-end

1234

.content-start

1234

.content-around

1234

.content-between

1234

.content-evenly

1234

.content-stretch

Align Items

Classes for aligning items along a flexbox’s cross axis or a grid’s block axis. Applies to flexbox and grid layouts.

Preview

Class

123

.items-baseline

123

.items-center

123

.items-end

123

.items-start

123

.items-stretch

Align Self

Classes for overriding individual items align-item property. Applies to flexbox and grid items.

Preview

Class

.self-auto

.self-baseline

.self-center

.self-end

.self-start

.self-stretch

Justify Content

Classes for aligning items along a flexbox’s main axis or a grid’s inline axis. Applies to flexbox and grid layouts.

Preview

Class

.justify-center

.justify-end

.justify-start

.justify-around

.justify-between

.justify-evenly

Flex

Classes for setting how items grow and shrink in a flexbox layout. Applies to flexbox items.

Preview

Class

1999

.flex-auto

1999

.flex-none

Flex Direction

Classes for setting the flex direction of a flexbox layout.

Preview

Class

123

.flex-col

123

.flex-col-reverse

123

.flex-row

123

.flex-row-reverse

Flex Grow

Classes for setting how items grow in a flexbox layout. Applies to flexbox items.

Preview

Class

1

.flex-grow-0

1

.flex-grow

Flex Shrink

Classes for setting how items shrink in a flexbox layout. Applies to flexbox items.

Preview

Class

1

.flex-shrink-0

1

.flex-shrink

Flex Wrap

Classes for setting how items wrap in a flexbox layout. Applies to flexbox layouts.

Preview

Class

1234

.flex-nowrap

1234

.flex-wrap

1234

.flex-wrap-reverse

Gap

Classes for defining the space between items in a flexbox or grid layout. Applies to flexbox and grid layouts.

Uniform

Preview

Class

1234

.gap-xs

1234

.gap-s

1234

.gap-m

1234

.gap-l

1234

.gap-xl

Column

Classes for defining the horizontal space between items in a flexbox or grid layout. Applies to flexbox and grid layouts.

Preview

Class

12

.gap-x-xs

12

.gap-x-s

12

.gap-x-m

12

.gap-x-l

12

.gap-x-xl

Row

Classes for defining the vertical space between items in a flexbox or grid layout. Applies to flexbox and grid layouts.

Preview

Class

12

.gap-y-xs

12

.gap-y-s

12

.gap-y-m

12

.gap-y-l

12

.gap-y-xl

Grid Columns

Classes for setting the number of columns in a grid layout.

Preview

Class

1234

.grid-cols-1

1234

.grid-cols-2

1234

.grid-cols-3

1234

.grid-cols-4

12345678

.grid-cols-5

12345678

.grid-cols-6

12345678

.grid-cols-7

12345678

.grid-cols-8

123456789101112

.grid-cols-9

123456789101112

.grid-cols-10

123456789101112

.grid-cols-11

123456789101112

.grid-cols-12

Grid Rows

Classes for setting the number of rows in a grid layout.

Preview

Class

12345678

.grid-rows-1

12345678

.grid-rows-2

12345678

.grid-rows-3

12345678

.grid-rows-4

12345678

.grid-rows-5

12345678

.grid-rows-6

Spanning Columns

Classes for setting the column span of an item in a grid layout.

Preview

Class

123456789101112

.col-span-1

1234567891011121314151617181920212223

.col-span-2

12345678910111213141516171819202122

.col-span-3

123456789101112131415161718192021

.col-span-4

1234567891011121314151617181920

.col-span-5

12345678910111213141516171819

.col-span-6

123456789101112131415161718

.col-span-7

1234567891011121314151617

.col-span-8

12345678910111213141516

.col-span-9

123456789101112131415

.col-span-10

1234567891011121314

.col-span-11

12345678910111213

.col-span-12

Spanning Rows

Classes for setting the row span of an item in a grid layout.

Preview

Class

123456

.row-span-1

1234567891011

.row-span-2

12345678910

.row-span-3

123456789

.row-span-4

12345678

.row-span-5

1234567

.row-span-6

Layout

Classes for general layout purposes.

Box Sizing

Classes for setting the box sizing property of an element. Box sizing determines whether an element’s border and padding is considered a part of its size.

Preview

Class

Size: 44px

.box-border

Size: 44px

.box-content

Display

Classes for setting the display property of an element. Determines whether the element is a block or inline element and how its items are laid out.

Preview

Class

.flex

.hidden

.inline-flex

.grid

.inline-grid

Overflow

Classes for setting the overflow behaviour of an element.

Preview

Class

123Scrolls

.overflow-auto

123No scroll

.overflow-hidden

123Scrolls

.overflow-scroll

Position

Classes for setting the position of an element.

Preview

Class

.absolute

.fixed

.static

.sticky

.relative

Sizing

Classes for setting height and width of an element.

Height

Preview

Class

N/A

.h-0

xs

.h-xs

s

.h-s

m

.h-m

l

.h-l

xl

.h-xl

auto

.h-auto

full

.h-full

screen(scroll to see total height)

.h-screen

Max Height

Preview

Class

.max-h-full

.max-h-screen

Min Height

Preview

Class

.min-h-0

.min-h-full

.min-h-screen

Width

Preview

Class

xs

.w-xs

s

.w-s

m

.w-m

l

.w-l

xl

.w-xl

auto

.w-auto

full

.w-full

Max Width

Preview

Class

.max-w-full

.max-w-max

.max-w-min

.max-w-screen-sm

.max-w-screen-md

.max-w-screen-lg

.max-w-screen-xl

.max-w-screen-2xl

Min Width

Preview

Class

.min-w-0

.min-w-full

.min-w-max

.min-w-min

Icon Size

Preview

Class

.icon-s

.icon-m

.icon-l

Spacing

Classes for applying margin and padding on individual elements, as well as spacing between elements in a layout.

Margin

Classes for setting the margin of an element.

Uniform

Preview

Class

.m-auto

.m-0

.m-xs

.m-s

.m-m

.m-l

.m-xl

Bottom

Preview

Class

.mb-auto

.mb-0

.mb-xs

.mb-s

.mb-m

.mb-l

.mb-xl

Left

Preview

Class

.ml-auto

.ml-0

.ml-xs

.ml-s

.ml-m

.ml-l

.ml-xl

Preview

Class

.mr-auto

.mr-0

.mr-xs

.mr-s

.mr-m

.mr-l

.mr-xl

Top

Preview

Class

.mt-auto

.mt-0

.mt-xs

.mt-s

.mt-m

.mt-l

.mt-xl

Inline End

Preview

Class

.me-auto

.me-0

.me-xs

.me-s

.me-m

.me-l

.me-xl

Inline Start

Preview

Class

.ms-auto

.ms-0

.ms-xs

.ms-s

.ms-m

.ms-l

.ms-xl

Horizontal

Preview

Class

.mx-auto

.mx-0

.mx-xs

.mx-s

.mx-m

.mx-l

.mx-xl

Vertical

Preview

Class

.my-auto

.my-0

.my-xs

.my-s

.my-m

.my-l

.my-xl

Padding

Classes for setting the padding of an element.

Uniform

Preview

Class

.p-0

.p-xs

.p-s

.p-m

.p-l

.p-xl

Bottom

Preview

Class

.pb-0

.pb-xs

.pb-s

.pb-m

.pb-l

.pb-xl

Left

Preview

Class

.pl-0

.pl-xs

.pl-s

.pl-m

.pl-l

.pl-xl

Right

Preview

Class

.pr-0

.pr-xs

.pr-s

.pr-m

.pr-l

.pr-xl

Top

Preview

Class

.pt-0

.pt-xs

.pt-s

.pt-m

.pt-l

.pt-xl

Inline End

Preview

Class

.pe-0

.pe-xs

.pe-s

.pe-m

.pe-l

.pe-xl

Inline Start

Preview

Class

.ps-0

.ps-xs

.ps-s

.ps-m

.ps-l

.ps-xl

Horizontal

Preview

Class

.px-0

.px-xs

.px-s

.px-m

.px-l

.px-xl

Vertical

Preview

Class

.py-0

.py-xs

.py-s

.py-m

.py-l

.py-xl

Spacing

Classes for applying space between components in a layout. Applies to all layouts.

Uniform

Preview

Class

.space-xs

.space-s

.space-m

.space-l

.space-xl

Bottom

Preview

Class

.spacing-b-xs

.spacing-b-s

.spacing-b-m

.spacing-b-l

.spacing-b-xl

Left

Preview

Class

.spacing-l-xs

.spacing-l-s

.spacing-l-m

.spacing-l-l

.spacing-l-xl

Right

Preview

Class

.spacing-r-xs

.spacing-r-s

.spacing-r-m

.spacing-r-l

.spacing-r-xl

Top

Preview

Class

.spacing-t-xs

.spacing-t-s

.spacing-t-m

.spacing-t-l

.spacing-t-xl

Inline End

Preview

Class

.spacing-e-xs

.spacing-e-s

.spacing-e-m

.spacing-e-l

.spacing-e-xl

Inline Start

Preview

Class

.spacing-s-xs

.spacing-s-s

.spacing-s-m

.spacing-s-l

.spacing-s-xl

Horizontal

Preview

Class

.spacing-x-xs

.spacing-x-s

.spacing-x-m

.spacing-x-l

.spacing-x-xl

Vertical

Preview

Class

.spacing-y-xs

.spacing-y-s

.spacing-y-m

.spacing-y-l

.spacing-y-xl

Typography

Classes for styling text.

Font Size

Classes for setting the font size of an element.

Preview

Class

.text-2xs

.text-xs

.text-s

.text-m

.text-l

.text-xl

.text-2xl

.text-3xl

Font Weight

Classes for setting the font weight of an element.

Preview

Class

.font-thin

.font-extralight

.font-light

.font-normal

.font-medium

.font-semibold

.font-bold

.font-extrabold

.font-black

Line Height

Classes for setting the line height of an element.

Preview

Class

.leading-none

.leading-xs

.leading-s

.leading-m

List Style Type

Classes for setting a list’s style.

Preview

Class

.list-none

.list-disc

.list-decimal

Text Alignment

Classes for setting an element’s text alignment.

Preview

Class

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.text-left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.text-center

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.text-right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.text-justify

Text Color

Classes for setting the text color of an element.

Preview

Class

Header

.text-header

Body

.text-body

Secondary

.text-secondary

Tertiary

.text-tertiary

Disabled

.text-disabled

Primary

.text-primary

Primary contrast

.text-primary-contrast

Error

.text-error

Error contrast

.text-error-contrast

Success

.text-success

Success contrast

.text-success-contrast

Text Overflow

Classes for setting text overflow.

Preview

Class

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.overflow-clip

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.overflow-ellipsis

Text Transform

Classes for transforming text.

Preview

Class

Lorem ipsum dolor sit amet

.capitalize

Lorem ipsum dolor sit amet

.lowercase

Lorem ipsum dolor sit amet

.uppercase

Whitespace

Classes for transforming text.

Preview

Class

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.whitespace-normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.whitespace-nowrap

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.whitespace-pre

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.whitespace-pre-line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.whitespace-pre-wrap