Grid Wiz

Make a CSS Grid framework with custom browser support at the snap of a function.

Table of Contents

• Benefits
• Browser Compatibility
• Instructions
• Contribute

Benefits

Subgrid 🔥

HTML isn’t written one layer deep. A great grid framework should allow you to embed divs within divs, but still remember how many columns are available. Without subgrids, users of your grid framework are prone to accidently break out of your design spec.

Progressive Enhancement 📉

Different experiences have different browser requirements based on the users visiting. Your grid framework should also be performant with the smallest amount of code needed. With this project’s fine-tuned browser compatibility settings, you can support the right browser versions with as little grid code as possible.

JavaScript? 🤔

We get a lot of flexibility by writing this package in isomorphic JavaScript:

• Wanna configure your grid framework and just copy and paste the CSS straight from this project’s website? Go ahead.
• Need to distribute your grid framework to multiple projects with a Node package? Add Grid Wiz as a dependency and compile it there.
• Are you bleeding-edge enough to compile the grid framework directly in your client-side code? Now we’re cooking!

Browser Compatibility

This package lets you configure your grid’s browser compatibility. The trade-off is that with more backwards compatibility, the larger the size of the grid code will be. This configuration option is great for developers that have multiple products with differing browser requirements.

| Support Mode | Chrome | Edge | Firefox | IE | Opera | Safari | | | | ------------------ | ------ | ------ | ------- | --- | ----- | ------ | ------------------- | ----------------------------------------------------------------------------------------- | | displayFlex | 29 | 12 | 20 | 11 | 12.1 | 9 | Available | Details | | cssVariables | 49 | 15 | 31 | NA | 36 | 9.1 | Available | Details | | displayGrid | 57 | 16** | 52 | NA | 44 | 10.1 | Available (Default) | Details | | displaySubgrid* | ? | ? | ? | NA | ? | ? | Work-in-Progress | Details |

* CSS Grid Level 2 is still a working draft. Once this support mode is added, it will significantly cut file size due to support for display: subgrid.

** This implementation is currently broken on Edge. See Edge Issue 18676405 for more details.

Instructions

Install

npm install grid-wiz

Use

import gridWiz from "grid-wiz";

var yourGridCSS = gridWiz({
  prefix: "bx--", // Prefix for all CSS class names. Can be empty.
  support: "displayGrid", // `displayFlex`, `cssVariables`, or `displayGrid`
  maxWidth: 1584, // Max-width of entire grid in pixels. Optional.
  progressive: false, // Include all browser support fallbacks older than selected support
  subgrid: true, // Embedded grids and rows know the remaining amount of columns available.
  breakpoints: [
    {
      name: "sm", // Class name prefix fot the breakpoint.
      size: 0, // Starting screen width in pixels of the breakpoint.
      columns: 4, // Amount of columns available.
      gutter: 32, // Space between content of adjacent columns in pixels.
      margin: 0 // Space on outside of entire grid in pixels.
    },
    {
      name: "md",
      size: 672,
      columns: 8,
      gutter: 32,
      margin: 16
    },
    {
      name: "lg",
      size: 1056,
      columns: 16,
      gutter: 32,
      margin: 16
    },
    {
      name: "xl",
      size: 1312,
      columns: 16,
      gutter: 32,
      margin: 16
    },
    {
      name: "max",
      size: 1584,
      columns: 16,
      gutter: 32,
      margin: 32
    }
  ]
});

Contribute

To work on this project locally, just do npm i once and then npm run start to open up dev mode in browser at http://localhost:4000.