flecss

flecss is a minimalist and straightforward (S)CSS framework.

flecss is both a CSS library, and a related SCSS build interface.
Less granular than Bootstrap or Tailwind, it merely exposes highly resuable styles common for web-based designs1. All-flexbox layouting, paired with a novel all-in-one class syntax enable simple and intuitive usage. Anything else is left to individual stylesheets.

📦   flecss ships with a total of 82kB, compared to Bootstrap with 248kB2.

Integration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flecss/dist/flecss.css">

As usual for a CSS library, styles can be assigned through inbuilt classes. flecss classes introduce a handy all-in-one syntax. A class fundamentally consists of a style identifier <identifier>. An identifier – which is either fully a qualified name, or a respective shorthand – depicts the class' purpose (e.g. padding). An identifier-only class usage fulfills the most generic style of a purpose (e.g. padding to all sides). Optionally, a specifier _<specifier>, and a space modifier --<modifier> may be declared in addition – in that order. A specifier defines a certain styling target (e.g. top to only pad at the top). A (space) modifier – if applicable – changes the effective space property that is related to the style (e.g. the padding size). Valid class names would thus comply with one of the following formats:

  • .<identifier>
  • .<identifier>_<specifier>
  • .<identifier>--<modifier>
  • .<identifier>_<specifier>--<modifier>

The following format is particularly invalid:

  • .<identifier>--<modifier>_<specifier>.
flecss.css

All of flecss: classes are accessible both through fully qualified, or shorthand names.
flecss.min.css

Classes are accessible only through fully qualified names. Modifiers all short (e.g. xl)
flecss.min.shorthand.css

Classes are accessible only through shorthand names.

ℹ️   flecss applies a few CSS resets (see _reset.scss).

Example

<section class="section"> <div class="wrapper--xl"> <h1>flecss</h1> <h2 class="m_top--xs viewport_not-s">About</h2> </div> </section>

SCSS Interface

npm install -D flecss

flecss comes with a mature build interface for SCSS to allow some customisation. Working with flecss on SCSS level furthermore enables custom overrides of the global flecss variables (e.g. --flecss__fontsize--l). In fact, flecss can even be used as a standalone SCSS transpiler.

ℹ️   The flecss build interface bases on the sass transpiler, as well as the clean-css optimiser.

CLI Recommended

npx flecss <path:source> <path:target> [--<arg>|-<arg:shorthand> *?]*
Argument Description
--standalone -S flag Build without including flecss.
--watch -W flag Watch file changes for incremental builds.
--library -L option Specify the flecss library to compile with (see above, default is flecss.css).
--super-depth option Specify the parent directory level to watch from (default 0, i.e. from source directory).

Example

npx flecss ./scss ./public/app.css --watch

API

interface ITranspilerOptions { isDevelopment?: boolean; // do not optimise output isStandalone?: boolean; // do not integrate flecss core library?: "flecss"|"flecss.min"|"flecss.min.shorthand", loadPaths?: string[]; } interface ITranspilerOutput { css: string; loadedUrls: string[]; } // Comprehensive function build(sourcePath: string, targetPath?: string, options?: ITranspilerOptions & { watchDirSuperDepth: number; // parent directory level to watch (0, i.e. source dir by default) }): Promise<{ executionTimeMs: number; transpilerOutput: ITranspilerOutput|ITranspilerOutput[]; }>; // Atomic function transpileSCSS(sourceSCSS: string, options?: ITranspilerOptions): ITranspilerOutput; function transpileFile(sourcePath: string, options?: ITranspilerOptions): ITranspilerOutput;

Example

const flecss = require("flecss"); flecss.build("./app.scss", { library: "flecss.min" }); // target path: app.css

Classes

.d .display

The display class allows to toggle binary display conditions. Absence of a display class (specifier) implies the common option, namely simple display.

_disable Greyout and disable element for interaction.
_hide Hide element, but keep in layout.
_collapse Hide element, including from layout (bounding box).
_disable
_hide
_collapse

Example

<button class="d_disable">Submit</button>

.f .flex

The flex class represents the key layouting class in flecss – flexbox based (pun intended).

_1 - _5 n equal-sized content tiles per row with a homogeneous margin in between. The amount of elements does automatically reduce on smaller viewports.
_h _horizontal Horizontal, center-aligned row of items.
_v _vertical Vertical, left-aligned row of items.
_l _left Two-fold layout growing flexible to the left.
_r _right Two-fold layout growing flexible to the right.
_1
_2
_3
_left
_right

Example

<div class="f_2"> <div> <h4>Free Rate</h4> <span>€0</span> </div> <div> <h4>Enterprise Rate</h4> <span>€99</span> </div> </div>

.m .margin

The margin class simply helps with inducing a margin. With a specifier, a certain side can be targeted in isolation.

default Margin to all sides.
_h _horizontal Margin to top and bottom side.
_v _vertical Margin to left and right side.
_t _top Margin to top side only.
_b _bottom Margin to bottom side only.
_l _left Margin to left side only.
_r _right Margin to right side only.
_horizontal
_vertical
_top
_bottom
_left
_right

Example

<p class="m_b">Do not click the button!</p> <button>Click me</button>

.p .padding

The padding class simply helps with inducing a padding. It works analogous to the margin class.

default Padding to all sides.
_h _horizontal Padding to top and bottom side.
_v _vertical Padding to left and right side.
_t _top Padding to top side only.
_b _bottom Padding to bottom side only.
_l _left Padding to left side only.
_r _right Padding to right side only.
_horizontal
_vertical
_top
_bottom
_left
_right

Example

<div class="p--xl"> <h2>Event</h2> </div>

.s .section + .w .wrapper

The section and wrapper classes are vital to vertical layouting. In fact, each class represents a nestable container. A section stretches across the full width, with a small affixed horizontal content padding as a safety area. The wrapper has a limited width and is centered within a section, with an extra large affixed vertical content padding to separate stacked content in a linear vertical layout. Used in combination, the section-wrapper layouting classes provide simple yet powerful styling capabilities.

.s .section
.w .wrapper
.section > .wrapper

Example

<section class="card wrapper"> <div class="wrapper"> <h2>Event</h2> </div> </section>

.t .text

The text class allows to set text alignment. It is particularly with text based content that requires deviant text alignment.

_l _left Align text to the left.
_r _right Align text to the right.
_c _center Align text to the center.
_j _justify Align text across the whole width.
_left
_right
_center
_justify

Alternation of fontsize works through the space modifier interface.

Example

<p class="t_center"> Try <strong class="t--xl">flecss</strong> now. </p>

.v .viewport

The viewport class can be used to bind whether to display an element to the current viewport size.

_s _small Show on small viewport only.
_m _medium Show on medium viewport only.
_l _large Show on large viewport only.
_not-s _not-small Do not show on small viewport.
_not-m _not-medium Do not show on medium viewport.
_not-l _not-large Do not show on large viewport.
_large
_not-large

Breakpoints

Breakpoint XL 

1⅓
× --wrapper-width = ~1890px

Breakpoint L 

 1
× --wrapper-width = 1420px

Breakpoint M 

 ⅔
× --wrapper-width = ~945px

Breakpoint S 

 ½
× --wrapper-width = 710px

Breakpoint XS 

 ⅓
× --wrapper-width = ~470px

ℹ️   Breakpoints are not mutable, i.e. overriding --wrapper-width does not affect the fixed breakpoints.

Example

<a class="v_large" href="/about">About</a>

Space Modifier

The space modifier is quite a new idea in flecss. It allows to alternate the space for class styles built around a space property. The padding class, for instance, obviously bases on a space property. The wrapper class, on the other hand, also comes with a padding at the vertical sides.

--xxs --extra-extra-small
--xs --extra-small
--s --small
--m --medium default
--l --large
--xl --extra-large
--xxl --extra-extra-large

The size of a space unit (e.g. xs) scales progressively aroud the viewport core space unit (--flecss__space--<s|m|l>). It is scaled by a constant factor --flecss__space-factor by the power of the unit (…, s: = -1, m = 0, l = 1, xl = 2, …). For instance on large viewports, xl corresponds to --flecss__space--l * --flecss__space-factor^2 – i.e. ~5.35rem by default.

--space-factor 1.75
--flecss__space --flecss__space--l (≡ 1.75rem)
--flecss__space--m (≡ 1.55rem)
--flecss__space--s (≡ 1.55rem)

Neutral space can be applied through the modifier zero.

Example

<p class="p_t--large p_b--s"> We love flecss! </p>

SCSS Utilities

The flecss SCSS build interface exposes a set of helpful utilities: Mixins (mx, flecss_<*>) for complex style manipulation, and functions (fx, flecss-<*>) to compute flecss values. The utilities are accessible from custom, non-standalone flecss transpiled SCSS without further ado.

mx Breakpoint

The breakpoint mixin wraps styles that are ought to only applied below a respective breakpoint (revisit Breakpoints). By explicitly passing a truthy argument, the upper boundary behaviour can be inverted. This is, the mixin instead wraps styles to only apply above the respective breakpoint.

@include flecss_breakpoint--s($invert: false) @include flecss_breakpoint--m($invert: false) @include flecss_breakpoint--l($invert: false) @include flecss_breakpoint--xl($invert: false)

Example

b { font-weight: 700; @include flecss_breakpoint--s { font-weight: 600; } @include flecss_breakpoint--xl(true) { font-weight: 800; } }

mx Class

The class mixin provides extensibility capabilities of an inbuilt flecss class from within a custom class. This way, redundant class statements and inherent markup verbosity can be avoided. The inheritance classifier argument is supposed to be a flecss class name as it would be used within markup.

@include flecss_class($classifier)

Example

.card { @include flecss_class("padding_v--large"); background-color: lightgray; }

mx Color

The color mixin defines a reusable color including a slightly lighter and a slightly darker shade (±10%). It can be accessed through the function (fn Color). Optionally, a different representative color for use in dark themes may be specified.

@include flecss_color($name, $color, $darktheme-color: null)

Example

@include flecss_color("primary", #F08080, #541818); strong { color: flecss-color("primary", "down"); }

mx Font

The font mixin loads a font family from a given font file path or URL.

@include flecss_font($name, $path, $weight: 400)

Example

@include flecss_font("Arial", "./fonts/arial-light.ttf.", 200); @include flecss_font("Arial", "./fonts/arial-regular.ttf.", 400); @include flecss_font("Arial", "./fonts/arial-bold.ttf.", 600); html { font-family: "Arial", sans-serif; }

mx Theme

The theme mixin wraps styles for a respective color scheme (system).

@include flecss_theme--light @include flecss_theme--dark

Example

#animation { animation-name: wave; animation-duration: 2s; @include flecss_theme--dark { animation-duration: 3s; } }

fn Color

Read a previously defined color by name. Optionally, a lighter ("up") or a darker ("down") shade may be specified. Also, a specific theme's color may be used for all themes.

flecss-color($name, $shade: ["normal"]|"up"|"dark", $theme: "light"|"dark")

fn Fontsize

Get a flecss font size computed through the flecss typical spacing order system (e.g. xl).

flecss-fontsize($dimension: "xxs"|"xs"|"s"|["m"]|"l"|"xl"|"xxl")

The size of a fontsize unit scales progressively aroud the viewport lib fontsize unit --m (≡ --fontsize). The behaviour is analogous to those of space through the space modifier.

--fontsize-factor 1.25
--space --flecss__fontsize--l (≡ 16px)
--flecss__fontsize--m (≡ 15px)
--flecss__fontsize--s (≡ 14px)

Example

b { font-size: flecss-fontsize("l"); }

Limited line length optimises legibility. For that reason, flecss inherently limits text container (i.e. paragraphs and blockquotes) width unless overriden.

fn Space

Get a flecss spacing value as applied through the area space modifier. The space is computed based on the given spacing order (e.g. xs). A truthy optional second argument is for negation of the respective space value.

flecss-space($order: "m", $negate: false)

Example

b { transform: translateY(flecss-space("xl")); }