figment-framewind – CSS Utility Framework – Class Reference

Tailwind style rewrite of the previous CSS framework, classes names also reduced

{breakpoint}:{utility}
md:flex
lg:col-6

Layout

Row / Columns

.row
.col
{bp}:col-{0–12}
{bp}:order-{0–12}
{bp}:gap-{0–40}
{bp}:offset-{0–12}
{bp}:offsetr-{0–12}
{bp}:offsetx-{0–12}
.no-gutters

Display

{bp}:none
{bp}:block
{bp}:inline-block
{bp}:flex
{bp}:inline-flex

Flexbox

Direction & Wrap

{bp}:flex-row
{bp}:flex-column
{bp}:flex-wrap
{bp}:flex-nowrap
{bp}:flex-fill

Justify Content

{bp}:content-start
{bp}:content-end
{bp}:content-center
{bp}:content-between
{bp}:content-around

Align Items

{bp}:items-start
{bp}:items-end
{bp}:items-center
{bp}:items-baseline
{bp}:items-stretch

Visibility

.visible
{bp}:visible
{bp}:hidden

Overflow

{bp}:overflow-auto
{bp}:overflow-hidden
{bp}:overflow-visible

Position

{bp}:static
{bp}:relative
{bp}:absolute
{bp}:fixed

Position Offsets (Top/Right/Bottom/Left)

Pixels (add "p" to use percentage)
{bp}:t-{-200–200}
{bp}:r-{-200–200}
{bp}:b-{-200–200}
{bp}:l-{-200–200}

Spacing

Margin

{bp}:m-{-200–200}
{bp}:mt-{-200–200}
{bp}:mb-{-200–200}
{bp}:ml-{-200–200}
{bp}:mr-{-200–200}
{bp}:mx-{-200–200}
{bp}:my-{-200–200}
{bp}:m-auto

Padding

{bp}:p-{0–200}
{bp}:pt-{0–200}
{bp}:pb-{0–200}
{bp}:pl-{0–200}
{bp}:pr-{0–200}
{bp}:px-{0–200}
{bp}:py-{0–200}

Webapp Spacing & utilities (CSS Variables)

.mt-webapp
.mb-webapp
.my-webapp
.pt-webapp
.pb-webapp
.py-webapp
.my-spacer-s{1–5}
.mt-spacer-s{1–5}
.mb-spacer-s{1–5}
.py-spacer-s{1–5}
.pt-spacer-s{1–5}
.pb-spacer-s{1–5}

Width / Height

Width

{bp}:w-auto
{bp}:w-{0–200}
{bp}:w-{0–200}p
{bp}:vw-{0–200}
{bp}:minw-{...}
{bp}:maxw-{...}

Height

{bp}:h-auto
{bp}:h-{0–200}
{bp}:h-{0–200}p
{bp}:vh-{0–200}
{bp}:minh-{...}
{bp}:maxh-{...}

Borders

{bp}:b-a-{0–10}
{bp}:b-t-{0–10}
{bp}:b-b-{0–10}
{bp}:b-l-{0–10}
{bp}:b-r-{0–10}

Border radius

{bp}:br-{0–200}
{bp}:br-t-{0–200}
{bp}:br-b-{0–200}
{bp}:br-tl-{0–200}
{bp}:br-tr-{0–200}
{bp}:br-bl-{0–200}
{bp}:br-br-{0–200}
{bp}:br-{0–100}p

Float

{bp}:fl-left
{bp}:fl-right
{bp}:fl-none

Transform / Translate

{bp}:translateC
{bp}:translateX-{-200–200}
{bp}:translateY-{-200–200}

Opacity

{bp}:o-{0–100}

Z-Index

{bp}:z-{-1–100}

Typography

Alignment

{bp}:text-left
{bp}:text-right
{bp}:text-center
{bp}:text-justify

White Space

{bp}:text-wrap
{bp}:text-nowrap

Transform & Style

.text-lowercase
.text-uppercase
.text-capitalize
.text-initial
.text-underline
.text-italic

Font Weight

.fw-light
.fw-regular
.fw-medium
.fw-semibold
.fw-bold
.fw-extrabold
.fw-bolder
.fw-black

Font Size & Line Height

{bp}:fs-{0–200}
{bp}:lh-{0–200}
.lh-0
.lh-1
.lh-1-10 ... lh-2

Letter Spacing

{bp}:ls-{0–250}

Background Utilities

{bp}:bgpos-{left|center|right}-{top|center|bottom}
{bp}:bgsize-100-auto
{bp}:bgsize-auto-100
{bp}:bgsize-contain

Embed / Aspect Ratios

.embed-responsive
.embed-responsive-1by1
.embed-responsive-16by9
.embed-responsive-4by3

Misc Utilities

.will-change
.no-events
.img-center
.same-height

Animation

{bp}:transition-{0–2000}ms
{bp}:delay-{0–2000}ms
{bp}:duration-{0–2000}ms

Lists

ul.no-style
ul.no-styles