Flow.css Logo (A White Leaf)

The Framework

A responsive, mobile-first CSS framework built by you.

Comparable to Bootstrap, Pure.css or Bulma, Flow.css is feature-rich and production ready.


or

Udemy Logo

The Course

Learn how to build Flow.css from scratch.

You will create reliable components - a mobile-first approach with columns, responsivity, smart forms and everything you see in the docs.


David King

The Author

I'm David King, a full-stack engineer from the UK.

I've been developing for 20 years and have a passion for well-written CSS and Javascript.


Comparison Table

Framework Size Grids Inputs Tables Buttons Responsive Build it Yourself? CSS Stats
Flow.css 9.2 KB yes yes yes yes yes yes! View
Bootstrap 4 21.0 KB yes yes yes yes yes no View
Bulma 19.8 KB yes yes yes yes yes no View
Pure.css 3.6 KB yes yes yes yes yes no View
Foundation 14.7 KB yes yes yes yes yes no View

Quickstart

Install with NPM

npm install @oodavid/flow-css --save

Import with CSS

/* Import flow.css */
@import "./node_modules/@oodavid/flow-css/flow.css";

Import with SASS

// Import everything
@import "./node_modules/@oodavid/flow-css/flow.scss";
// ...or import individual components or abstracts
@import "./node_modules/@oodavid/flow-css/abstracts/_breakpoints.scss";
@import "./node_modules/@oodavid/flow-css/components/_columns.scss";