hugo-theme-readable/README.md

3.4 KiB

hugo-theme-readable

Readable is a theme for the static-site generator Hugo using the readable.css framework built by Freedom to Write.

Shoutout to Benjamin Hollon for his amazing work building this CSS framework and making it so simple to use.

Want to check out a demo? (coming soon)

demo image

Installation

To add this theme to an existing Hugo site, start by adding this repo as a submodule in the site's themes folder.

git submodule add https://github.com/cjtheham/hugo-theme-readable themes/readable

Then, update your config file to be using the new theme. For example, if you are using config.toml, the line should become:

theme = 'readable'

If you don't have an existing site, feel free to use the provided starter template to quickly get your website online.

For more information on starting a Hugo website and using custom themes, refer to the Hugo documentation.

Usage

Freedom to Write has provided some awesome guides on writing HTML that works automatically with the formatting of Readable. For a complete HTML page guide on writing custom pages, see Overall Structure. For some neat tips that may make life easier working with this style sheet, read Quick Tips.

Shortcodes

aside

You can use the aside shortcode to signify content that is slightly off-topic in regard to the rest of the post.

Here's how it compares to a blockquote:

> This is a blockquote.
>
> This is a default **markdown** element and supports formatting inside it.

{{< aside >}}
This is an aside element.

You can use **markdown** formatting inside it.
{{</ aside >}}

The above code generates the following output:

Comparing a blockquote to an aside. The blockquote has a thin bar on it's left, while the aside element is inside a nice box with rounded corners.

video

You can use the video shortcode to embed a video player in your post.

{{< video source="https://test-videos.co.uk/vids/bigbuckbunny/mp4/av1/1080/Big_Buck_Bunny_1080_10s_5MB.mp4" type="video/mp4" caption="Of course it's Big Buck Bunny!" >}}

A still from an embedded video with controls in a post.

Sources can be remote or static content from your website. You can find the supported file types here.

Notes

  • Benjamin loves when new sites and projects pop up using the readable.css framework!