Skip to content

Getting Started

Jump to bottom
Tim Phillips edited this page Jun 24, 2025 · 19 revisions

Welcome to the flow.scss documentation!

If you're new to flow.scss, this is a great place to start.

Environment support

flow.scss will work anywhere that SASS/SCSS does, and if you compile it to CSS, will work in even more places. I have personally tested it in these environments:

Symbol Meaning
✅ Works with no issues.
⚠️ Works with some reconfiguring/extra steps.
⛔️ Does not work.
Environment Support Reason
React.js ✅ Make sure you install sass from NPM
Next.js ✅ Make sure you install sass from NPM
Vanilla HTML ⚠️ Requires that you compile the library's SCSS into CSS
react-native with Expo ⚠️ Requires react-native-sass-transformer from NPM and is limited to React style={} attributes. Any functionality that react-native does not provide in style={} will not be accessible from flow.scss either. (ie. transitions)

System requirements

Installation

You can install flow.scss through npm using npm i flow.scss

Configure flow.scss in your projects

React.js / Next.js

import "flow.scss"; // Globally in your App.jsx file.

<YourElement className="flex row gap"/>

/* ............ */

import styles from "flow.scss"; // As an SCSS module in a specific component.

<YourElement className={styles["flex-row"]}/>

react-native

import styles from "flow.scss";

/* ............ */

<YourElement style={[flow["flex-column"], flow["justify-content-between"], {gap: 8}]}/>

SCSS

@use "flow.scss" as *;

div.box {
    @include transition($transition-property-all, 0.15s, ease)
}

Kick-start your styling configuration

After importing flow.scss in your project, you might consider taking advantage of some more of its features.

Reset

flow.scss has a reset file you can import:

import "flow.scss/reset.scss"

This file will configure your project's CSS so it is best prepared for your content. This includes normalizing fonts and font sizes, getting rid of unnecessary padding and margin, removing browser button and input styling, and more!

Boilerplate

flow.scss also has a very basic boilerplate file to get you started.

import "flow.scss/boilerplate.scss

This file has dark/light mode theming that matches the user's system, and some basic styling for text, buttons and more!

Clone this wiki locally