Grid checker is a simple tool I developped to make sure an integration respects the designer's original grid.
It simply creates a highly configurable grid directly in the document, using ES6 classes and Web components.
<script src="path/to/gridchecker.js"></script>
You can then add as many gridchecker as you want, using either the custom tag <grid-checker>
directly in the HTML document, or the GridChecker()
constructor in a JavaScript file, or any combination of both.
-
HTML
<grid-checker columns="12" grid-width="94rem" gap-width="2rem"> </grid-checker>
-
JavaScript
const gridcheck = new GridChecker({ columns: 12, gridWidth: '94rem', gapWidth: '2rem' })
Here is the list of available attributes to set up the grid.
HTML attribute | JavaScript property | Description | Importance | Default value |
---|---|---|---|---|
columns |
columns |
Number of columns. | required | null |
grid-width |
gridWidth |
CSS value for the grid width. | required | optional * | null |
column-width |
columnWidth |
CSS value for columns width. | required | optional * | null |
gap-width |
gapWidth |
CSS value for the space between two columns. | required | optional * | null |
offset-x |
offsetX |
CSS value for the horizontal offset. | optional | "0" |
offset-y |
offsetY |
CSS value for the vertical offset. | optional | "0" |
z-index |
zIndex |
CSS value for z-index. | optional | "1000000" |
color |
color |
CSS value for the grid's color. | optional | "rgba(200, 50, 200, .4)" |
key |
key |
A single character used to toggle the grid on key down. | optional | "g" |
N/A | target |
HTML Element in which the grid should be appended, when using the constructor. | optional | document.body |
debug |
debug |
If not null nor false nor 0, shows a table of all values on creation and after every updates | optional | false |
*: Two of the three *-width
values are required, the last one is optional as it is computed if not also set by the user.