Giter VIP home page Giter VIP logo

css-zines's Introduction

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

css-zines's People

Contributors

trueskawka avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.