Zakalwe

A high-contrast stylesheet for the written word.

The world is full of feature-rich CSS frameworks, but here's a dirty little secret: the content is all that matters.

No bells, whistles, or fancy components: your first impression is how little there is. This is a stylesheet. It's only a stylesheet. If you're looking for grid systems, opinionated components, or JavaScript, it's probably not right for you.

But it does include clean base typography, responsive defaults, and a few lovely <figure> elements to spice up the text corpus.

Features

  1. Typography
    1. Headers
    2. Preformatted text
  2. Lists
  3. Blockquotes
  4. Figures
  5. Tables
  6. About
    1. “Zakalwe?”

Typography

Let's get it out of the way.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac felis augue. Integer mattis felis nibh, non feugiat ligula ornare sit amet. Donec tristique ligula orci, id gravida leo dictum vel. Nulla mollis metus vel sem sodales, vel ultrices tellus luctus. Praesent magna urna, rutrum eu purus eget, tincidunt dignissim augue. Praesent consectetur tincidunt suscipit. In hac habitasse platea dictumst.

I feel better. It would hardly be a stylesheet without it.

Headers

The rogues’ gallery of headers is all around us. Per the usual plan, the bigger ones are <h2 />, the smaller <h3 />, and there's one modestly-styled <h1 /> up at the top of the article.

Preformatted text

_____________
< Lorem ipsum >
-------------
    \   ^__^
     \  (oo)\_______
        (__)\       )\/\
            ||----w |
            ||     ||
      

Lists

Here's an unordered list of things you won't find here.

Of course, some lists make more sense when they're ordered. We can do that, too.

  1. Grid systems
  2. Extended HTML elements (except <article>—we're really about <article>.)
  3. JavaScript-backed components

Blockquotes

“Finally, a stylesheet that lynx can be proud of.”

— Abraham Lincoln, 1864

That's Honest Abe for ya: short, pointed, and trustworthy to a fault. But how about quotes with a bit more… substance?

Living your life is a task so difficult, it has never been attempted before.

The true Southern watermelon is a boon apart, and not to be mentioned with commoner things. It is chief of the world's luxuries, king by the grace of God over all the fruits of the earth. When one has tasted it, he knows what the angels eat.

It was not a Southern watermelon that Eve took; we know it because she repented.

— Mark Twain, "Pudd'nhead Wilson's Calendar"

We can break the same quote out for emphasis using .article__blockquote--jumbo

“The true Southern watermelon is a boon apart, and not to be mentioned with commoner things. It is chief of the world's luxuries, king by the grace of God over all the fruits of the earth. When one has tasted it, he knows what the angels eat.”

Thanks, Mark. Let's continue our tour with figures.

Figures

We're big on figures.

Figures may be .article__figure--jumbo
.article__figure--inline-right

Figures don't need to be jumbo, page-wide things. We can also float them to let related text flow alongside, as with the figure aligned to the right.


If you're on a mobile handset with a too-small screen, you'll see these images center up within the single column of text. They won't expand like a jumbo, but they won't set off tight/whacky flows of the surrounding text, either.

.article__figure--inline-left

But we'd be remiss to overlook the sinister side! So the same trick of course works for left-floated figures. We've got three great options for adding some imagery alongside the article text.

Tables

When the data can speak for itself, let it! Leave the stylesheet to worry about making it look good.

Capital Cities of the Western Hemisphere (inexhaustive)
Country Capital
Canada Ottawa
Peru Lima
Chile Santiago

About

Zakalwe is distilled from the styling of rjzaworski.com. It’s ISC-licensed: use, modification, and contributions are very welcome!

“Zakalwe?”

Yes.