Skip to content
Creating tiny zines using HTML/CSS layout
HTML CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
haskell
.gitignore
README.md

README.md

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

You can’t perform that action at this time.