Gruvbox-CSS

Gruvbox-CSS

This is basically a “fork” (read copy-paste) of solarized-css.

I quite like the Gruvbox theme and I wanted to have a way to make HTML pages with that look, hence this small project.

Like solarized-css the most common HTML tags are supported. Org-mode and Markdown are also supported but mostly untested. You can see the results for yourself below.

Build

No particular CSS pre-processor is used in this project, just a hand-written CSS file in the css directory.

Both a regular and a minified version are provided. The minified version can be re-generated by running make minify (or simply make).

Use

Depending on your source file, you may want to use the CSS in different ways.

HTML

Simply download and include the CSS file in your project. A public URL for the files is also available:

• Regular CSS
• Minified CSS

Org

For use with org-mode files add the following to the preamble

#+HTML_HEAD:  <link rel="stylesheet" type="text/css" href="http://a-dma.github.io/gruvbox-css/gruvbox-dark-medium.min.css" />

You can then export the file normally using the built-in HTML exporter (requires htmlize).

On a slightly unrelated note, if you would like to have the navigation functionality used by this example you need to add also the following to your preamble

#+INFOJS_OPT: view:t toc:t ltoc:t mouse:underline buttons:0 path:http://a-dma.github.io/gruvbox-css/org-info.min.js

Markdown

For Markdown add the following at the top of your file

<link href="http://a-dma.github.io/gruvbox-css/gruvbox-dark-medium.min.css" rel="stylesheet"></link>

Then convert your file to HTML

pandoc document.md >document.html

Example Pages

A few example pages using this theme can be found at this project’s page or linked below.

• HTML test page (from https://snipplr.com/view/8121/html-test-page-for-css-style-guide)
• HTML test page 2 (from https://www.granneman.com/webdev/coding/htmlcsstestpage)
• Org-hacks (from https://orgmode.org/worg/sources/org-hacks.org)
• Markdown test page (from https://bitbucket.org/kevinburke/markdowncss/src/master/sample.html)

Acknowledgments

• Thomas Frössman for the original work
• Pavel Pertsev for the Gruvbox theme
• cssminifier.com for the minification service
• Org-info.js used in the org-mode examples

LICENSE

Copyright 2020

Licensed under the Apache License, Version 2.0 (the “License”); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an “AS IS” BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.