Skip to content

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

License

Notifications You must be signed in to change notification settings

seejamescode/grid-wiz

Repository files navigation

Grid Wiz

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

Table of Contents

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.

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published