Generic CSS

A CSS/Sass style for simple HTML documents. It has mainly been tested on Org-mode exports. Contributions welcome.

• Github
• Styled README

Examples

• Demo elements
• An exported Org-mode file

Features

Except for a few classes specific to Org-mode exports, elements are styled directly. It uses the Solarized colour scheme, and includes both light and dark versions. There are some media queries. Google Fonts is used, but you might prefer to provide your own - the files are included for convenience.

Theme selector

You can include generic-css.js to insert theme-selecting buttons at the top of the page (as seen on the styled README page). It expects your stylesheet links to have IDs generic-css-dark and generic-css-light, as in the below snippet:

<link id="generic-css-dark"  rel="stylesheet" type="text/css" href="https://mattduck.github.io/generic-css/css/generic-dark.min.css">
<link id="generic-css-light" rel="stylesheet" type="text/css" href="https://mattduck.github.io/generic-css/css/generic-light.min.css">
<script type="text/javascript" src="https://mattduck.github.io/generic-css/js/generic-css.min.js"></script>

Download

• generic-light.css
• generic-light.min.css
• generic-dark.css
• generic-dark.min.css
• generic-css.js
• generic-css.min.js

To try without downloading, use (light):

<link href="https://mattduck.github.io/generic-css/css/generic-light.min.css" rel="stylesheet" type="text/css">

or (dark):

<link href="https://mattduck.github.io/generic-css/css/generic-dark.min.css" rel="stylesheet" type="text/css">

Development

Run build.sh to compile the Sass files to ./css, compress the Javascript and export README.md to index.html:

cd $repository_root
./build.sh

This requires:

• sass
• kramdown
• uglifyjs

Acknowledgements

• This turned out to share some similarities with solarized-css by thomasf.
• The demo Org-mode document comes from http://orgmode.org/worg, and is licensed as described in the .html and .org files.