Zakalwe

“Perfection is achieved not when there is nothing more to add,” wrote the engineer-turned-author Antoine de Saint-Exupery, “but when there is nothing left to take away.”

And so it should be with your stylesheet: perfection achieved not through its standards-bending CSS, but through the immediate impression of how little there is. It’s a stylesheet. It’s only a stylesheet.

While the world is full of feature-rich CSS frameworks, content remains king. Not bells, whistles, or fancy components, no, but the words on the page.

Before you is a stylesheet. It’s only a stylesheet. If you’re looking for grid systems, opinionated components, or JavaScript, it probably isn’ right for you. But it does offer clean base typography, responsive defaults, and a few lovely <figure> elements when images and tables make their way into the corpus.

Features

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

Typography

Digital type is a funny thing. Forget the artistry of leaden glyphs or finding the right ligature to press. A few strokes to set a sentence that’s just as casually lost, its bits disappearing into the digital æther.

Yet some traditions remain unchanged.

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.

There, 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.

• Grid systems
• Extended HTML elements (except <article>—we’re all about <article>.)
• JavaScript-powered components

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 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.

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.

About

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

“Zakalwe?”

Yes.