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.