(with debug)

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

Install

npm i fluxgrid

If you'd like to change the default config, make sure to install Sass as a peer dependency:

npm i sass@^1.89.2

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 demo page.

Getting Started

Choose your preferred way:

A. Quick start, with the default config

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

B. With a custom config

• Install Fluxgrid, and it's peer dependency
• Import and overwrite any of the default settings defined in src/_settings.scss with !default. Eg.:

  @use "sass:math";
  @use "fluxgrid/src/fluxgrid" with (
    $fluxgrid-breakpoints: (
      sm: 425px,
      md: 768px,
      lg: 1024px,
      xl: 1366px,
    ),
    $fluxgrid-gutter: 1.5rem,
    $fluxgrid-gutter-lg: 4.5rem,
    $fluxgrid-outside-margin: math.div(4.5rem, 2)
  );

• Optionally (not recommended in production) import fluxgrid-debug" the same way
• Run the file through your build pipeline. It is advised to Autoprefix and minify them

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.