• Stars
    star
    178
  • Rank 214,989 (Top 5 %)
  • Language
    CSS
  • License
    Other
  • Created almost 6 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A CSS template focused on readability

Hello, CSS!

Hello, CSS! is a CSS template which styles most elements to neutral and aesthetically pleasing defaults. I copy/pasted variants of this so often I figured I might as well put a cleaned up and annotated version somewhere.

I encourage you to pick ’n choose what you need, rather than insert everything.

Design principles

Good typography can help your reader devote less attention to the mechanics of reading and more attention to your message. Conversely, bad typography can distract your reader and undermine your message.

—Matthew Butterick, Practical Typography

  1. Pleasant defaults that should work well for most websites.
  2. Main focus is text and good typography.
  3. Simplicity matters: easy to extend or modify.
  4. Works on all browser, screen sizes, assistive technology, and when printed.

Example pages.

Usage

There are several files, mix-and-match as you want.

There are only a few classes (see the table below); for the most part element selectors are used (e.g. blockquote { .. } instead of .blockquote { .. }).

The files are brief and well annotated, and a number of styles have commented-out alternatives. I encourage you to read and modify to your preference, rather than blindly copy/paste.

Not every last element is styled. For some things – such as <abbr> – it’s fine to rely on the browser defaults, small differences are okay. Feel free to open an issue if you’re missing something in particular.

HTML example

A typical HTML page might look something like:

<body>
    <nav class="center">
        <a href="/">Home</a>
        <a href="/weblog">Weblog</a>
    </nav>

    <article class="page">
        <h1>Main content</h1>
        <p>..</p>

        <div class="postscript"><strong>Footnotes</strong>
            ..
        </div>
        <div class="postscript"><strong>Feedback</strong>
            ..
        </div>
    </article>

    <footer class="center" style="text-align: right">
        Copyright © 2010–2018 Martin Tournoij &lt;[email protected]&gt;<br>
        This document is licensed under a
        <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">
            cc-by 4.0 license
        </a>.
    </footer>
</body>

Also see start.html.

Classes

Class File Purpose
.center base.css Center-align the main content.
.page base.css Main page body.
.page-a4 base.css A4 page size; useful when producing pages where printing is high priority (e.g. a CV).
.page-letter base.css U.S. letter page size.
.full base.css Put a pre, table, or figure element over the full width of a .page, including margins.
.border base.css Add a border around figure elements.
.link base.css Format as a link; mainly for buttons, since regular links can't do POST requests.
.left base.css Left-align a table cell.
.right base.css Right-align a table cell; the cell will also use tabular numbers for alignment.
.postscript postscript.css Page content; for e.g. footnotes or feedback section.
.vertical form.css Layout the form vertically (labels above inputs).
.horizontal form.css Layout the form horizontally (labels next to inputs).

Included files

File Description
base.css Basic defaults; this is the bulk of the project.
form.css Forms, inputs, labels (WIP).
aside.css Content in margin.
blockquote.css Decorative quotation marks around blockquote.
postscript.css P.S. content, such as footnotes.
permalink.css Permalink markers in headers.

The dist/ directory contains versions without extensive annotations, as well as an all.css which contains all of the above files.

You can use the singlepage tool to inline CSS files in to a document with <style> tags.

Related values (“variables”)

There are a number of variables you can define, they are included at the top of base.css.

Name Description Default
--font The main font. 16px/180% 'Libre Baskerville' (..)
--width-body Width of main body text 54rem
--pad-x Padding to the side of the body 4rem
--pad-y Padding to the top and bottom of the body 1rem
--color-bg Background colour of main body text #fff
--color-text Colour of main body text #252525
--color-border Border colour for table, fieldset, input #aaa

See also

  • hello-theme, a Pelican theme based on this (with a few changes).

Credits and license

The Libre Baskerville font in the fonts directory is distributed under the SIL Open Font License 1.1. See fonts/LICENSE.

The fleurons in the <hr> element are exports from the Deja-Vu font, which is in the public domain.

Everything else is in the public domain. I renounce all copyright, and don’t care what you do with it. Since this is not possible in all legal jurisdictions I’ve also attached a modified copy of the ISC license which replaces the attribution clause with the text “without any restrictions”:

Copyright © Martin Tournoij

Permission to use, copy, modify, and/or distribute this software for any purpose
with or without fee is hereby granted, without any restrictions.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
THIS SOFTWARE.

Cross-platform testing made possible by BrowserStack, which provides free access for open source projects.

More Repositories

1

goatcounter

Easy web analytics. No tracking of personal data.
Go
4,235
star
2

uni

Query the Unicode database from the commandline, with good support for emojis
Go
776
star
3

find-cursor

Highlight the cursor position in X11
C
167
star
4

gopher.vim

Plugin for the Go programming language
Vim Script
116
star
5

zcache

In-memory key:value store/cache (similar to Memcached) library for Go, suitable for single-machine applications
Go
61
star
6

dotfiles

My configuration files
Shell
60
star
7

zli

Go library for writing CLI programs. Includes flag parsing, colours, testing, and various helpful utility functions
Go
39
star
8

jumpy.vim

Filetype-specific mappings for [[, ]], g[, and g]
Vim Script
38
star
9

arp242.net

This is my site. There are many like it, but this one is mine.
HTML
34
star
10

gogo-release

Build cross-platform binaries for Go
Shell
32
star
11

singlepage

Bundle external assets in a HTML file to distribute a stand-alone HTML document.
Go
26
star
12

toml-c

TOML C library
C
26
star
13

info

A simple GNU info replacement which isn't terrible
Go
24
star
14

bestasciitable

The best™ ASCII table
HTML
20
star
15

isbot

Go library to detect HTTP bots.
Go
19
star
16

follow

Go library to follow a file for changes; e.g. "tail -F".
Go
19
star
17

download-npo

Download episodes from the Dutch npostart.nl − Download afleveringen van npostart.nl
Python
18
star
18

undofile_warn.vim

Warn when using the undofile
Vim Script
18
star
19

sconfig

Simple and functional configuration file parser for Go.
Go
17
star
20

vimlog

A ChangeLog for Vim
HTML
16
star
21

packman.vim

Simple Vim plugin/package manager
Shell
14
star
22

runbuf.vim

Run the contents of a buffer in psql, python, bash, etc.
Vim Script
13
star
23

startscreen.vim

Customize Vim's start screen.
Vim Script
12
star
24

testing.vim

Comprehensive testing tool for Vim
Shell
12
star
25

ttftrim

Remove glyps from TTF fonts
Python
11
star
26

zdb

Interact with SQL databases in Go
Go
11
star
27

readon.js

Continue reading a web page from where you left last time
JavaScript
11
star
28

xdg_open.vim

Run xdg-open from Vim; re-implements netrw's gx.
Vim Script
11
star
29

auto_mkdir2.vim

Automatically create directories
Vim Script
10
star
30

zhttp

Martin's HTTP package
Go
10
star
31

MartinFox

Really simple userChrome.css for Firefox 89 to make the active tab stand out more
CSS
10
star
32

switchy.vim

Switch to related files
Vim Script
9
star
33

gadget

Go library to get the browser and OS from the User-Agent header.
Go
9
star
34

zprof

Display runtime profiling data for Go programs over HTTP
Go
9
star
35

my-first-vimrc

A vimrc generator that doesn't add a world of complexity
HTML
9
star
36

ff-hist

Search Firefox history from commandline
Shell
9
star
37

zsrv

Static file server which packs all data in the binary
Go
9
star
38

pkg_clearleaves

Easily remove packages on which no other packages depend
Python
8
star
39

blackmail

Go package to send emails with a friendly API
Go
8
star
40

lpeg.vim

LPeg-based syntax highlighting in Vim
Lua
8
star
41

colorcount

Display the colours used in a PNG image
Go
7
star
42

goatcounter-wordpress

WordPress plugin for GoatCounter
PHP
7
star
43

transip-dynamic

Dynamic DNS for TransIP
Go
6
star
44

imgzoom.js

JavaScript image zoomer
HTML
6
star
45

goimport

Add, remove, or replace imports in Go files
Go
6
star
46

sanitize_files

Basic cleanup of your code
Python
6
star
47

battray

Display tray icon with battery status; can also run scripts when the status changes
Python
5
star
48

helplink.vim

Link to Vim help pages with ease.
Vim Script
5
star
49

zev.vim

Easily apply predefined substitute patterns
Vim Script
5
star
50

zstd

Extensions to Go's stdlib
Go
5
star
51

gomodgraph

'go mod graph' as a nicely indented graph
Go
5
star
52

trackwall

DNS proxy and filter − /etc/hosts on steroids.
Go
4
star
53

rogue-clone

The "rogue" game from 4.3BSD-Tahoe, for modern systems.
C
4
star
54

goon

Run Go on another machine such as a QEMU VM or cloud instance
Shell
4
star
55

lazy.vim

The really simple snippet manager
Vim Script
4
star
56

border

Commandline tool to add a border around PNG images
Go
4
star
57

batchy.vim

A little plugin to perform batch operations on files
Vim Script
4
star
58

cantuse

List browsers in which a feature *won't* work
Go
3
star
59

confirm_quit.vim

Ask for confirmation before quitting Vim.
Vim Script
3
star
60

goatcov

Code coverage tool for Go
Go
3
star
61

bsdgrep

BSD grep from FreeBSD for Linux
C
3
star
62

zvalidate

Static validation for Go that returns parsed values
Go
3
star
63

autofox

Automatically configure Firefox
Go
3
star
64

tz

Go timezone convience library
Go
3
star
65

errors

Yet another errors package for Go
Go
3
star
66

wtff

frontend for some ffmpeg operations
Go
3
star
67

sqlbench

Run benchmarks on an SQL database
Go
3
star
68

zlog

Go logging library
Go
3
star
69

acidtab

Go package to print nicely aligned tables in the terminal
Go
3
star
70

git-stats

Aggregate statistics for git repos
Go
3
star
71

slog_align

Less "wall of text"-y slog handler
Go
3
star
72

aurgit

A simple way to manage AUR packages
Python
2
star
73

hubhub

Set of utility functions for working with the GitHub API.
Go
2
star
74

pg_info

Make it a bit easier to read the various pg_stat_* tables in PostgreSQL (WIP!)
Go
2
star
75

complete_email.vim

Allow completion of email addresses so you can use Vim as a basic "address book".
Vim Script
2
star
76

globedit.vim

Use globbing patterns for :edit, :tabedit, etc.
Vim Script
2
star
77

goathost

Shell
2
star
78

z18n

i18n library for Go
Go
2
star
79

RimWorld-RainingBlood

Example RimWorld mod
C#
2
star
80

ADVENT

Colossal Cave Adventure for modern systems, as close to the 1976 source as possible
Fortran
2
star
81

termfo

A terminfo library for Go
Go
2
star
82

jfmt

Format json, nicely
Go
2
star
83

toml-test-matrix

HTML
2
star
84

spamdb-curses

Curses tools to interface with OpenBSD's spamdb(8), which is a part of spamd(8).
Python
1
star
85

json

encoding/json with patches
Go
1
star
86

zstripe

Set of utility functions for working with the Stripe API.
Go
1
star
87

imlib2-heif

Imlib2 plugin for libheif, allowing you to load HEIF, HEIC, and AVIF images (e.g. as used by iPhones)
C
1
star
88

operapass

Read opera password files (a.k.a. "the wand").
Python
1
star
89

markdown-wiki

Simple wiki.
Ruby
1
star
90

har

Read HAR ("HTTP Archive format") files
Go
1
star
91

nordavind

Web based audio player.
CoffeeScript
1
star
92

tpad.zsh

A little script to control some various things on my ThinkPad
Shell
1
star
93

zgo.at

zgo.at website
HTML
1
star
94

synfo.vim

Print information about Vim syntax highlighting and text properties
Vim Script
1
star
95

uni-wasm

WASM demo for uni
JavaScript
1
star
96

robots

Reproduction of the 1980 “classic” robots game for BSD UNIX written by Ken Arnold. You can play it in your browser at: http://arp242.net/robots/
CoffeeScript
1
star