A simple barebones utility class-based CSS library
that provides the basics without the bloat.

Support Me with a Ko-Fi

Getting Started

npm install substrat-utilCopied!

Please note: substrat-util is a personal project for myself, Michael Wilson, and is not intended for mass user adoption. If you are using this package: that’s awesome! But unforntunately, I am not providing support or taking feature requests at this time.

Once installed, include it anywhere in your project, such as your index.js or even your .scss files!

@import “substrat-util/index.css”Copied!

How substrat-util works

substrat-util works as a library meant to quickly provide commonly used layout properties. The intent with this package is to dramatically reduce initial prep and setup.

Here's how easy it is to use...

.property-name-property-value

Simply apply classes to your HTML markup based on property name and values. For example, to set an element to display as flexbox row and have it’s items set to have space between them with center alignment: set your element’s class to include .display-flex, .flex-row, .justify-content-between. and .align-items-center.

A full list of classes will be provided below.

The only aesthetically-themed classes that are provided are margin and padding-related classes.

There are 5 levels of spacing for all sides (example: px-2 (padding x-axis), my-2 (margin y-axis), pt-1 (padding top), ml-3 (margin left), etc.) and are intended to provide quick prototyping. Beyond this, any theme-related stylings will have to be written on a project-basis to fit that projects unique needs.

Using substrat-util

CSS property descriptions taken from MDN.

The width CSS property sets an element's width. By default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area.

    • .width-10
      • width: 10%
    • .width-20
      • width: 20%
    • .width-4th
      • width: 25%
    • .width-30
      • width: 30%
    • .width-3rd
      • width: 33%
    • .width-40
      • width: 40%
    • .width-50
      • width: 50%
    • .width-60
      • width: 60%
    • .width-70
      • width: 70%
    • .width-80
      • width: 80%
    • .width-90
      • width: 90%
    • .width-full
      • width: 100%
      • max-width: 100%
      • min-width: 100%
    • .width-viewport
      • width: 100vw
      • min-width: 100vw
    • .width-max-content
      • width: max-content
      • min-width: max-content
    • .width-min-content
      • width: min-content
      • min-width: min-content
    • .width-fit-content
      • width: fit-content
      • min-width: fit-content

The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area.

    • .height-10
      • height: 10%
      • min-height: 10%
    • .height-20
      • height: 20%
      • min-height: 20%
    • .height-4th
      • height: 25%
      • min-height: 25%
    • .height-30
      • height: 30%
      • min-height: 30%
    • .height-3rd
      • height: 33%
      • min-height: 33%
    • .height-40
      • height: 40%
      • min-height: 40%
    • .height-50
      • height: 50%
      • min-height: 50%
    • .height-60
      • height: 60%
      • min-height: 60%
    • .height70
      • width: 70%
      • min-height: 70%
    • .height-80
      • height: 80%
      • min-height: 80%
    • .height-90
      • height: 90%
      • min-height: 90%
    • .height-full
      • height: 100%
      • min-height: 100%
      • max-height: 100%
    • .height-viewport
      • height: 100vh
      • min-height: 100vh
    • .height-max-content
      • height: max-content
      • min-height: max-content
    • .height-min-content
      • height: min-content
      • min-height: min-content
    • .height-fit-content
      • height: fit-content
      • min-height: fit-content

The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container. The object-position CSS property specifies the alignment of the selected replaced element's contents within the element's box. Areas of the box which aren't covered by the replaced element's object will show the element's background.

  • Fit

    • .object-fit-fill
      • object-fit: fill
    • .object-fit-contain
      • object-fit: contain
    • .object-fit-cover
      • object-fit: cover
    • .object-fit-none
      • object-fit: none
    • .object-fit-scale-down
      • object-fit: scale-down
    • .object-fit-inherit
      • object-fit: inherit
    • .object-fit-initial
      • object-fit: initial
    • .object-fit-revert
      • object-fit: revert
    • .object-fit-revert-layer
      • object-fit: revert-layer
    • .object-fit-unset
      • object-fit: unset

  • Position

    • .object-position-top
      • object-postion: too
    • .object-position-bottom
      • object-postion: bottom
    • .object-position-left
      • object-postion: left
    • .object-position-right
      • object-postion: right
    • .object-position-center
      • object-postion: center
    • .object-position-inherit
      • object-postion: inherit
    • .object-position-initial
      • object-postion: initial
    • .object-position-revert
      • object-postion: revert
    • .object-position-revert-layer
      • object-postion: revert-layer
    • .object-position-unset
      • object-postion: unset

The display CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex.

    • .display-none
      • display: none
    • .display-block
      • display: block
    • .display-inline
      • display: inline
    • .display-inline-block
      • display: inline-block
    • .display-grid
      • display: grid
    • .display-inline-grid
      • display: inline-grid
    • .display-flex
      • display: flex

Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces.

  • Flex Direction

    • .flex-row
      • flex-direction: row
    • .flex-row-reverse
      • flex-direction: row-reverse
    • .flex-column
      • flex-direction: column
    • .flex-column-reverse
      • flex-direction: column-reverse

  • Flex Wrap

    • .flex-wrap
      • flex-wrap: wrap
    • .flex-wrap-reverse
      • flex-wrap: wrap-reverse
    • .flex-nowrap
      • flex-wrap: nowrap

  • Flex Gap

    • .flex-gap-sm
      • gap: 0.5rem
    • .flex-gap-1
      • gap: 1rem
    • .flex-gap-2
      • gap: 2rem
    • .flex-gap-3
      • gap: 3rem
    • .flex-gap-4
      • gap: 5rem
    • .flex-gap-5
      • gap: 8rem
    • .flex-gap-row-sm
      • row-gap: 0.5rem
    • .flex-gap-row-1
      • row-gap: 1rem
    • .flex-gap-row-2
      • row-gap: 2rem
    • .flex-gap-row-3
      • row-gap: 3rem
    • .flex-gap-row-4
      • row-gap: 5rem
    • .flex-gap-row-5
      • row-gap: 8rem
    • .flex-gap-column-sm
      • column-gap: 0.5rem
    • .flex-gap-column-1
      • column-gap: 1rem
    • .flex-gap-column-2
      • column-gap: 2rem
    • .flex-gap-column-3
      • column-gap: 3rem
    • .flex-gap-column-4
      • column-gap: 5rem
    • .flex-gap-column-5
      • column-gap: 8rem

  • Justify Content

    • .justify-content-start
      • justify-content: flex-start
    • .justify-content-between
      • justify-content: space-between
    • .justify-content-around
      • justify-content: space-around
    • .justify-content-space-evenly
      • justify-content: space-evenly
    • .justify-content-center
      • justify-content: center
    • .justify-content-end
      • justify-content: flex-end

  • Align Items

    • .align-items-start
      • align-items: start
    • .align-items-center
      • align-items: center
    • .align-items-end
      • align-items: end
    • .align-items-stretch
      • align-items: stretch
    • .align-items-baseline
      • align-items: baseline

  • Align Content

    • .align-content-start
      • align-content: flex-start
    • .align-content-end
      • align-content: flex-end
    • .align-content-center
      • align-content: flex-center
    • .align-content-space-between
      • align-content: space-between
    • .align-content-space-around
      • align-content: space-around
    • .align-content-space-evenly
      • align-content: space-evenly
    • .align-content-stretch
      • align-content: stretch

  • Align Self

    • .align-self-auto
      • align-self: auto
    • .align-self-start
      • align-self: flex-start
    • .align-self-end
      • align-self: flex-end
    • .align-self-center
      • align-self: center
    • .align-self-baseline
      • align-self: baseline
    • .align-self-stretch
      • align-self: stretch

The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

    • .opacity-1
      • opacity: 0.1
    • .opacity-1-5
      • opacity: 0.15
    • .opacity-2
      • opacity: 0.2
    • .opacity-2-5
      • opacity: 0.25
    • .opacity-3
      • opacity: 0.3
    • .opacity-3-5
      • opacity: 0.35
    • .opacity-4
      • opacity: 0.4
    • .opacity-4-5
      • opacity: 0.45
    • .opacity-5
      • opacity: 0.5
    • .opacity-5-5
      • opacity: 0.55
    • .opacity-6
      • opacity: 0.6
    • .opacity-6-5
      • opacity: 0.65
    • .opacity-7
      • opacity: 0.7
    • .opacity-7-5
      • opacity: 0.75
    • .opacity-8
      • opacity: 0.8
    • .opacity-8-5
      • opacity: 0.85
    • .opacity-9
      • opacity: 0.9
    • .opacity-9-5
      • opacity: 0.96
    • .opacity-full, .opacity-10, .opacity-100
      • opacity: 1

The padding CSS property sets the padding area of an element.

  • All Sides

    • .p-0
      • padding: 0
    • .p-sm
      • padding: 0.5rem
    • .p-1
      • padding: 1rem
    • .p-2
      • padding: 2rem
    • .p-3
      • padding: 3rem
    • .p-4
      • padding: 5rem
    • .p-5
      • padding: 8rem

  • X-Axis

    • .px-0
      • padding-left: 0
      • padding-right: 0
    • .px-sm
      • padding-left: 0.5rem
      • padding-right: 0.5rem
    • .px-1
      • padding-left: 1rem
      • padding-right: 1rem
    • .px-2
      • padding-left: 2rem
      • padding-right: 2rem
    • .px-3
      • padding-left: 3rem
      • padding-right: 3rem
    • .px-4
      • padding-left: 5rem
      • padding-right: 5rem
    • .px-5
      • padding-left: 8rem
      • padding-right: 8rem

  • Y-Axis

    • .py-0
      • padding-top: 0
      • padding-bottom: 0
    • .py-sm
      • padding-top: 0.5rem
      • padding-bottom: 0.5rem
    • .py-1
      • padding-top: 1rem
      • padding-bottom: 1rem
    • .py-2
      • padding-top: 2rem
      • padding-bottom: 2rem
    • .py-3
      • padding-top: 3rem
      • padding-bottom: 3rem
    • .py-4
      • padding-top: 5rem
      • padding-bottom: 5rem
    • .py-5
      • padding-top: 8rem
      • padding-bottom: 8rem

  • Top

    • .pt-0
      • padding-top: 0
    • .pt-sm
      • padding-top: 0.5rem
    • .pt-1
      • padding-top: 1rem
    • .pt-2
      • padding-top: 2rem
    • .pt-3
      • padding-top: 3rem
    • .pt-4
      • padding-top: 5rem
    • .pt-5
      • padding-top: 8rem

  • Bottom

    • .pb-0
      • padding-bottom: 0
    • .pb-sm
      • padding-bottom: 0.5rem
    • .pb-1
      • padding-bottom: 1rem
    • .pb-2
      • padding-bottom: 2rem
    • .pb-3
      • padding-bottom: 3rem
    • .pb-4
      • padding-bottom: 5rem
    • .pb-5
      • padding-bottom: 8rem

  • Left

    • .pl-0
      • padding-left: 0
    • .pl-sm
      • padding-left: 0.5rem
    • .pl-1
      • padding-left: 1rem
    • .pl-2
      • padding-left: 2rem
    • .pl-3
      • padding-left: 3rem
    • .pl-4
      • padding-left: 5rem
    • .pl-5
      • padding-left: 8rem

  • Right

    • .pr-0
      • padding-right: 0
    • .pr-sm
      • padding-right: 0.5rem
    • .pr-1
      • padding-right: 1rem
    • .pr-2
      • padding-right: 2rem
    • .pr-3
      • padding-right: 3rem
    • .pr-4
      • padding-right: 5rem
    • .pr-5
      • padding-right: 8rem

The margin CSS property sets the margin area of an element.

  • All Sides

    • .m-0
      • margin: 0
    • .m-sm
      • margin: 0.5rem
    • .m-1
      • margin: 1rem
    • .m-2
      • margin: 2rem
    • .m-3
      • margin: 3rem
    • .m-4
      • margin: 5rem
    • .m-5
      • margin: 8rem

  • X-Axis

    • .mx-0
      • margin-left: 0
      • margin-right: 0
    • .mx-sm
      • margin-left: 0.5rem
      • margin-right: 0.5rem
    • .mx-1
      • margin-left: 1rem
      • margin-right: 1rem
    • .mx-2
      • margin-left: 2rem
      • margin-right: 2rem
    • .mx-3
      • margin-left: 3rem
      • margin-right: 3rem
    • .mx-4
      • margin-left: 5rem
      • margin-right: 5rem
    • .mx-5
      • margin-left: 8rem
      • margin-right: 8rem

  • Y-Axis

    • .my-0
      • margin-top: 0
      • margin-bottom: 0
    • .my-sm
      • margin-top: 0.5rem
      • margin-bottom: 0.5rem
    • .my-1
      • margin-top: 1rem
      • margin-bottom: 1rem
    • .my-2
      • margin-top: 2rem
      • margin-bottom: 2rem
    • .my-3
      • margin-top: 3rem
      • margin-bottom: 3rem
    • .my-4
      • margin-top: 5rem
      • margin-bottom: 5rem
    • .my-5
      • margin-top: 8rem
      • margin-bottom: 8rem

  • Top

    • .mt-0
      • margin-top: 0
    • .mt-sm
      • margin-top: 0.5rem
    • .mt-1
      • margin-top: 1rem
    • .mt-2
      • margin-top: 2rem
    • .mt-3
      • margin-top: 3rem
    • .mt-4
      • margin-top: 5rem
    • .mt-5
      • margin-top: 8rem

  • Bottom

    • .mb-0
      • margin-bottom: 0
    • .mb-sm
      • margin-bottom: 0.5rem
    • mb-1
      • margin-bottom: 1rem
    • .mb-2
      • margin-bottom: 2rem
    • .mb-3
      • margin-bottom: 3rem
    • .mb-4
      • margin-bottom: 5rem
    • .mb-5
      • margin-bottom: 8rem

  • Left

    • .ml-0
      • margin-left: 0
    • .ml-sm
      • margin-left: 0.5rem
    • .ml-1
      • margin-left: 1rem
    • .ml-2
      • margin-left: 2rem
    • .ml-3
      • margin-left: 3rem
    • .ml-4
      • margin-left: 5rem
    • .ml-5
      • margin-left: 8rem

  • Right

    • .mr-0
      • margin-right: 0
    • .mr-sm
      • margin-right: 0.5rem
    • .mr-1
      • margin-right: 1rem
    • .mr-2
      • margin-right: 2rem
    • .mr-3
      • margin-right: 3rem
    • .mr-4
      • margin-right: 5rem
    • .mr-5
      • margin-right: 8rem

The border-radius CSS property rounds the corners of an element's outer border edge.

  • All Corners

    • .border-radius-0
      • border-radius: 0px
    • .border-radius-1
      • border-radius: 3px
    • .border-radius-2
      • border-radius: 5px
    • .border-radius-3
      • border-radius: 10px
    • .border-radius-4
      • border-radius: 25px
    • .border-radius-5
      • border-radius: 100%

  • Top Left

    • .border-radius-tl-0
      • border-top-left-radius: 0px
    • .border-radius-tl-1
      • border-top-left-radius: 3px
    • .border-radius-tl-2
      • border-top-left-radius: 5px
    • .border-radius-tl-3
      • border-top-left-radius: 10px
    • .border-radius-tl-4
      • border-top-left-radius: 25px
    • .border-radius-tl-5
      • border-top-left-radius: 100%

  • Top Right

    • .border-radius-tr-0
      • border-top-right-radius: 0px
    • .border-radius-tr-1
      • border-top-right-radius: 3px
    • .border-radius-tr-2
      • border-top-right-radius: 5px
    • .border-radius-tr-3
      • border-top-right-radius: 10px
    • .border-radius-tr-4
      • border-top-right-radius: 25px
    • .border-radius-tr-5
      • border-top-right-radius: 100%

  • Bottom Right

    • .border-radius-br-0
      • border-bottom-right-radius: 0px
    • .border-radius-br-1
      • border-bottom-right-radius: 3px
    • .border-radius-br-2
      • border-bottom-right-radius: 5px
    • .border-radius-br-3
      • border-bottom-right-radius: 10px
    • .border-radius-br-4
      • border-bottom-right-radius: 25px
    • .border-radius-br-5
      • border-bottom-right-radius: 100%

  • Bottom Left

    • .border-radius-bl-0
      • border-bottom-left-radius: 0px
    • .border-radius-bl-1
      • border-bottom-left-radius: 3px
    • .border-radius-bl-2
      • border-bottom-left-radius: 5px
    • .border-radius-bl-3
      • border-bottom-left-radius: 10px
    • .border-radius-bl-4
      • border-bottom-left-radius: 25px
    • .border-radius-bl-5
      • border-bottom-left-radius: 100%

The overflow CSS property sets the desired behavior when content does not fit in the parent element box (overflows) in the horizontal and/or vertical direction.

    • .overflow-visible
      • overflow: visible
    • .overflow-hidden
      • overflow: hidden
    • .overflow-scroll
      • overflow: scroll
    • .overflow-visible
      • overflow: auto

  • Y-Axis

    • .overflow-y-visible
      • overflow-y: visible
    • .overflow-y-hidden
      • overflow-y: hidden
    • .overflow-y-scroll
      • overflow-y: scroll
    • .overflow-y-visible
      • overflow-y: auto

  • X-Axis

    • .overflow-x-visible
      • overflow-x: visible
    • .overflow-x-hidden
      • overflow-x: hidden
    • .overflow-x-scroll
      • overflow-x: scroll
    • .overflow-x-visible
      • overflow-x: auto