Utilities

Utility classes are building the base of all styles. They can be applied everywhere to modify/control one specific thing.

Aspect ratio

The aspect ratio class can be used to force a specific aspect ratio on an element. The child will positioned absolute in the center of the parent. The aspect ratio can be set by using the --aspect-ratio custom property. Can be done over css selector or directly in the style of the element.

<style>
  .aspect-ratio-16-9 { --aspect-ratio: 16 / 9; }
</style>
<div class="aspect-ratio-16-9 bg" style="max-width: 260px;"><span>16:9</span></div>
<hr>
<div class="aspect-ratio bg" style="--aspect-ratio: 16 / 9; max-width: 260px;"><span>16:9</span></div>

With picture

When using the aspect ratio in combination with an image, the image will be stretched to cover the whole area.

<picture class="image aspect-ratio" style="--aspect-ratio: 16/9; max-width: 360px;">
  <img alt="Image Preview" src="img/preview-520x520.png" width="520" height="520"/>
</picture>
<picture class="image aspect-ratio" style="--aspect-ratio: 9/16; max-width: 200px;">
  <img alt="Image Preview" src="img/preview-520x520.png" width="520" height="520"/>
</picture>

16:9

The aspect ratio class can be used to force a specific aspect ratio on an element. The child will positioned absolute in the center of the parent. The aspect ratio can be set by using the --aspect-ratio custom property. Can be done over css selector or directly in the style of the element.

<div class="aspect-ratio-16-9 bg" style="max-width: 260px;"><span>16:9</span></div>

Background

The .bg class can be used to set backgrounds. Will use the colorset variables, so to change color you also need a colorset class to work correctly.

Colorsets

Colorset definition to change color in specific contexts. For example you can use colorset in combination with .bg or or .btn to change there coloring.

<div class="bg cs-primary" style="min-height: 100px"></div>

Flex

<div class="flex">
  <div class="bg px py"></div>
  <div class="bg px py"></div>
</div>

gap

Use gap utility to define gaps.

<div class="flex gap">
  <div class="bg px py"></div>
  <div class="bg px py"></div>
</div>
<div class="flex gap-xl">
  <div class="bg px py"></div>
  <div class="bg px py"></div>
</div>

row

<div class="flex row gap">
  <div class="bg px py"></div>
  <div class="bg px py"></div>
</div>
<div class="flex row gap mt">
  <div class="bg px py"></div>
  <div class="pull-right bg px py"></div>
  <div class="pull-right bg px py"></div>
</div>

column

<div class="flex column">
  <div class="bg px py"></div>
  <div class="bg px py"></div>
</div>

wrap

<div class="flex row wrap">
  <div class="bg px py" style="width: 700px"></div>
  <div class="bg px py" style="width: 800px"></div>
</div>

no wrap

<div class="flex row nowrap">
  <div class="bg px py" style="width: 700px"></div>
  <div class="bg px py" style="width: 800px"></div>
</div>

justify

start

<div class="flex row gap justify-start">
  <div class="bg px py"></div>
  <div class="bg px py"></div>
</div>

space between

<div class="flex row gap justify-between">
  <div class="bg px py"></div>
  <div class="bg px py"></div>
</div>

space around

<div class="flex row gap justify-around">
  <div class="bg px py"></div>
  <div class="bg px py"></div>
</div>

space evenly

<div class="flex row gap justify-evenly">
  <div class="bg px py"></div>
  <div class="bg px py"></div>
</div>

end

<div class="flex row gap justify-end">
  <div class="bg px py"></div>
  <div class="bg px py"></div>
</div>

align items

align start

<div class="flex row gap items-start bg" style="height: 100px">
  <div class="px py" style="background: rgb(var(--bg-color)); color: rgb(var(--font-color));"></div>
</div>

align center

<div class="flex row gap items-center bg" style="height: 100px">
  <div class="px py" style="background: rgb(var(--bg-color)); color: rgb(var(--font-color));"></div>
</div>

align end

<div class="flex row gap items-end bg" style="height: 100px">
  <div class="px py" style="background: rgb(var(--bg-color)); color: rgb(var(--font-color));"></div>
</div>

align stretch

<div class="flex row gap items-stretch bg" style="height: 100px">
  <div class="px py" style="background: rgb(var(--bg-color)); color: rgb(var(--font-color));"></div>
  <div class="px py" style="background: rgb(var(--bg-color)); color: rgb(var(--font-color));"></div>
</div>

align baseline

<div class="flex row gap items-baseline bg" style="height: 100px">
  <div class="px py" style="background: rgb(var(--bg-color)); color: rgb(var(--font-color));"></div>
  <div class="px py" style="background: rgb(var(--bg-color)); color: rgb(var(--font-color));"></div>
</div>

Gap

Grid

<div class="grid">
  <div class="bg px py"></div>
  <div class="bg px py"></div>
</div>

Gap

Use gap utility to define gaps.

<div class="grid gap">
  <div class="bg px py"></div>
  <div class="bg px py"></div>
</div>
<div class="grid gap-xl">
  <div class="bg px py"></div>
  <div class="bg px py"></div>
</div>

Grid with Columns

Per default the grid cols has 12 columns. This can be changed with --grid-cols variable (valid is a value from 1 to 12). As addition you get .col-span-[1 to 12] you can use to define the column span of you element. If not set all elements will span to full with. You also can use .col-start-[1 to 12] and .col-end-[1 to 12] to define the staring and end point of your item.

Please not that .col-end-3 will include the tiered column and not end at the tiered column. In css .col-end-3 will be translated to grid-column-end: 4;.

<div class="grid cols gap-x-base gap-y-lg">
  <div class="bg pxy"></div>
  <div class="bg pxy"></div>
  <div class="bg pxy col-span-6"></div>
  <div class="bg pxy col-span-6"></div>
  <div class="bg pxy col-span-3"></div>
  <div class="bg pxy col-span-3"></div>
  <div class="bg pxy col-span-3"></div>
  <div class="bg pxy col-span-3"></div>
  <div class="bg pxy col-start-10 col-span-3"></div>
  <div class="bg pxy col-start-1 col-end-6"></div>
  <div class="bg pxy col-start-7 col-end-12"></div>
  <div class="bg pxy col-start-1 col-end-3"></div>
  <div class="bg pxy col-start-4 col-end-8"></div>
  <div class="bg pxy col-start-9 col-end-12"></div>
</div>

Height

Set element height.

Hidden

You can hide elements using the hidden attribute or use the .hidden class. You should prefer the attribute version for accessibility reasons.

<div hidden>Hidden element with attribute.</div>
<div class="hidden">Hidden element with class.</div>

Margin

Using margin to add margins top, right, bottom and left to your element. Possible variables are:

  • --[space] - set directly a spacing unit
  • --[space]-space - set a predefined space

Possible are:

  • mt - margin-top
  • mr - margin-right
  • mb - margin-bottom
  • ml - margin-left
<div class="bg" style="display: flow-root;">
  <div class="margin" style="background: rgb(var(--bg-color)); color: rgb(var(--font-color));">text</div>
</div>

Margin top

Using mt to add margin top to your element. Possible variables are:

  • --mt - set directly a spacing unit
  • --mt-space - set a predefined space
<div class="bg" style="display: flow-root;">
  <div class="mt" style="background: rgb(var(--bg-color)); color: rgb(var(--font-color));">text</div>
</div>

Margin right

Using mr to add margin right to your element. Possible variables are:

  • --mr - set directly a spacing unit
  • --mr-space - set a predefined space
<div class="bg" style="display: flow-root;">
  <div class="mr" style="background: rgb(var(--bg-color)); color: rgb(var(--font-color));">text</div>
</div>

Margin bottom

Using mb to add margin bottom to your element. Possible variables are:

  • --mb - set directly a spacing unit
  • --mb-space - set a predefined space
<div class="bg" style="display: flow-root;">
  <div class="mb" style="background: rgb(var(--bg-color)); color: rgb(var(--font-color));">text</div>
</div>

Margin left

Using ml to add margin left to your element. Possible variables are:

  • --ml - set directly a spacing unit
  • --ml-space - set a predefined space
<div class="bg" style="display: flow-root;">
  <div class="ml" style="background: rgb(var(--bg-color)); color: rgb(var(--font-color));">text</div>
</div>

Margin y-axis and x-axis

Using mxy to add margin for the x and y axis to your element. Possible variables are:

  • --[space] - set directly a spacing unit
  • --space-[space] - set a predefined space

Possible are:

  • my - margin-top and margin-bottom
  • mx - margin-left and margin-right
<div class="bg" style="display: flow-root;">
  <div class="mxy" style="background: rgb(var(--bg-color)); color: rgb(var(--font-color));">text</div>
</div>

Margin y-axis

Using my to add margins tob and bottom with same size to your element. Possible variables are:

  • --my - set directly a spacing unit
  • --my-space - set a predefined space
<div class="bg" style="display: flow-root;">
  <div class="my" style="background: rgb(var(--bg-color)); color: rgb(var(--font-color));">text</div>
</div>

Margin x-axis

Using mx to add margins left and right with same size to your element. Possible variables are:

  • --mx - set directly a spacing unit
  • --mx-space - set a predefined space
<div class="bg" style="display: flow-root;">
  <div class="mx" style="background: rgb(var(--bg-color)); color: rgb(var(--font-color));">text</div>
</div>

Padding

Using padding to add paddings top, right, bottom and left to your element. Possible variables are:

  • --[space] - set directly a spacing unit
  • --[space]-space - set a predefined space

Possible are:

  • pt - padding-top
  • pr - padding-right
  • pb - padding-bottom
  • pl - padding-left
<div class="padding bg"><div style="background: rgb(var(--bg-color)); color: rgb(var(--font-color));">text</div></div>

Padding top

Using pt to add padding top to your element. Possible variables are:

  • --pt - set directly a spacing unit
  • --pt-space - set a predefined space
<div class="pt bg"><div style="background: rgb(var(--bg-color)); color: rgb(var(--font-color));">text</div></div>

Padding right

Using pr to add padding right to your element. Possible variables are:

  • --pr - set directly a spacing unit
  • --pr-space - set a predefined space
<div class="pr bg"><div style="background: rgb(var(--bg-color)); color: rgb(var(--font-color));">text</div></div>

Padding bottom

Using pb to add padding bottom to your element. Possible variables are:

  • --pb - set directly a spacing unit
  • --pb-space - set a predefined space
<div class="pb bg"><div style="background: rgb(var(--bg-color)); color: rgb(var(--font-color));">text</div></div>

Padding left

Using pl to add padding left to your element. Possible variables are:

  • --pl - set directly a spacing unit
  • --pl-space - set a predefined space
<div class="pl bg"><div style="background: rgb(var(--bg-color)); color: rgb(var(--font-color));">text</div></div>

padding y-axis and x-axis

Using pxy to add padding for the x and y axis to your element. Possible variables are:

  • --[space] - set directly a spacing unit
  • --space-[space] - set a predefined space

Possible are:

  • my - padding-top and padding-bottom
  • mx - padding-left and padding-right
<div class="pxy bg"><div style="background: rgb(var(--bg-color)); color: rgb(var(--font-color));">text</div></div>

Padding y-axis

Using py to add paddings tob and bottom with same size to your element. Possible variables are:

  • --py - set directly a spacing unit
  • --py-space - set a predefined space
<div class="py bg"><div style="background: rgb(var(--bg-color)); color: rgb(var(--font-color));">text</div></div>

Padding x-axis

Using px to add paddings left and right with same size to your element. Possible variables are:

  • --px - set directly a spacing unit
  • --px-space - set a predefined space
<div class="px bg"><div style="background: rgb(var(--bg-color)); color: rgb(var(--font-color));">text</div></div>

Padding nesting

If you nest padded element, the settings will only apply to the current element.

<div class="pxy bg" style="--px-space: var(--space-xl); --py-space: var(--space-md);">
  <div class="pxy" style="background: rgb(var(--bg-color)); color: rgb(var(--font-color));">
    <div class="pxy bg">text nested</div>
  </div>
</div>

Text

Set text specific styles

Colors

Use the .tc class in combination with a color to set the text color.

<div class="tc tc-white">Text color white</div>
<div class="tc tc-black">Text color black</div>

Alignment

There are some utility classes to define text alignment.

<div class="text-left">Text left</div>
<div class="text-center">Text center</div>
<div class="text-right">Text right</div>
<div class="text-justify">Text justify - Lorem ipsum dolorsit amet, consetetur sadipscingelitr, seddiam nonumyeirmod temporinvidunt utlabore etdolore magnaaliquyamerat, seddiamvoluptua.</div>

Width (Content)

Limit width of content. Use the --width-content variable to set the width and the --width-min-offset-x to set the minimum required space on the left and right side. If you want to offset the content a little bit but keep the same settings from --width-content and --width-min-offset-x you can use the --width-content-offset variable.

Width base/content

<div class="width-content">
  <div class="bg" style="min-height: 1em"></div>
</div>

Width small

<div class="width-sm">
  <div class="bg" style="min-height: 1em"></div>
</div>

Width large

<div class="width-lg">
  <div class="bg" style="min-height: 1em"></div>
</div>

Width full

<div class="width-full">
  <div class="bg" style="min-height: 1em"></div>
</div>

Width auto

<div class="width-auto">
  <div class="bg" style="min-height: 1em"></div>
</div>

Width fit

See documntation for more details

<div class="width-fit">
  <div>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.</div>
</div>

Wrapper

You can use the wrapper class to put content inside.

<div class="wrapper"></div>

Border

Using border to add borders to all sides of your element. Possible variables are:

  • --border-t-width, --border-r-width, --border-b-width, --border-l-width - set border width directly
  • --border-t-style, --border-r-style, --border-b-style, --border-l-style - set border style
  • --border-t-color, --border-r-color, --border-b-color, --border-l-color - set border color
<div class="border">Bordered content</div>

Border top

Using bt to add border top to your element. Possible variables are:

  • --border-t-width - set border width directly
  • --border-t-style - set border style
  • --border-t-color - set border color
<div class="bt">Top border</div>

Border right

Using br to add border right to your element. Possible variables are:

  • --border-r-width - set border width directly
  • --border-r-style - set border style
  • --border-r-color - set border color
<div class="br">Right border</div>

Border bottom

Using bb to add border bottom to your element. Possible variables are:

  • --border-b-width - set border width directly
  • --border-b-style - set border style
  • --border-b-color - set border color
<div class="bb"">Bottom border</div>

Border left

Using bl to add border left to your element. Possible variables are:

  • --border-l-width - set border width directly
  • --border-l-style - set border style
  • --border-l-color - set border color
<div class="bl">Left border</div>

Border y-axis and x-axis

Using bxy to add borders for the x and y axis to your element. Possible variables are:

  • --border-x-width, --border-y-width - set border width directly
  • --border-x-style, --border-y-style - set border style
  • --border-x-color, --border-y-color - set border color
<div class="bxy">XY borders</div>

Border y-axis

Using by to add borders top and bottom with same size to your element. Possible variables are:

  • --border-y-width - set border width directly
  • --border-y-style - set border style
  • --border-y-color - set border color
<div class="by">Y-axis borders</div>

Border x-axis

Using bx to add borders left and right with same size to your element. Possible variables are:

  • --border-x-width - set border width directly
  • --border-x-style - set border style
  • --border-x-color - set border color
<div class="bx">X-axis borders</div>

Border styles

Common border style utilities for quick application.

<div class="border border-solid mt">Dashed border</div>
<div class="border border-dashed mt">Dashed border</div>
<div class="border border-dotted mt">Dashed dotted</div>
<div class="border border-none mt">Dashed none</div>

Elevation

Elevate the --bg-color variable by mixing it with the --elevate-color variable based on the --level (value from 0 to 24) variable. Additionally you can boost the elevation by using the --elevate-boost variable.

<div style="--bg-color: 0 0 0; --font-color: 255 255 255">
  <div class="elevate" style="--level: 0;">0</div>
  <div class="elevate" style="--level: 1;">1</div>
  <div class="elevate" style="--level: 2;">2</div>
  <div class="elevate" style="--level: 3;">3</div>
  <div class="elevate" style="--level: 4;">4</div>
  <div class="elevate" style="--level: 5;">5</div>
  <div class="elevate" style="--level: 6;">6</div>
  <div class="elevate" style="--level: 7;">7</div>
  <div class="elevate" style="--level: 8;">8</div>
  <div class="elevate" style="--level: 9;">9</div>
  <div class="elevate" style="--level: 10;">10</div>
  <div class="elevate" style="--level: 11;">11</div>
  <div class="elevate" style="--level: 12;">12</div>
  <div class="elevate" style="--level: 13;">13</div>
  <div class="elevate" style="--level: 14;">14</div>
  <div class="elevate" style="--level: 15;">15</div>
  <div class="elevate" style="--level: 16;">16</div>
  <div class="elevate" style="--level: 17;">17</div>
  <div class="elevate" style="--level: 18;">18</div>
  <div class="elevate" style="--level: 19;">19</div>
  <div class="elevate" style="--level: 20;">20</div>
  <div class="elevate" style="--level: 21;">21</div>
  <div class="elevate" style="--level: 22;">22</div>
  <div class="elevate" style="--level: 23;">23</div>
  <div class="elevate" style="--level: 24;">24</div>
</div>

Rounded

Using rounded to add border radius to all corners of your element. Uses the default --border-radius-base value from variables.

<div class="rounded padding bg">Rounded corners</div>

Rounded full

Using rounded-full to create circular or pill-shaped elements. Uses the --border-radius-full value for maximum rounding.

<div class="rounded-full paddding bg" style="width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center;">●</div>

Rounded none

Using rounded-none to remove border radius from an element.

<div class="rounded-none padding bg">No rounded corners</div>

Rounded sizes

Size variants for different border radius scales.

<div class="rounded-sm mt padding bg">Small rounded</div>
<div class="rounded-md mt padding bg">Medium rounded</div>
<div class="rounded-lg mt padding bg">Large rounded</div>
<div class="rounded-xl mt padding bg">Extra large rounded</div>

Shadow

A utility class for adding shadow to an element. This uses umbra, penumbra and antumbra to create the shadow. You will mainly control the shadow with:

  • --level for the shadow level (value from 0 to 24).
  • --shadow-color for the shadow color.
  • --shadow-umbra for the shadow umbra opacity.
  • --shadow-penumbra for the shadow penumbra opacity.
  • --shadow-ambient for the shadow ambient opacity.
  • --shadow-boost for the shadow boost opacity.
<div style="--shadow-color: 0 0 0;">
  <div class="shadow" style="--level: 0;">0</div>
  <div class="shadow" style="--level: 1;">1</div>
  <div class="shadow" style="--level: 2;">2</div>
  <div class="shadow" style="--level: 3;">3</div>
  <div class="shadow" style="--level: 4;">4</div>
  <div class="shadow" style="--level: 5;">5</div>
  <div class="shadow" style="--level: 6;">6</div>
  <div class="shadow" style="--level: 7;">7</div>
  <div class="shadow" style="--level: 8;">8</div>
  <div class="shadow" style="--level: 9;">9</div>
  <div class="shadow" style="--level: 10;">10</div>
  <div class="shadow" style="--level: 11;">11</div>
  <div class="shadow" style="--level: 12;">12</div>
  <div class="shadow" style="--level: 13;">13</div>
  <div class="shadow" style="--level: 14;">14</div>
  <div class="shadow" style="--level: 15;">15</div>
  <div class="shadow" style="--level: 16;">16</div>
  <div class="shadow" style="--level: 17;">17</div>
  <div class="shadow" style="--level: 18;">18</div>
  <div class="shadow" style="--level: 19;">19</div>
  <div class="shadow" style="--level: 20;">20</div>
  <div class="shadow" style="--level: 21;">21</div>
  <div class="shadow" style="--level: 22;">22</div>
  <div class="shadow" style="--level: 23;">23</div>
  <div class="shadow" style="--level: 24;">24</div>
</div>