naif.css

Maciej Konieczny
·

produced in a straightforward style that deliberately rejects sophisticated artistic techniques and has a bold directness resembling a child's work

Project

naif.css is a minimalistic stylesheet released into public domain. The source is on GitHub. This project uses normalize.css and Open Sans.

Features

Examples

This section showcases the few styles defined in naif.css. Inspect Element and View Source are your friends.

Headings

You've already seen h1-h3. h4-h6 look the same as h3. "Flat is better than nested".

Unordered lists

Ordered lists

  1. seriously
    1. no
      1. extra
    2. vertical
  2. margins

Quotes

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

Inline code

When in doubt, use(brute_force).

Blocks of code

(define (compose f g)
  (lambda (x) (f (g x))))

Legibility

All headings (h1-h6) use optimizeLegibility. To activate it for other elements, use the legible helper class.

Helper classes

There are a few hopefully-self-explanatory helper classes:

Responsiveness

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:

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

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

Horizontal line