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.

Prefixes are usually written using the initials of a property name. i.e.: ta means text-align; mb means margin-bottom, etc.
When not specified, default unit is rem
Other possible suffixes (units) are em, vh and pct (%)
Classes whose value is NOT a number, use a dash(-)
Classes whose value is a number, do not use a dash(-). Except for Grid classes
Numbers are usually decimals under 4, whose decimal mark is ignored. i.e.: .mt15 means margin-top of 1.5rem

Quick Reference

Below is all you need to understand and use funcssion:

—

Spacing

In margin and padding:

rem units range from 0 ~ 2 every .1 and 2.5 ~ 4 every .5
em units range from 0.1 ~ 1 every .1

Numeric

Prefix	Properties
.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:

rem units range from 0.4 ~ 2 every .1 and 2.5 ~ 4 every .5
em units range from 0.4 ~ 2 every .1

Font Size & Line Height

Prefix	Property
.fs	font-size
.lh	line-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 Name	Example
.h1	h1 Heading
.h2	h2 Heading
.h3	h3 Heading
.h4	h4 Heading
.h5	h5 Heading
.h6	h6 Heading

Font Weight

Class Name	Meaning
.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 Name	Meaning
.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 Name	Meaning
.fs-normal	`{ font-style: normal; }`
.fs-italic	`{ font-style: italic; }`
.fs-oblique	`{ font-style: oblique; }`

Font Variant

Class Name	Meaning
.fv-normal	`{ font-variant: normal; }`
.fv-small-caps	`{ font-variant: small-caps; }`

Text Alignment

Class Name	Meaning
.ta-center	`{ text-align: center; }`
.ta-left	`{ text-align: left; }`
.ta-right	`{ text-align: right; }`
.ta-justify	`{ text-align: justify; }`

Text Decoration

Class Name	Meaning
.td-none	`{ text-decoration: none; }`
.td-underline	`{ text-decoration: underline; }`
.td-overline	`{ text-decoration: overline; }`

Text Transform

Class Name	Meaning
.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 Name	Meaning
.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 Name	Meaning
.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 Name	Meaning
.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 Name	Meaning
.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 Name	Meaning
.v-visible	`{ visibility: visible; }`
.v-hidden	`{ visibility: hidden; }`
.v-collapse	`{ visibility: collapse; }`

Box Sizing

Class Name	Meaning
.bs-border-box	`{ box-sizing: border-box; }`
.bs-content-box	`{ box-sizing: content-box; }`

Opacity

Class Name	Meaning
.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 Name	Meaning
.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 Name	Meaning
.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 Name	Meaning
.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 Name	Meaning
.br0	`{ border-radius: 0; }`

—

Miscellaneous

Class Name	Meaning
.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