Zilch CSS

Zero classes, beautiful websites

Zilch is a zero class CSS framework for building readable websites that ❤️ semantic HTML.

This project is currently for my own use and enjoyment, but if anyone stumbles across it and finds it useful please let me know.

Installation

Download the zilch.css file and add it to your project.

<link rel="stylesheet" href="zilch.css">

The Basics

Put your main content inside an article and break that content up into sections. Inside each section use p (paragraph) tags for text content. You can also use ul, ol, pre, img, etc.

Zilch supports^* three levels of headings. A single h1 element at the top of your page, h2 elements for section headings and h3 for sub-sections.

<article>
    <section>
        <h1>My Awesome Website!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </section>
    <section>
        <h2>About</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </section>
</article>

Components

Navigation

Use a nav element to contain your site navigation. Inside that add a ul to contain the links, each link should be inside a separate li.

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

Page notes

To add page notes^* wrap a p tag inside an aside. Make sure the aside isn't nested inside another p tag. In other words, put your page note after the relevant paragraph and not inside of it.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<aside>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</aside>

Columns

Any div inside of a section is used to create a column. Zilch only supports two columns (or no/single columns).

<section>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</section>