Minimal Elegant Online Documentation
HTML CSS JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
font/roboto
js
.gitattributes
.gitignore
LICENSE.md
README.md
index.html
with-nav.html

README.md

Envisioned CSS

Edward Tufte uses a distinctive style in his handouts: simple, with well-set typography, extensive sidenotes, and tight integration of graphics and charts. envisioned-css brings that style to HTML documents.

This project is directly inspired by and based on tufte-css, tablesaw, Pushy off-canvas navigation and R Markdown Tufte Handout.

Getting Started

The file index.html is a self-describing demonstration document that walks through the features of Envisioned CSS. The file with-nav.html demos the use of the navigation functionality. The live demos are at the following, nogginfuel.com/envisioned-css and nogginfuel.com/envisioned-css/with-nav.html. They best summarize the project.

To use Envisioned CSS on your own website, just copy envisioned.css, tablesaw-stackonly.css, nudge.css, Roboto-Regular.ttf, RobotoCondensed-Regular.ttf and RobotoMono-Regular.ttf to your project directory (or just copy the folder structure) and add the following to your HTML doc's head block:

<link rel="stylesheet" href="css/envisioned.css"/>
<link rel="stylesheet" href="css/tablesaw-stackonly.css"/>
<link rel="stylesheet" href="css/nudge.css"/> <!-- if you want navigation -->

You will also need to copy jquery.js, tablesaw-stackonly.js and nudge.min.js (or the folder structure) add the following block prior to the closing </body> tag:

<script src="js/jquery.js"></script>
<script src="js/tablesaw-stackonly.js"></script>
<script src="js/nudge.min.js"></script> <!-- if you want navigation -->

Contributing

If you notice something wrong or broken, please open an issue. Pull requests are very welcome.

For best results, keep pull requests to one change at a time, and test your fix or new functionality against index.html on screens as small as smart phones and as big as HD or HD+ displays. If you don't have a mobile device handy, fake different devices with your browser's developer tools.

Inspiration

License

The code is Released under the MIT license. LICENSE.MD. The Roboto fonts are subject to the Apache 2.0 in the following directory font > Roboto folder > LICENSE.TXT.