produced in a straightforward style that deliberately rejects sophisticated artistic techniques and has a bold directness resembling a child's work
naif.css is a minimalistic stylesheet released into public domain. The source is on GitHub. This project uses normalize.css and Open Sans.
- baseline rhythm
This section showcases the few styles defined in naif.css. Inspect Element and View Source are your friends.
You've already seen h1-h3. h4-h6 look the same as h3. "Flat is better than nested".
It is presumed that a quote contains at least one paragraph. There are two types of quotes in naif.css.
The first one is normal.
The other one is called a "spline".
It has smaller top and bottom margins.
It requires usage of a
When in doubt,
Blocks of code
(define (compose f g) (lambda (x) (f (g x))))
All headings (h1-h6) use
To activate it for other elements, use the
legible helper class.
There are a few hopefully-self-explanatory helper classes:
naif.css works on desktops, tablets and phones. To take advantage of it on mobile devices, you should use the following meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Because of a quite narrow maximal width of the content block (640 px), the "traditional" phone vs tablet vs desktop distinction is replaced with a different division:
- portrait phone (maximal width of 320 px)
- landscape phone (maximal width of 480 px)
- tablet or desktop
On phones, the font is 10% smaller and text in paragraphs is not justified.
You can make certain elements hidden on given devices by using following classes:
Narrow layout, associated with the
narrow class, uses 80% of the width (90% on portrait phones).
It can be used both inside the main wrapper and directly on it:
<article id="main-wrapper" class="narrow">