css-zines

This repository includes a setup for generating pure HTML and CSS zines. I wrote the scripts by hand, to practice some freehand Node, so it's not using any libraries outside of the standard Node library.

The setup is in the build directory. Usage: ./bin/index.js <filepath> <command>

Commands:

• setup - creates initial directory and files for a zine
• build - builds the zine from files in the zine directory
• watch - watches for file changes in partials and styles directories

plan

• Use an existing Haskell note to write a zine in HTML + CSS
• Repeat the process for another note, to get the commonalities
• Create partials for common elements
• Create an initial setup for generating zines
• Publish a few pages for review (in progress)

to-dos (~ are nice-haves):

• output: single HTML file, ready for printing
• layout using CSS
  • ~CSS grid?
  • add CSS styles for printing
• text marked for translation
• including images
• adding accessibility support:
  • changing fonts (from cute handwritten one to a readable one)
  • ~increasing text easily
  • ~dark mode
• use handwritten font
• ~create a monospace version of the font
• minimize CSS (mostly)
• add CSS variables
• use CSS partials
• add variables to HTML partials
• improve regexp for putting CSS in the <style> tag
• make it easier to apply global styles to all existing zines
• add a build-all command for zines in a directory

resources

Printing a Book with CSS: Boom!

Building books with CSS3

Electric Book workflow

Designing for Print with CSS

Living Idea - CSS Books

Zine Machine