5.1.0 • Public • Published

npm npm npm bundle size (with debug)


Yet another responsive utility-based CSS grid customisable with Sass.


npm i fluxgrid

Default config

  • Browser support: browserslist defaults (IE 11 safe)
  • Columns: 12
  • Gutters width: 1rem
  • Nestable: Yes, flushed with parent
  • Direction: Row
  • Breakpoints:
Extra small Small Medium Large Extra large
Device Phone Tablet Desktop Large desktop Extra large desktop
Breakpoint > 0 ≥ 425px ≥ 768px ≥ 1024px ≥ 1366px
Prefix sm: md: lg: xl:


<div class="container container-modifier">
  <div class="grid *grid-modifier">
    <div class="cell *cell-modifier"></div>

* Responsive prefix: sm:|md:|lg:|xl:


Head over to the doc page.

Getting Started

Choose your preferred way:

A. Quick start, with the default config

  • Install Fluxgrid
  • Import it to your build environment, either with:
    • Sass: @import "~fluxgrid/dist/fluxgrid";*
    • JS: import "fluxgrid/dist/fluxgrid.css";
    • HTML: <link rel="stylesheet" type="text/css" href="node_modules/fluxgrid/dist/fluxgrid.css"/>
  • Optionally (not recommended in production) import fluxgrid-debug.css the same way

B. With a custom config

  • Install Fluxgrid
  • Overwrite the default config by redefine any of the !default Sass variables from _settings.scss:
  • Import it to your build environment, either with:
    • Sass: @import "~fluxgrid/src/fluxgrid";*
    • JS: import "fluxgrid/src/fluxgrid.scss";
  • Optionally (not recommended in production) import fluxgrid-debug.scss the same way
  • Run these through your build pipeline. It is advised to Autoprefix and minify them

*: ~ is a Webpack feature, replace with node_modules/ if needed


npm Scripts

In the project directory, you can npm run:

  • dev: Starts up a development server with hot module replacement
  • build: Build Fluxgrid and Fluxgrid Debug, ready for deployment
  • docs: Build the documentation
  • lint: Runs the stylelint linter, a mighty, modern linter that helps you avoid errors and enforce conventions in your styles
  • format: Runs stylelint with the --fix option, as well as Prettier with the --write option to automatically fix problems
  • deploy: Run format, build and docs scripts


  1. Update CHANGELOG.md following the Keep a Changelog format
  2. Run npm run deploy
  3. Update package.json and package-lock.json using semver: "version": "<semver>"
  4. Once merged to master, tag: git tag <semver>
  5. Publish to npm: npm publish


Contribution is welcomed, feel free to raise an issue or PR.

Package Sidebar


npm i fluxgrid

Weekly Downloads






Unpacked Size

30.4 kB

Total Files


Last publish


  • johanmouchet