https://github.com/zserge/zine
Tiny CSS template to produce micro-zines (folded 8-page magazines)
https://github.com/zserge/zine
Last synced: 5 months ago
JSON representation
Tiny CSS template to produce micro-zines (folded 8-page magazines)
- Host: GitHub
- URL: https://github.com/zserge/zine
- Owner: zserge
- License: mit
- Created: 2024-07-21T13:00:08.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-22T17:52:07.000Z (over 1 year ago)
- Last Synced: 2025-01-24T11:10:01.173Z (over 1 year ago)
- Language: HTML
- Size: 6.31 MB
- Stars: 25
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Micro Zine
This is a little CSS helper for making your own one-sheet zines.
A zine (/zi:n/) is a self-published, non-commercial print-work that is typically produced in small, limited batches.
This stylesheet focuses on producing no-glue 8-page zines out of a single A4 or Letter paper sheet.
Examples (try printing them!):
* [Ukulele](https://zserge.com/zine/ukulele/) - a helper book for all ukulele chords, fretboard map and common chord progressions.
* [Mandolin](https://zserge.com/zine/mandolin) - a book with simple chords, movable chords, scales and other useful things.
* [Irish Whistle](https://zserge.com/zine/tinwhistle) - a book of well-known tunes to practice tin whistle (Irish whistle).
* [Toki Pona](https://zserge.com/zine/tokipona) - a book about minimalist constructed language with a vocabulary of 120 words.
* [Hollow Men](https://zserge.com/zine/hollow-men/) - a poetry book with a Ukrainian translation of T.S. Eliot's ["Hollow Men"](https://allpoetry.com/the-hollow-men).
## How to write a zine?
Include `zine.css` into your HTML and make a `.zine` element with 8 child elements, one for each page. Style the pages as you wish.
On screen pages would look like individual sheets and in print mode they will be arranged properly on a landscape sheet of paper ready for printing.
Here's a minimal HTML template to start with:
```html
Header
First page
Second page
Third page
Fourth page
Fifth page
Sixth page
The end
```
You may use helper grids to layout content on each page: `zine.css` provides you with a 21x15 grid on every page and you can use `grid-area: ....` to position and resize your content. [CSS Grids](https://css-tricks.com/snippets/css/complete-guide-grid/) are pretty powerful!
## How to fold it?
Here's a visual instruction on how to cut and fold it:
## License
Zine is distributed under MIT license, so feel free to copy it and use in your own works!
Contributions are always welcome, and you if you found it useful - please let me know about your zine creations ()!