About CSS CRAN Garden
This site is a tribute to the original
CSS Zen Garden,
created in 2003 by Dave Shea. The Zen Garden showed that the same
HTML could be transformed into radically different visual designs
using only CSS, by inviting designers around the world to contribute
their own stylesheets to a single fixed page. It became one of the
most influential demonstrations of what CSS could do on its own,
with no markup changes.
CSS CRAN Garden applies the same idea to
cran.r-project.org.
The CRAN HTML stays exactly as the R generators serve it today. All
of the styling lives in a single drop-in stylesheet,
cran-modern.css, which keys off the structure and
attributes the existing pages already emit.
Snapshots available via the Page selector:
- CRAN homepage (full
frameset: logo, navbar, banner)
- CRAN homepage (main banner only)
- Package detail (using dplyr as the example)
- Packages by name (alphabetical directory)
- Packages index
- Task view (using MachineLearning as the example)
- Task views index
- Mirrors
- Manuals
- FAQs
- R Sources
- Other software
- CRAN team
Controls
- Compare: toggle between side-by-side and the paint-job only.
- Mobile: clamp both iframes to a 390 px phone-size viewport, centered with a device-like frame, to preview the layout on a phone.
- Theme: cycle auto, light, dark. The viewer chrome and both iframes follow.
- Edit CSS: open a live editor for
cran-modern.css with CSS syntax highlighting and line numbers. Edits are injected into the right iframe within a few hundred milliseconds. Tab inserts two spaces. ⌘S or Ctrl+S flushes the debounce immediately. Reset reloads the on-disk stylesheet.
How to adopt on a CRAN mirror
- Copy
cran-modern.css to your mirror's web root.
- Add one line to the existing
<head> in the page templates:
<link rel="stylesheet" href="/cran-modern.css">
- That is all. No HTML changes are required, because the
stylesheet targets the structure and attributes the existing R
generators already emit.
Source
cran-modern.css,
README.md,
GitHub repository.