Fylgja component - Utilpack - Default utility classes

Here you will find all default utility classes.

If you looking for how to modify theme or unset them.

Then please check out the main docs here.

Typography  # 

Text Color  # 

classvalue
text-resetcolor: currentColor;

Text Decoration  # 

classvalue
underlinetext-decoration: underline;
line-throughtext-decoration: line-through;
no-underlinetext-decoration: none;

It also has the following options available:

  • Responsive classes

Text Align  # 

classvalue
text-starttext-align: start;
text-centertext-align: center;
text-endtext-align: end;

It also has the following options available:

  • Responsive classes

Vertical Align  # 

classvalue
align-baselinevertical-align: baseline;
align-topvertical-align: top;
align-middlevertical-align: middle;
align-bottomvertical-align: bottom;
align-text-topvertical-align: text-top;
align-text-bottomvertical-align: text-bottom;

It also has the following options available:

  • Responsive classes

Text Wrap  # 

classvalue
text-wrapwhite-space: wrap;
text-nowrapwhite-space: nowrap;

It also has the following options available:

  • Responsive classes

Text Break  # 

classvalue
break-normaloverflow-wrap: normal;
break-wordoverflow-wrap: break-word;
break-anyoverflow-wrap: anywhere;
break-autohyphens: auto;

It also has the following options available:

  • Responsive classes

Font Weight  # 

classvalue
weight-thinfont-weight: 100;
weight-extralightfont-weight: 200;
weight-lightfont-weight: 300;
weight-normalfont-weight: 400;
weight-strongfont-weight: 500;
weight-semiboldfont-weight: 600;
weight-boldfont-weight: 700;
weight-extraboldfont-weight: 800;
weight-blackfont-weight: 900;
weight-lighterfont-weight: lighter;
weight-bolderfont-weight: bolder;

It also has the following options available:

  • Responsive classes

Font Style  # 

classvalue
slant-normalfont-style: normal;
slant-italicfont-style: italic;

It also has the following options available:

  • Responsive classes

Spacers  # 

Spacer have been around for some time, and are on of the most useful utilities when used to with CSS components.

Available sizes for the Margin, Padding and Space utilities.

classvalue
{PREFIX}-0{PROPERTY}: 0;
{PREFIX}-1{PROPERTY}: 0.25em;
{PREFIX}-2{PROPERTY}: 0.5em;
{PREFIX}-3{PROPERTY}: 0.75em;
{PREFIX}-4{PROPERTY}: 1em;
{PREFIX}-5{PROPERTY}: 1.25em;
{PREFIX}-6{PROPERTY}: 1.5em;
{PREFIX}-7{PROPERTY}: 1.75em;
{PREFIX}-8{PROPERTY}: 2em;
{PREFIX}-9{PROPERTY}: 2.25em;
{PREFIX}-10{PROPERTY}: 2.5em;
{PREFIX}-11{PROPERTY}: 2.75em;
{PREFIX}-12{PROPERTY}: 3em;

To extend this, use the $utilpack-spacers map.

Margin  # 

The following options/direction are available.

  • m = margin
  • my = margin-block-start margin-block-end
  • mt = margin-block-start
  • mb = margin-block-end
  • mx = margin-inline-start margin-inline-end
  • ms = margin-inline-start
  • me = margin-inline-end

Each option is using the writing direction. in LTR margin-inline-start is the same as margin-left.

It also has the following options available:

  • Responsive classes

Padding  # 

The following options/direction are available.

  • p = padding
  • py = padding-block-start padding-block-end
  • pt = padding-block-start
  • pb = padding-block-end
  • px = padding-inline-start padding-inline-end
  • ps = padding-inline-start
  • pe = padding-inline-en

Each option is using the writing direction. in LTR padding-inline-start is the same as padding-left.

It also has the following options available:

  • Responsive classes

Space  # 

Space works similar to the margin y and x version, Except you can set the class on parent element.

This class will give each child after another child spacing per the value. Similar to the gap property. Except this can also be used on elements that are not part of a grid or flex container.

The following options/direction are available.

  • space-y = margin-block-start
  • space-x = margin-inline-start

Each option is using the writing direction. in LTR margin-inline-start is the same as margin-left.

It also has the following options available:

  • Responsive classes

Border  # 

Available sizes for the border utility.

classvalue
{PREFIX}{PROPERTY}: 1px var(--border-style, solid) var(--border-color, currentColor);
{PREFIX}-0{PROPERTY}: 0;
{PREFIX}-2{PROPERTY}: 2px var(--border-style, solid) var(--border-color, currentColor);
{PREFIX}-3{PROPERTY}: 3px var(--border-style, solid) var(--border-color, currentColor);

To extend this, use the $utilpack-border-sizes map.

The following options/direction are available.

  • border
  • border-block-start
  • border-block-end
  • border-inline-start
  • border-inline-end

Each option is using the writing direction. in LTR border-inline-start is the same as border-left.

It also has the following options available:

  • Responsive classes

Divider  # 

Divider works similar to the border-block-start and border-inline-start, Except you can set the class on parent element.

This class will give each child after another child a border per the value.

The following options/direction are available.

  • divider-y = border-block-start
  • divider-x = border-inline-start

Each option is using the writing direction. in LTR border-inline-start is the same as border-left.

It also has the following options available:

  • Responsive classes

Sizing  # 

Available sizes for the width and height utilities.

classvalue
{PREFIX}-auto{PROPERTY}: auto;
{PREFIX}-none{PROPERTY}: 0;
{PREFIX}-25{PROPERTY}: 25%;
{PREFIX}-33{PROPERTY}: calc(100% / 3);
{PREFIX}-50{PROPERTY}: 50%;
{PREFIX}-66{PROPERTY}: calc(100% / 1.5);
{PREFIX}-75{PROPERTY}: 75%;
{PREFIX}-full{PROPERTY}: 1.75em;
{PREFIX}-screen{PROPERTY}: 100vh;

Available sizes for the min-width and min-height utilities.

classvalue
min-{PREFIX}-nonemin-{PROPERTY}: 0;
min-{PREFIX}-fullmin-{PROPERTY}: 1.75em;
min-{PREFIX}-screenmin-{PROPERTY}: 100vh;

Available sizes for the max-width and max-height utilities.

classvalue
max-{PREFIX}-nonemax-{PROPERTY}: 0;
max-{PREFIX}-fullmax-{PROPERTY}: 1.75em;
max-{PREFIX}-screenmax-{PROPERTY}: 100vh;

It also has the following options available:

  • Responsive classes

Layout  # 

Float  # 

classvalue
float-rightfloat: right;
float-leftfloat: left;
float-nonefloat: none;

It also has the following options available:

  • Responsive classes

Tip1: although we use flex or grid for many layouts. Floats still have there uses with inline image in a article and more.

Tip2: Use the flow-root class as a wrapper to keep everting inside the box and clear for inline element that may not have any floating elements next to it.

Clear  # 

classvalue
clear-rightclear: right;
clear-leftclear: left;
clear-bothclear: both;
clear-noneclear: none;

It also has the following options available:

  • Responsive classes

Overflow  # 

classvalue
overflow-autooverflow: auto;
overflow-hiddenoverflow: hidden;
overflow-visibleoverflow: visible;
overflow-scrolloverflow: scroll;

Or use the overflow-y and overflow-x version.

Position  # 

classvalue
staticposition: static;
relativeposition: relative;
absoluteposition: absolute;
fixedposition: fixed;
stickyposition: sticky;

The Utilpack also ship's with the position inset options;

  • inset
  • top
  • right
  • bottom
  • left
  • inset-y
  • inset-x

the inset property still uses the older spec until the newer spec is better supported.

And the following values are available;

classvalue
{PREFIX}-auto{PROPERTY}: auto;
{PREFIX}-0{PROPERTY}: 0;
{PREFIX}-50{PROPERTY}: 50%;
{PREFIX}-full{PROPERTY}: 100%;

To extend this, use the $utilpack-positions map.

It also has the following options available:

  • Responsive classes

Z Index  # 

classvalue
z-autoz-index: auto;
z-0z-index: 0;
z-1z-index: 1;
z-2z-index: 2;
z-3z-index: 3;
z-4z-index: 4;
z-5z-index: 5;

In case you need the index dept value to be bigger, like 10, 20 and 30. Simply change the $utilpack-index-dept variable from 1 to 10.

Display Layout  # 

Display  # 

classvalue
blockdisplay: block;
hiddendisplay: none;
inline-blockdisplay: inline-block;
flexdisplay: flex;
inline-flexdisplay: inline-flex;
flow-rootdisplay: flow-root;

Grid is not by default part of this group. And should be part of it own utility or component.

It also has the following options available:

  • Responsive classes

Visibility  # 

classvalue
invisiblevisibility: invisible;
visiblevisibility: visible;

It also has the following options available:

  • Responsive classes

Media Layout (Images, Video)  # 

Object Fit  # 

classvalue
object-containobject-fit: contain;
object-coverobject-fit: cover;
object-fillobject-fit: fill;
object-noneobject-fit: none;
object-scale-downobject-fit: scale-down;

Object Position  # 

classvalue
object-topobject-position: top;
object-rightobject-position: right;
object-bottomobject-position: bottom;
object-leftobject-position: left;

Flex  # 

Direction  # 

classvalue
flex-rowflex-direction: row;
flex-row-reverseflex-direction: row-reverse;
flex-colflex-direction: column;
flex-col-reverseflex-direction: column-reverse;

It also has the following options available:

  • Responsive classes

Wrap  # 

classvalue
flex-nowrapflex-wrap: nowrap;
flex-wrapflex-wrap: wrap;
flex-wrap-reverseflex-wrap: wrap-reverse;

It also has the following options available:

  • Responsive classes

Flex Size  # 

classvalue
flex-fillflex: 1 1 0%;
flex-autoflex: 1 1 auto;
flex-shrinkflex: 0 0 auto;
flex-growflex: 1 0 auto;
flex-initialflex: 0 1 auto;
flex-noneflex: none;

It also has the following options available:

  • Responsive classes

Order  # 

classvalue
order-firstorder: -1;
order-0order: 0;
order-1order: 1;
order-lastorder: 9;

It also has the following options available:

  • Responsive classes

Box Alignment (Flex & Grid)  # 

Justify Content  # 

classvalue
justify-startjustify-content: flex-start;
justify-endjustify-content: flex-end;
justify-centerjustify-content: center;
justify-betweenjustify-content: space-between;
justify-aroundjustify-content: space-around;
justify-evenlyjustify-content: space-evenly;

It also has the following options available:

  • Responsive classes

Justify Items  # 

classvalue
justify-items-startjustify-items: start;
justify-items-endjustify-items: end;
justify-items-centerjustify-items: center;
justify-items-stretchjustify-items: stretch;

It also has the following options available:

  • Responsive classes

Justify Self  # 

classvalue
justify-self-startjustify-self: start;
justify-self-endjustify-self: end;
justify-self-centerjustify-self: center;
justify-self-stretchjustify-self: stretch;

It also has the following options available:

  • Responsive classes

Align Content  # 

classvalue
content-startalign-content: flex-start;
content-endalign-content: flex-end;
content-centeralign-content: center;
content-betweenalign-content: space-between;
content-aroundalign-content: space-around;
content-evenlyalign-content: space-evenly;

It also has the following options available:

  • Responsive classes

Align Items  # 

classvalue
items-startalign-items: flex-start;
items-endalign-items: flex-end;
items-centeralign-items: center;
items-baselinealign-items: baseline;
items-stretchalign-items: stretch;

It also has the following options available:

  • Responsive classes

Align Self  # 

classvalue
self-startalign-self: flex-start;
self-endalign-self: flex-end;
self-centeralign-self: center;
self-stretchalign-self: stretch;

It also has the following options available:

  • Responsive classes

Responsive classes  # 

Each util that supports it, als ship with a responsive class.

For more on what it can do see the main utilpack docs here ->

Noticed a typo or is something unclear? Help us improve this page on GitHub.