Artboard is a simple way to add a checkered grid to an HTML element.
background-image: repeating-linear-gradient(0deg,transparent,transparent 70px,#CCC 70px,#CCC 71px),repeating-linear-gradient(-90deg,transparent,transparent 70px,#CCC 70px,#CCC 71px); background-size: 71px 71px;
This draws the grid with a one pixel repeating gradient; the main reason to create a package around this is to allow the size of the grid to be changed by just setting a Sass variable.
I’m fascinated by using grids for design. For layout, grids are already the industry-standard best practice1. But grids are also a valuable tool for icon design and illustration, take the Twitter and iCloud logos for example.
All of this is a roundabout way of describing why I was looking around for a way to create a checkered grid in HTML and CSS when I stumbled upon the aforementioned hack.