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.
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:
—
SpacingIn 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;
}
—
TextIn 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; }
|
—
PositioningClass 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; }
|
—
ColorsClass 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; }
|
—
DisplayingDisplay
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; }
|
—
GridClass 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%; }
|
—
SizingClass 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; }
|
—
BordersBorder 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; }
|
—
MiscellaneousClass 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; }
|