Compose CSS

v8.2.8

A composable CSS Toolkit to build fast, maintainable, and responsive websites.

Quickstart

Compose CSS is on GitHub.

Download the Compose CSS file and put it into the css folder of your website project.

Reference the CSS file in your HTML:

<link rel="stylesheet" type="text/css" href="/css/compose.css">

By then you are ready to use Compose CSS.

Another way to use Compose CSS is by adding the compose-css npm package to your node project. Install with

npm i compose-css

Notation

Throughout this document the following notation is applied:

div /div HTML tags are indicated by their name. The closing HTML tag is indicated with a prefixed slash.
div/ The abbreviated form of an opening and closing HTML tag is indicated by the tag name with a trailing slash.
.left CSS classes are indicated with a prefixed dot
.left.middle The assignment of multiple CSS classes to a single HTML tag, composing, is indicated with a prefixed dot for each CSS class; and there is no white space between classes.
i, .i, .italic Multiple styling options that produce the same result are indicated by HTML tag names or CSS class names, each one seperated by comma.

Typography

Elements

Element Set style with
Normal .normal
Link a
Bold strong, b, .strong, .bold, .b
Italic i, .i, .italic
Underline u, .underline
Deleted del, .del
Caps .caps, .uppercase
Lowercase .lowercase
Spacing .lsp
Highlighted mark, .mark
Ctrl+K kbd, .kbd
Text with superscript sup, .sup
Text with subscript sub, .sub
Citing the title of a work cite, .cite
A quotation q, .q
Emphasize em, .em
Strike through s, .s, .strike
Small small, .small
Smaller smaller, .smaller
Code code, .code
Meta text .meta
No text decoration, eg. for links .no-deco

Word wrapping

No word wrap at white space
.no-wrap

Word wrap anywhere
.break-word

No word wrap at white space
.truncate

Horizontal ruler

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.


He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.

hr

Paragraph

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.

He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.

His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. What's happened to me? he thought. It wasn't a dream.

p/

Indented paragraph

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.

He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.

His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. What's happened to me? he thought. It wasn't a dream.

div .indent
    p/
/div

p/ .indent
p/ .no-indent //remove indentation for this p

Unordered list

ul
    li/
/ul

Indented unordered list

ul .indent
    li/
/ul

Ordered list

  1. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
  2. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.
    1. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. What's happened to me? he thought. It wasn't a dream.
    2. His room, a proper human room although a little too small, lay peacefully between its four familiar walls.
  3. A collection of textile samples lay spread out on the table – Samsa was a travelling salesman – and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame.
ol
    li/
/ol

Indented ordered list

  1. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
  2. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.
    1. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. What's happened to me? he thought. It wasn't a dream.
    2. His room, a proper human room although a little too small, lay peacefully between its four familiar walls.
  3. A collection of textile samples lay spread out on the table – Samsa was a travelling salesman – and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame.
ol .indent
    li/
/ol

Definition list

One morning
when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
He lay on his armour-like back
and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.
His many legs
pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. What's happened to me? he thought. It wasn't a dream.
His room
a proper human room although a little too small, lay peacefully between its four familiar walls.
dl
    dt/
    dd/
/dl

Blockquote

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.

He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.

Franz Kafka, The Metamorphosis
blockquote
    p/
    footer/
/blockquote

Writing mode

He lay on his armour-like back
.horizontal-tb
He lay on his armour-like back
.vertical-lr
He lay on his armour-like back
.vertical-rl

Headings

H1

h1

H2

h2

H3

h3

H4

h4
H5
h5 (1rem)
H6
h6

Heading sizes

H1 .h1
H2 .h2
H3 .h3
H4 .h4
H5 .h5 (1rem)
H6 .h6

Font sizes

Aa small, .small, .fs-d1
Aa .fs, .fs-default (1rem)
Aa .fs-1
Aa .fs-2
Aa .fs-3
Aa .fs-4
Aa .fs-5
Aa .fs-6
Aa .fs-7
Aa .fs-8
Aa .fs-9
Aa .fs-10

Line height

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. .lh-d1
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. .lh (1em)
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. .lh-1
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. .lh-2
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. .lh-3, .lh-unset
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. .lh-4
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. .lh-5

Responsive breakpoints

Heading size, font size, and line height can be assigned different sizes based on minimum screen width. Address the different minimum screen sizes with responsive breakpoints, wich are indicated by CSS class prefix values of:

.sm: The size is applied only if the screen is at least of small width.
.rg: The size is applied only if the screen is at least of regular size.
.md: The size is applied only if the screen is at least of mid size.
.lg: The size is applied only if the screen is at least of large size.

Examples: .lg:fs-1, .md:h1, or .rg:lh-3.

A size class without a prefix will be used in case the alternate minimum screen size is not defined.

One morning, when Gregor Samsa woke from troubled dreams

p/ .fs-1.rg:fs-2.md:fs-3.lg:fs-4

Font weight

Aa .fw-100
Aa .fw-200
Aa .fw-300
Aa .fw-400, .fw-normal, .normal
Aa .fw-500
Aa .fw-600, .bold, bold
Aa .fw-700
Aa .fw-800
Aa .fw-900

Letter spacing

The quick brown fox .lsp-0, .no-lsp
The quick brown fox .lsp-1
The quick brown fox .lsp-2
The quick brown fox .lsp-3
The quick brown fox .lsp-4

Numbers

13679.05 .ft-num-normal (default)
13679.05 .ft-num-tab (default for tables)

Colors

The Color System

d5 d4 d3 d2 d1 1 2 3 4 5
.neutral
.primary
.accent-one
.accent-two
.accent-three

Apply Colors to Text, Background, and Borders

Set color, background-color and border-color by applying the naming conventions:

Color Background Border Refine
.neutral .bg-neutral .br-neutral neutral-d5 … neutral-5
.primary .bg-primary .br-primary primary-d5 … primary-5
.accent-one .bg-accent-one .br-accent-one accent-one-d5 … accent-one-5
.accent-two .bg-accent-two .br-accent-two accent-two-d5 … accent-two-5
.accent-three .bg-accent-three .br-accent-three accent-three-d5 … accent-three-5

Edge Values

In addition there are the following color classes available:

.base-color (which is default text-color).

The color can be used as text color, background color and border color. It is defined through:

:root { --base-color: var(--neutral-color-d5); }
.base-background

The color can be used as text color, background color and border color. It is defined through:

:root { --base-background: white; }

Link colors are not set with dedicated CSS classes. The configuration is only possible by assigning values to the following CSS variables:

:root { 
    --link-color: var(--base-color); 
    --link-active-color: var(--primary);
    --link-hover-color: var(--primary); 
}

The color to indicate selected text. The configuration is only possible by assigning values to the following CSS variable:

:root { 
    --selection-color: var(--primary-4); 
}
.black

The color can be used as text color, background color and border color. It is defined through:

:root { --black: black; }
.white

The color can be used as text color, background color and border color. It is defined through:

:root { --white: white; }
.mark, mark

The color is defined through:

:root { --mark-background: yellow; }
.kbd, kbd

The color is defined through:

:root { --kbd-background: var(--neutral-4); }
.meta-color

The color can be used as text color and background color. It is defined through:

:root { --meta-color: var(--neutral-d2); }
.heading-color

The color can be used as text color and background color. It is defined through:

:root { --heading-color: black; }

Define Your Own Color System

The color system is built around the five colors:

neutral
primary
accent one
accent two
accent three

To define your own color palette, change the colors by providing their hsl color code. Consider convertacolor to adapt rgb colors to hsl.

:root {
    --neutral-h: 0;
    --neutral-s: 0%;
    --neutral-l: 58%;              
    
    --primary-h: 213;
    --primary-s: 19%;
    --primary-l: 60%;
    
    --accent-one-h: 3;
    --accent-one-s: 100%;
    --accent-one-l: 61%;  

    --accent-two-h: 28;
    --accent-two-s: 100%;
    --accent-two-l: 55%;  
    
    --accent-three-h: 52;
    --accent-three-s: 100%;
    --accent-three-l: 50%;  
}

White Space

Notation

Shorthand Description
gp grid gap
mr margin
pd padding
t top
r right
b bottom
l left
n negative
0 (zero) none
x X-axis
y Y-axis

Margin

.mr-0, .no-mr
.mr (1rem)
.mry
.mrx
.mrt
.mrr
.mrb
.mrl

Negative margins are supported:

.mrtn
.mrrn
.mrbn
.mrln

Use auto margins to position horizontally:

.mrr-auto
.mrx-auto
.mrl-auto

In combination with flexbox, vertical auto margins are possible.

.mrt-auto.mrx-auto
.mrb-auto.mrx-auto
.mry-auto
.mr-auto
The margin patterns can be applied to decreased and increased margins:
.mr-d5 (1px)
.mr-d4 (2px)
.mr-d3 (3px)
.mr-d2
.mr-d1
.mr (1rem)
.mr-1
.mr-2
.mr-3
.mr-4
.mr-5
.mr-6

Padding

Padding
.pd-0, .no-pd
Padding
.pd (1rem)
Padding
.pdy
Padding
.pdx
Padding
.pdt
Padding
.pdr
Padding
.pdb
Padding
.pdl

The padding patterns can be applied to decreased and increased paddings:

Padding
.pd-d5 (1px)
Padding
.pd-d4 (2px)
Padding
.pd-d3 (3px)
Padding
.pd-d2
Padding
.pd-d1
Padding
.pd (1rem)
Padding
.pd-1
Padding
.pd-2
Padding
.pd-3
Padding
.pd-4
Padding
.pd-5
Padding
.pd-6

Grid Gap

1
2
3
4
.gp-0, .no-gp
1
2
3
4
.gp (1rem)
1
2
3
4
.gpx (1rem)
1
2
3
4
.gpy.gpx-0 (1rem)
All grid gap patterns can be applied to decreased and increased gaps.
1
2
3
4
.gp-d5 (1px)
1
2
3
4
.gp-d4 (2px)
1
2
3
4
.gp-d3 (3px)
1
2
3
4
.gp-d2
1
2
3
4
.gp-d1
1
2
3
4
.gp (1rem)

Borders

Notation

Shorthand Description
br border
brw border width
t top
r right
b bottom
l left
0 (zero) none
x X-axis
y Y-axis

Border

.br
.bry
.brx
.brt
.brr
.brb
.brl
.no-br

Border Style

.br.dashed
.br.dotted
.br.solid

Border Width

.brw-0, .no-br
.br.brw-d5, br.brw-default (1px)
.br.brw-d4 (2px)
.br.brw-d3 (3px)
.br.brw-d2
.br.brw-d1
.br.brw (1rem)

Border Radius

.br.radius-0
.br.radius-d3, .br.rounded
.br.radius-d2
.br.radius-d1
.br.radius (1rem)
.br.radius-pill
.br.radius-100
.br.radius.radius-t
.br.radius.radius-tl
.br.radius.radius-tr
.br.radius.radius-r
.br.radius.radius-b
.br.radius.radius-bl
.br.radius.radius-br
.br.radius.radius-l

Tables

Basic Table

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
table/

Apply padding with .pd, .pdx, or .pdy styling which can be assigned to the table, rows or td and th elements.

Borders can be used with .br, .brx, .bry, .brt, .brr, .brb, .brl and .brw styling.

Alternate Table Row Background

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
table/ .alternate-rows

Alternate Table Column Background

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
table/ .alternate-cols

Underline Table Rows

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
table/ .underline-rows

Figures

Photo by Pierre Chatel on Unsplash
figure
    img/
    figcaption/    
/figure
Photo by Matthew Henry on Unsplash
figure
    figcaption/
    img/    
/figure
Photo by Matthew Henry on Unsplash
figure
    figcaption/ .mrl-auto.right
    img/    
/figure

Images

Responsive Images

Images are by default responsive and take the entire available horizontal space (up to the width of the image) while preserving aspect-ratio.

Photo by Swan Leroi on Unsplash
img/ .w-100 //will consume the entire available width, may enlarge the image while preserving aspect ratio

Contained Images

If the image has a fixed width or fixed height, the usage of .fit-contain will put the entire visible image inside of the given dimensions while preserving aspect-ratio and without stretching the image.

Combine .fit-contain with fit positions

Photo by Jayden Chong on Unsplash
img/ .fit-contain
Photo by Jayden Chong on Unsplash
img/ .fit-contain.fit-top-left

Cover Images

If the image has a fixed width or a fixed height, the usage of .fit-cover will consume the entire available space of the given dimensions while preserving aspect-ratio.

The image might be stretched to cover.

Photo by Jayden Chong on Unsplash
img/ .fit-cover

Background Images

Background images can be positioned with .bg-cover, which is useful for hero banners. In addition, .bg-fixed makes an interesting effect when scrolling over a background image.

Hero
div/ .bg-cover.bg-fixed.bg-center.bg-no-repeat.h-rg style="background-image: url('image.jpg')" 

Combine .bg-cover with background positions

X layout

X layout is meant as a top level approach to layout a page, but can also be nested.

Centered: x

div .x
no class assignment at all
.breakout-l
.breakout-wide-l
.breakout-r
.breakout-wide-r
.breakout
.breakout-wide
.breakout-full
/div

Left shifted: x-l

div .x-l
no class assignment at all
.breakout-l
.breakout-wide-l
.breakout-r
.breakout-wide-r
.breakout
.breakout-wide
.breakout-full
/div

Right shifted: x-r

div .x-r
no class assignment at all
.breakout-l
.breakout-wide-l
.breakout-r
.breakout-wide-r
.breakout
.breakout-wide
.breakout-full
/div

Responsive Breakpoints

The breakouts can vary based on available screen width. Address the different minimum screen sizes with responsive breakpoints, wich are indicated by CSS class prefix values of:

.md: .breakout for example will only breakout at a screen of at least mid size.
.lg: .lg:breakout for example will only breakout at a screen of at least large size.

A breakout class without a prefix will be used in case the alternate minimum screen size is not defined. The responsive breakpoints .sm: and .rg: do not exist for breakouts.

Layout

Display

CSS Class Shorthand for property
.inline display: inline;
.inline-block display: inline-block;
.block display: block;
.inline-table display: inline-table;
.table display: table;
.table-cell display: table-cell;

Align

CSS Class Shorthand for property
.baseline vertical-align: baseline;
.top vertical-align: top;
.middle vertical-align: middle;
.bottom vertical-align: bottom;
.left text-align: left;
.center text-align: center;
.right text-align: right;
.justify text-align: justify;

Overflow

CSS Class Shorthand for property
.overflow-hidden overflow: hidden;
.overflow-x-hidden overflow-x: hidden;
.overflow-y-hidden overflow-y: hidden;
.overflow-auto overflow: auto;
.overflow-x-auto overflow-x: auto;
.overflow-y-auto overflow-y: auto;
.overflow-scroll overflow: scroll;
.overflow-x-scroll overflow-x: scroll;
.overflow-y-scroll overflow-y: scroll;

Box Sizing

CSS Class Shorthand for property
.border-box box-sizing: border-box; this is default box-sizing for css-compose
.content-box box-sizing: content-box;

Position

CSS Class Shorthand for property
.static position: static;
.sticky position: sticky;
.relative position: relative;
.absolute position: absolute;
.fixed position: fixed;
.top-0 top: 0;
.right-0 right: 0;
.bottom-0 bottom: 0;
.left-0 left: 0;
.z-1 z-index: var(--z-1);
.z-2 z-index: var(--z-2);
.z-3 z-index: var(--z-3);
.z-4 z-index: var(--z-4);

Float

CSS Class Shorthand for property
.float-left float: left;
.float-right float: right;
.float-clear clear: both;

Clearfix

Using float without .clearfix

.float-left
.float-right
div 
    div/ .float-left 
    div/ .float-right 
/div

Using float with .clearfix assigned to the outer container

.float-left
.float-right
div .clearfix
    div/ .float-left 
    div/ .float-right 
/div

Columns

A flow of a maximum of six columns – each of the same width – can be created for any space.

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.

He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.


His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. What's happened to me? he thought. It wasn't a dream.

His room, a proper human room although a little too small, lay peacefully between its four familiar walls.

A collection of textile samples lay spread out on the table – Samsa was a travelling salesman – and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame.

It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather.

Drops of rain could be heard hitting the pane, which made him feel quite sad. How about if I sleep a little bit longer and forget all this nonsense, he thought, but that was something he was unable to do because he was used to sleeping on his right, and in his present state couldn't get into that position.

However hard he threw himself onto his right, he always rolled back to where he was. He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the floundering legs, and only stopped when he began to feel a mild, dull pain there that he had never felt before.

Franz Kafka, The Metamorphosis

.columns-1.rg:columns-2.md:columns-3.lg:columns-4

Alternatively, let the browser decide about the number of columns by assigning .columns-fluid. The CSS property column-width with a default setting of var(--column-fluid-width) is used to create the layout.

Use .column-rule to assign a rule between columns. Customize the rule with var(--column-rule).

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.

He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.


His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. What's happened to me? he thought. It wasn't a dream.

His room, a proper human room although a little too small, lay peacefully between its four familiar walls.

A collection of textile samples lay spread out on the table – Samsa was a travelling salesman – and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame.

It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather.

Drops of rain could be heard hitting the pane, which made him feel quite sad. How about if I sleep a little bit longer and forget all this nonsense, he thought, but that was something he was unable to do because he was used to sleeping on his right, and in his present state couldn't get into that position.

However hard he threw himself onto his right, he always rolled back to where he was. He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the floundering legs, and only stopped when he began to feel a mild, dull pain there that he had never felt before.

Franz Kafka, The Metamorphosis

.columns-fluid.column-rule

Responsive Breakpoints

The column count can vary based on available screen width. Address the different minimum screen sizes with responsive breakpoints, wich are indicated by CSS class prefix values values of:

.sm: The column count is applied only if the screen is at least of small width.
.rg: The column count is applied only if the screen is at least of regular width.
.md: The column count is applied only if the screen is at least of mid width.
.lg: The column count is applied only if the screen is at least of large width.

A column class without a prefix will be used in case the alternate minimum screen size is not defined.

12 Column Grid

Any space can be divided horizontally into 12ths by applying the x-12 grid.

The sum of the cols per row has to add up to 12. Not specifiying a column size will result in taking the entire grid width into one column.

div .x-12
.xx-2
.xx-10
.xx-3
.xx-9
.xx-4
.xx-8
.xx-5
.xx-7
.xx-6
.xx-6
.xx-4
.xx-4
.xx-4
.xx-3
.xx-3
.xx-3
.xx-3
.xx-2
.xx-2
.xx-2
.xx-2
.xx-2
.xx-2
.xx-12
.xs-5.xx-3
.xs-10.xx-2
No class assignment
/div

Responsive Breakpoints

Columns can have a different width based on minimum screen width. Address the different minimum screen sizes with responsive breakpoints, wich are indicated by CSS class prefix values of:

.sm: The column width is applied only if the screen is at least of small width.
.rg: The column width is applied only if the screen is at least of regular width.
.md: The column width is applied only if the screen is at least of mid width.
.lg: The column width is applied only if the screen is at least of large width.

A column class without a prefix will be used in case the alternate minimum screen size is not defined.

div .x-12
.xx-12.rg:xx-6.lg:xx-4
.xx-12.rg:xx-6.lg:xx-8
/div

Flexbox

1
2
3
4
5
div .flex.justify-start.h-5
    div 1 /div .sq-3 
    div 2 /div .sq-1 
    div 3 /div .sq-2 
    div 4 /div .sq-1 
    div 5 /div .sq-3
/div
1
2
3
4
5
div .flex.justify-center.h-5
    div 1 /div .sq-3 
    div 2 /div .sq-1 
    div 3 /div .sq-2 
    div 4 /div .sq-1 
    div 5 /div .sq-3
/div
1
2
3
4
5
div .flex.justify-end.h-5
    div 1 /div .sq-3 
    div 2 /div .sq-1 
    div 3 /div .sq-2 
    div 4 /div .sq-1 
    div 5 /div .sq-3
/div
1
2
3
4
5
div .flex.justify-space-between.h-5
    div 1 /div .sq-3 
    div 2 /div .sq-1 
    div 3 /div .sq-2 
    div 4 /div .sq-1 
    div 5 /div .sq-3
/div
1
2
3
4
5
div .flex.justify-space-around.h-5
    div 1 /div .sq-3 
    div 2 /div .sq-1 
    div 3 /div .sq-2 
    div 4 /div .sq-1 
    div 5 /div .sq-3
/div
1
2
3
4
5
div .flex.justify-space-evenly.h-5
    div 1 /div .sq-3 
    div 2 /div .sq-1 
    div 3 /div .sq-2 
    div 4 /div .sq-1 
    div 5 /div .sq-3
/div
1
2
3
4
5
div .flex.align-start.h-5
    div 1 /div .sq-3 
    div 2 /div .sq-1 
    div 3 /div .sq-2 
    div 4 /div .sq-1 
    div 5 /div .sq-3
/div
1
2
3
4
5
div .flex.align-center.h-5
    div 1 /div .sq-3 
    div 2 /div .sq-1 
    div 3 /div .sq-2 
    div 4 /div .sq-1 
    div 5 /div .sq-3
/div
1
2
3
4
5
div .flex.align-end.h-5
    div 1 /div .sq-3 
    div 2 /div .sq-1 
    div 3 /div .sq-2 
    div 4 /div .sq-1 
    div 5 /div .sq-3
/div
1
2
3
4
5
div .flex.align-stretch.h-5
    div 1 /div .w-3 
    div 2 /div .w-1 
    div 3 /div .w-2 
    div 4 /div .w-1 
    div 5 /div .w-3
/div
One Morning
Gregor Samsa
div .flex.align-baseline.h-5
    div 1 /div .sq-3 
    div 2 /div .sq-3 
    div 3 /div .sq-2 
    div 4 /div .sq-1 
    div 5 /div .sq-3
/div
1
2
3
4
5
6
7
8
9
div .flex-wrap
    div 1 /div .sq-3 
    div 2 /div .sq-3 
    div 3 /div .sq-2 
    div 4 /div .sq-1 
    div 5 /div .sq-3
    div 6 /div .sq-3 
    div 7 /div .sq-2 
    div 8 /div .sq-1 
    div 9 /div .sq-3
/div
1
2
3
4
5
div .flex-column
    div 1 /div .sq-3 
    div 2 /div .sq-1 
    div 3 /div .sq-2 
    div 4 /div .sq-1 
    div 5 /div .sq-3
/div
1
2
3
4
5
6
7
8
9
div .flex-column.flex-wrap.h-6
    div 1 /div .sq-3 
    div 2 /div .sq-3 
    div 3 /div .sq-2 
    div 4 /div .sq-1 
    div 5 /div .sq-3
    div 6 /div .sq-3 
    div 7 /div .sq-2 
    div 8 /div .sq-1 
    div 9 /div .sq-3
/div

Width, Max-Width, and Min-Width

Set the width by assigning any of the following shorthand CSS classes.

.w-unset
.w-d5 (1px)
.w-d4 (2px)
.w-d3 (3px)
.w-d2
.w-d1
.w
.w-1
.w-2
.w-3
.w-4
.w-5
.w-6
.w-sm there is more →
.w-rg there is more →
.w-md there is more →
.w-lg there is more →
.w-100

All .w variations are also available as .mxw for max width, and .miw for min width.

Responsive Breakpoints

In addition .w, .mxw, and .miw classes can be altered with responsive breakpoints, wich are indicated by CSS class prefix values of:

.sm: The width is applied only if the screen is at least of small width.
.rg: The width is applied only if the screen is at least of regular width.
.md: The width is applied only if the screen is at least of mid width.
.lg: The width is applied only if the screen is at least of large width.

Viewport width

The class .vw-100 will assign the exact width of the viewport.

.vw-100

Fit

The class .fit will assign a maximum width of 100%.

CSS Class Shorthand for property
.fit max-width: 100%;

Height, Max-Height, and Min-Height

.h-lg
.h-md
.h-rg
.h-sm
.h-6
.h-5
.h-4
.h-3
.h-2
.h-1
.h
.h-d1
.h-d2
.h-d3
.h-d4
.h-d5
.h-unset

All .h variations are also available as .mxh for max height, and .mih for min height.

Responsive Breakpoints

In addition the .h, .mxh, and .mih classes can be altered with responsive breakpoints, wich are indicated by CSS class prefix values of:

.sm: The height is applied only if the screen is at least of small width.
.rg: The height is applied only if the screen is at least of regular width.
.md: The height is applied only if the screen is at least of mid width.
.lg: The height is applied only if the screen is at least of large width.

Viewport height

The class .vh-100 will assign the exact height of the viewport.

.vh-100

Square

.sq-d5 (1px)
.sq-d4 (2px)
.sq-d3 (3px)
.sq-d2
.sq-d1
.sq
.sq-1
.sq-2
.sq-3
.sq-4
.sq-5
.sq-6
.sq-lg
.sq-md
.sq-rg
.sq-sm

Responsive Breakpoints

The .sq classes can be altered with responsive breakpoints, wich are indicated by CSS class prefix valuesÌ of:

.sm: The square is applied only if the screen is at least of small width.
.rg: The square is applied only if the screen is at least of regular width.
.md: The square is applied only if the screen is at least of mid width.
.lg: The square is applied only if the screen is at least of large width.

Responsive Hide

Screen has max small width .sm:hide
Screen has at least small width .below-sm:hide
Screen has at least regular width .below-rg:hide
Screen has at least mid width .below-md:hide
Screen has at least large width .below-lg:hide
div/ .sm:hide //When visible: screen has small width or below
div/ .below-sm:hide //When visible: screen is above small width
div/ .below-rg:hide //When visible: screen is above regular width
div/ .below-md:hide //When visible: screen is above mid width
div/ .below-lg:hide //When visible: screen is above large width
CSS Class Description
.hide Hide in any case
.sm:hide Hide if the screen has at least small screen width.
.below-sm:hide Hide if the screen at max small screen width.
.rg:hide Hide if the screen has at least regular screen width.
.below-rg:hide Hide if the screen has at max regular screen width.
.md:hide Hide if the screen at least mid screen width.
.below-md:hide Hide if the screen at max mid screen width.
.lg:hide Hide if the screen has at least large screen width.
.below-lg:hide Hide if the screen has at max large screen width.

Forms