funcssion
The atomic CSS library

funcssion is a set of really simple CSS classes, with a single purpose, inspired by the philosophy behind pure functions.

This basically means, they attempt to avoid side-effects.

It's not a full-fledged CSS framework, but rather a very handy set of classes that'll help you prototype really fast and understand what your components look like just by looking at your HTML code, not browsing through endless, repetitive CSS files and classes.

Get v0.1 here
4.4kB gzipped


Star
Use it

Simply include the following tag in your HTML document to include the latest version*:

<link href="https://funcssion.com/css/funcssion.css" rel="stylesheet">
* A CDNJS link is preferred but not yet available.
How It Works

funcssion does not perform any kind of reset over HTML elements. Its use, together with other CSS frameworks/libraries or code of your own, is non-invasive, thus perfectly viable. All classes set just one or two properties. Most just set one.

Most classes are named using a prefix and a mix of the following: an orientation, a dash (-), a possible value of the property or a suffix (unit). Some examples are:

.va-middle {
  vertical-align: middle;
}

.pr1 {
  padding-right: 1rem;
}

.mv12 {
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
}

Other classes are simply values of properties that are unambiguous and pretty common in CSS, such as:

.inline-block {
  display: inline-block;
}

.absolute {
  position: absolute;
}
The Rules

Just keep these in mind and it'll help you memorize the class names, or intuitively deduce them.

Quick Reference

Below is all you need to understand and use funcssion:

Spacing

In margin and padding:

Numeric
PrefixProperties
.m
margin
.mt
margin-top
.mr
margin-right
.mb
margin-bottom
.ml
margin-left
.mv
margin-top margin-bottom
.mh
margin-left margin-right
.p
padding
.pt
padding-top
.pr
padding-right
.pb
padding-bottom
.pl
padding-left
.pv
padding-top padding-bottom
.ph
padding-left padding-right
Examples
.mv14 {
  margin-top: 1.4rem;
  margin-bottom: 1.4rem;
}
.mh2 {
  margin-left: 2rem;
  margin-right: 2rem;
}
.m3 {
  margin: 3rem;
}
.m0 {
  margin: 0;
}

.p0 {
  padding: 0;
}
.pt08 {
  padding-top: 0.8rem;
}
.p25 {
  padding: 2.5rem;
}
.p4 {
  padding: 4rem;
}
Text

In font-size and line-height:

Font Size & Line Height
PrefixProperty
.fsfont-size
.lhline-height
Examples
.fs11 {
  font-size: 1.1rem;
}
.fs09em {
  font-size: 0.9em;
}

.lh15 {
  line-height: 1.5rem;
}
.lh2em {
  line-height: 2em;
}
Headings

Heading classes are intended to be "similar" to the tags themselves, so that <h1> and <div class="h1"> are equivalent.

Class NameExample
.h1
h1 Heading
.h2
h2 Heading
.h3
h3 Heading
.h4
h4 Heading
.h5
h5 Heading
.h6
h6 Heading
Font Weight
Class NameMeaning
.fw-normal
{ font-weight: normal; }
.fw-bold
{ font-weight: bold; }
.fw-lighter
{ font-weight: lighter; }
.fw100
{ font-weight: 100; }
.fw200
{ font-weight: 200; }
.fw300
{ font-weight: 300; }
.fw400
{ font-weight: 400; }
.fw500
{ font-weight: 500; }
.fw600
{ font-weight: 600; }
.fw700
{ font-weight: 700; }
.fw800
{ font-weight: 800; }
.fw900
{ font-weight: 900; }
Font Family
Class NameMeaning
.ff-sans-serif
{ font-family: sans-serif; }
.ff-serif
{ font-family: serif; }
.ff-monospace
{ font-family: monospace; }
.ff-cursive
{ font-family: cursive; }
.ff-fantasy
{ font-family: fantasy; }
.ff-system
{ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, Helvetica,Arial, sans-serif, "Apple Color Emoji",
		"Segoe UI Emoji", "Segoe UI Symbol"; }
Font Style
Class NameMeaning
.fs-normal
{ font-style: normal; }
.fs-italic
{ font-style: italic; }
.fs-oblique
{ font-style: oblique; }
Font Variant
Class NameMeaning
.fv-normal
{ font-variant: normal; }
.fv-small-caps
{ font-variant: small-caps; }
Text Alignment
Class NameMeaning
.ta-center
{ text-align: center; }
.ta-left
{ text-align: left; }
.ta-right
{ text-align: right; }
.ta-justify
{ text-align: justify; }
Text Decoration
Class NameMeaning
.td-none
{ text-decoration: none; }
.td-underline
{ text-decoration: underline; }
.td-overline
{ text-decoration: overline; }
Text Transform
Class NameMeaning
.tt-none
{ text-transform: none; }
.tt-uppercase
{ text-transform: uppercase; }
.tt-lowercase
{ text-transform: lowercase; }
.tt-capitalize
{ text-transform: capitalize; }
.tt-inherit
{ text-transform: inherit; }
Positioning
Class NameMeaning
.absolute
{ position: absolute; }
.relative
{ position: relative; }
.fixed
{ position: fixed; }
.flex
{ display: flex; }
.flex-items-center
{ align-items: center; }
.fl-left
{ float: left; }
.fl-right
{ float: right; }
.top0
{ top: 0; }
.right0
{ right: 0; }
.bottom0
{ bottom: 0; }
.left0
{ left: 0; }
.top-auto
{ top: auto; }
.right-auto
{ right: auto; }
.bottom-auto
{ bottom: auto; }
.left-auto
{ left: auto; }
.va-middle
{ vertical-align: middle; }
.va-top
{ vertical-align: top; }
.va-bottom
{ vertical-align: bottom; }
.va-baseline
{ vertical-align: baseline; }
Colors
Class NameMeaning
.cl-text
{ color: #888; }
.cl-title
{ color: #333; }
.cl-contrast
{ color: white; }
.bg-text
{ background: #888; }
.bg-title
{ background: #333; }
.bg-contrast
{ background: white; }
Displaying
Display
Class NameMeaning
.none
{ display: none; }
.block
{ display: block; }
.contents
{ display: contents; }
.flex
{ display: flex; }
.flow-root
{ display: flow-root; }
.grid
{ display: grid; }
.inline
{ display: inline; }
.inline-block
{ display: inline-block; }
.inline-flex
{ display: inline-flex; }
.inline-grid
{ display: inline-grid; }
.inline-table
{ display: inline-table; }
.list-item
{ display: list-item; }
.run-in
{ display: run-in; }
.table
{ display: table; }
.table-caption
{ display: table-caption; }
.table-cell
{ display: table-cell; }
.table-column
{ display: table-column; }
.table-column-group
{ display: table-column-group; }
.table-footer-group
{ display: table-footer-group; }
.table-header-group
{ display: table-header-group; }
.table-row
{ display: table-row; }
.table-row-group
{ display: table-row-group; }
Overflow
Class NameMeaning
.of-hidden
{ overflow: hidden; }
.of-visible
{ overflow: visible; }
.of-scroll
{ overflow: scroll; }
.of-auto
{ overflow: auto; }
.ofx-hidden
{ overflow-x: hidden; }
.ofx-visible
{ overflow-x: visible; }
.ofx-scroll
{ overflow-x: scroll; }
.ofx-auto
{ overflow-x: auto; }
.ofy-hidden
{ overflow-y: hidden; }
.ofy-visible
{ overflow-y: visible; }
.ofy-scroll
{ overflow-y: scroll; }
.ofy-auto
{ overflow-y: auto; }
Visibility
Class NameMeaning
.v-visible
{ visibility: visible; }
.v-hidden
{ visibility: hidden; }
.v-collapse
{ visibility: collapse; }
Box Sizing
Class NameMeaning
.bs-border-box
{ box-sizing: border-box; }
.bs-content-box
{ box-sizing: content-box; }
Opacity
Class NameMeaning
.op0
{ opacity: 0; }
.op01
{ opacity: 0.1; }
.op02
{ opacity: 0.2; }
.op03
{ opacity: 0.3; }
.op04
{ opacity: 0.4; }
.op05
{ opacity: 0.5; }
.op06
{ opacity: 0.6; }
.op07
{ opacity: 0.7; }
.op08
{ opacity: 0.8; }
.op09
{ opacity: 0.9; }
.op1
{ opacity: 1; }
Grid
Class NameMeaning
.col-0
{ width: 0%; }
.col-1
{ width: 8.33333%; }
.col-2
{ width: 16.66667%; }
.col-3
{ width: 25%; }
.col-4
{ width: 33.33334%; }
.col-5
{ width: 41.66667%; }
.col-6
{ width: 50%; }
.col-7
{ width: 58.33334%; }
.col-8
{ width: 66.66667%; }
.col-9
{ width: 75%; }
.col-10
{ width: 83.33334%; }
.col-11
{ width: 91.66667%; }
.col-12
{ width: 100%; }
.col-left-1
{ margin-left: 8.33333%; }
.col-left-2
{ margin-left: 16.66667%; }
.col-left-3
{ margin-left: 25%; }
.col-left-4
{ margin-left: 33.33334%; }
.col-left-5
{ margin-left: 41.66667%; }
.col-left-6
{ margin-left: 50%; }
.col-left-7
{ margin-left: 58.33334%; }
.col-left-8
{ margin-left: 66.66667%; }
.col-left-9
{ margin-left: 75%; }
.col-left-10
{ margin-left: 83.33334%; }
.col-left-11
{ margin-left: 91.66667%; }
.col-left-12
{ margin-left: 100%; }
Sizing
Class NameMeaning
.w100pct
{ width: 100%; }
.w-auto
{ width: auto; }
.h100vh
{ height: 100vh; }
.h100pct
{ height: 100%; }
.h-auto
{ height: auto; }
.mw100pct
{ max-width: 100%; }
.mw-auto
{ max-width: auto; }
Borders
Border Style
Class NameMeaning
.bs-solid
{ border-style: solid; }
.bs-dashed
{ border-style: dashed; }
.bs-dotted
{ border-style: dotted; }
.bs-double
{ border-style: double; }
.bs-groove
{ border-style: groove; }
.bs-hidden
{ border-style: hidden; }
.bs-inset
{ border-style: inset; }
.bs-none
{ border-style: none; }
.bs-outset
{ border-style: outset; }
.bs-ridge
{ border-style: ridge; }
Border Radius
Class NameMeaning
.br0
{ border-radius: 0; }
Miscellaneous
Class NameMeaning
.hr
{ border-top: 1px solid rgba(0,0,0,0.08); }
.circular
{ border-radius: 50%; }
.cursor-auto
{ cursor: auto; }
.cursor-default
{ cursor: default; }
.cursor-not-allowed
{ cursor: not-allowed; }
.cursor-pointer
{ cursor: pointer; }
.cursor-text
{ cursor: text; }
.cursor-wait
{ cursor: wait; }
Extras

Additional sets of classes such as a responsive grid, buttons, etc. are still in the works and will be documented soon.

By @jasalo