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.

means ; means , etc. When not specified, default unit is rem

Other possible suffixes (units) are em , vh and pct (%)

(units) are , and (%) 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

. 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

units range from every and every 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

units range from every and every 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; }