fluxgrid

^{(with debug)}

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

Install

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:

Syntax

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

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

Options

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:

  $fluxgrid-division;
  $fluxgrid-gutter;
  $fluxgrid-gutter-lg;
  $fluxgrid-outside-margin;
  $fluxgrid-breakpoints;

• 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

Development

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

Deployment

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

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