Use unicode characters as a visual and intuitive representation of the designed elements Width of blocks based on grid ▌half of the page (1/2 column) ▎one fourth of the page (1/4 column) ▝ one fourth of the page (top right corner) etc. Position in page ◰ align to left top corner of page ◱ align to bottom left corner of page ◲ align to bottom right corner of page ◳ align to right top corner of page Crosshatched elements for a bitmap like background pattern (cf: illustrator’s default ▤ .stripes-horizontal ▥ .stripes-vertical ▦ .grid ▧ .stripes-slanted-left ▨ .stripes-slanted-right ▩ .stripes-grid-waffle level of transparency ░ .transparent25 ▒ .transparent50 ▓ .transparent75 ? ⇱ ⇲ Drawing shapes ▭ .rectangle △ .triangle □ .rectangle ○ .circle Box drawing ??? ╀┤┠─┐ ╀╀╀╀╀╮ ┠─┐┼ ┆┆┆┆ EXAMPLES (???) BELOW ▌◰ ▨ In this book, Alessandro Ludovico re-reads the history of the avantgarde arts as a prehistory of cutting through these dichotomies. He shows how contemporary forms of networked publishing – using whichever medium or technology – were in fact prefigured by 20th and 21st century artists and their media experiments. /// script var fs = require("fs"); var output = ''; var input = fs.readFileSync('input.txt', 'utf8'); var lines = input.split("\n"); var state = false; var charmap = [ ["░", "transparent25"], ["▒", "transparent50"], ["▓", "transparent75"], ]; for(var i in lines){ var line = lines[i]; var chars = line.split(""); if(chars[0]===">"){ if(state === true){ output += "\n"; } state = true; var classnames = ""; for(var i=1; i\n'; } else { output += line; } } if(state === true){ output += "\n"; } output += "
"; fs.writeFileSync('output.html', output, 'utf8'); console.log(output); ///// input >░ sadfsdaf .░{ opacity: 0.25; } ////triangle .btn:after { content: ""; position: absolute; top:50px; left: 0; background-color:inherit; padding-bottom:50%; width:57.7%; z-index:-1; -webkit-transform-origin:0 0; -ms-transform-origin:0 0; transform-origin:0 0; -webkit-transform: rotate(-30deg) skewX(30deg);; -ms-transform: rotate(-30deg) skewX(30deg); transform: rotate(-30deg) skewX(30deg); }