Zine Toolkit Reference
every trick in the box, laid out flat.
This is a reference page. Every section shows one feature from zine.css using the same sample text so you can compare. Use this when building transmissions.
Rotation
.tilt-left-1
.tilt-left-2
.tilt-left-3
.tilt-right-1
.tilt-right-2
.tilt-right-3
.tilt-wild
Typography Treatments
.typewriter
The quick brown fox jumps over the lazy dog.
.typewriter-worn
The quick brown fox jumps over the lazy dog.
.headline-stamp
The quick brown fox jumps over the lazy dog.
.headline-scream
The fox.
.text-scratched
The quick brown fox jumps over the lazy dog.
.text-handwritten
The quick brown fox jumps over the lazy dog.
.text-ransom
The quick brown fox jumps over the lazy dog.
.drop-cap
The quick brown fox jumps over the lazy dog. Keep going with enough text that you can actually see the drop cap doing its thing — it floats the first letter large and to the left while the rest of the paragraph wraps around it.
.pull-quote
The quick brown fox jumps over the lazy dog.
Color Utilities
Ink colors (text)
.ink-acid — The quick brown fox jumps over the lazy dog.
.ink-red — The quick brown fox jumps over the lazy dog.
.ink-cyan — The quick brown fox jumps over the lazy dog.
.ink-muted — The quick brown fox jumps over the lazy dog.
.ink-white — The quick brown fox jumps over the lazy dog.
Background colors
.bg-acid — The quick brown fox jumps over the lazy dog.
.bg-red — The quick brown fox jumps over the lazy dog.
.bg-blue — The quick brown fox jumps over the lazy dog.
.bg-surface — The quick brown fox jumps over the lazy dog.
.bg-invert — The quick brown fox jumps over the lazy dog.
Borders and Boxes
.border-rough
.border-accent
.box-stamp
.box-redacted
The quick brown fox jumps over the lazy dog.
hidden text — hover to reveal if enabled
Columns
.col-2
The quick brown fox jumps over the lazy dog. Keep going with enough text so the columns have something to work with and you can actually see where the break happens between the left and right sides.
The quick brown fox jumps over the lazy dog. More text in the second column so it fills out properly and you can compare the two sides sitting next to each other.
.col-3
The quick brown fox jumps over the lazy dog. Column one has enough text to wrap properly.
The quick brown fox jumps over the lazy dog. Column two continues the flow across.
The quick brown fox jumps over the lazy dog. Column three closes it out on the right.
Float and Clearfix
.float-left
floated left
The quick brown fox
The quick brown fox jumps over the lazy dog. This paragraph wraps around the floated element on the left. Keep enough text here so you can clearly see the wrapping behaviour — the text hugs the right side of the floated box and continues below it once it clears.
The quick brown fox jumps over the lazy dog. A second paragraph continues wrapping until the float is fully cleared by the .clearfix on the parent container.
.float-right
floated right
The quick brown fox
The quick brown fox jumps over the lazy dog. This paragraph wraps around the floated element on the right. The text hugs the left side of the floated box and the .clearfix on the parent ensures nothing bleeds out below.
The quick brown fox jumps over the lazy dog. A second paragraph to show the wrapping continuing until the float clears.
Layering
All four z-index classes stacked in the same container. Each box is offset slightly so you can see the stacking order. .z-top sits on top of everything. Note: the colors and styles on each box are purely decorative — z-index classes only control stacking order, not appearance.
.z-back (z-index: 1)
The quick brown fox
.z-mid (z-index: 5)
The quick brown fox
.z-front (z-index: 10)
The quick brown fox
.z-top (z-index: 20)
The quick brown fox
Image Treatments
These use a placeholder so you can see the effect. Swap in a real image when using in a transmission.
.img-polaroid
the quick brown fox
.img-clipped
.img-grainy
Dividers
.divider-tape
silver/grey tint using --color-muted (#B3B3B3) via color-mix()
.divider-rough
.divider-stars
Noise and Texture
.texture-noise
The quick brown fox jumps over the lazy dog.
.scanlines
The quick brown fox jumps over the lazy dog.
combined
The quick brown fox jumps over the lazy dog.
Spacing Utilities
Each box is the same size. The spacing class is applied to the box itself so you can see how margin and padding push things around.
Margin Top (.mt-0 through .mt-4)
Margin Bottom (.mb-0 through .mb-4)
Padding (.p-1 through .p-3)
end of toolkit reference — go make something weird