Getting Started

Flexocss is a lightweight CSS framework built on flexbox. It provides a 16-column responsive grid, utility classes, and a wireframe debug mode. No JavaScript, no dependencies.

Installation

You can install flexocss via npm for full SCSS customization, or include the prebuilt CSS via CDN for zero configuration.

npm

Install the package from npm:

Terminal

npm install @daveaki/flexocss

Then import it in your SCSS file:

SCSS

@use "@daveaki/flexocss/scss/flexo";

To override default configuration variables, use the with syntax:

SCSS

@use "@daveaki/flexocss/scss/config" with (
  $box: 12,
  $gapStep: 4
);
@use "@daveaki/flexocss/scss/flexo";

CDN

Include the CSS directly in your HTML for quick setup with default settings:

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@daveaki/flexocss@2.0.2/dist/flexo.min.css">

Basic structure

Flexocss uses three nesting levels: container, row, and fl-box. The grid defaults to 16 columns.

HTML

<div class="container">
  <div class="row">
    <div class="fl-box fl-8">Column 8/16</div>
    <div class="fl-box fl-8">Column 8/16</div>
  </div>
</div>

Live example

fl-8

Here is what each class does:

.container — centers the content and sets a max-width.
.container.fluid — makes the container full-width.
.row — creates a flex row that wraps its children.
.fl-box — defines a flex item (column).
.fl-{n} — sets the column width, where n is a value from 1 to 16.

Responsive layout

Add breakpoint prefixes to change the column width at different screen sizes. Flexocss follows a mobile-first approach: smaller breakpoints apply upward unless overridden.

HTML

<div class="fl-box fl-16 fl-lg-8 fl-sp-5">
  Responsive column
</div>

This column takes the full width on mobile (fl-16), half on tablets (fl-lg-8), and roughly a third on desktop (fl-sp-5).

fl-16 fl-lg-8 fl-sp-5

fl-16 fl-lg-16 fl-sp-6

Next → Grid