title
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>A prototype</title> <link href='css/main.css' rel='stylesheet'> <script src='js/main.js' defer></script> </head> <body> </body> </html>
.grid{ position: fixed; top:0; left:0; z-index: -1; padding: 20px 7px; display: none; } .tuile{ border: 1px solid gray; display: inline-block; vertical-align: top; } p{ font-family: 'Minitel', monospace; font-size: 18px; /*letter-spacing: 5px;*/ line-height: 32px; }
var gridSizeL = 16; var gridSizeH = 30; for(var y=0; y<window.innerHeight; y+=gridSizeH){ for(var x=0; x < window.innerWidth; x+=gridSizeL){ var tuile = document.createElement('div'); tuile.classList.add('tuile'); tuile.style.width = gridSizeL + 'px'; tuile.style.height = gridSizeH + 'px'; var grid = document.querySelector('.grid'); grid.appendChild(tuile); } }
snap
new
fork
download
html
css
js
output
config
➚ link to output
➚ list all stems
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code