Skip to content

Small frontend development tool that reveals CSS responsive grid columns to ensure that elements are in alignment with the grid.

License

Notifications You must be signed in to change notification settings

UseAllFive/css-grid-guides

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CSS Grid Guides

A small library that reveals CSS grid guides to aid in development

Installation

npm i css-grid-guides

Usage

Make sure you're doing something like this in order for this library to work correctly

* {
  box-sizing: border-box;
}

Call gg() after the DOM has loaded

import { gg } from "css-grid-guides";

// Defaults
// {
//   selector: ".grid",
//   color: "rgb(240,128,128)",
//   opacity: 0.3,
//   showNumbers: true,
// }

// Use defaults
gg();

// Override specific properties
gg({
  selector: ".grid-dev",
  color: "green",
});

About

Small frontend development tool that reveals CSS responsive grid columns to ensure that elements are in alignment with the grid.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published