ARCHIVED: Hugo DFD demo site theme

A theme for Hugo module demo sites by Daniel F. Dickinson.

Status

ARCHIVED: This repo is unmaintained and may not be suitable for any purpose except historical record.

GitHub Repository

https://github.com/danielfdickinson/hugo-dfd-demo-site-theme

Features

• exampleSite (for demo deploys and/or documentation)
• Netlify-ready
  • Cache resources folder (exampleSite)
  • HTML Validation
  • Check internal links
  • HTML Minification
• Good default archetype for new Markdown pages (better than default Hugo)
• Likewise for new HTML pages
• Minimal while looking good
• Fast & light
• Responsive
• Hugo module
• TODO: #3 On mobile replace menu bar ‘buttons’ with a hamburger menu (CSS only; no JS)
• TODO: #4 SEO improvements (like setting canonical URL)
• TODO: #5 microformats (OpenGraph/Twitter Cards/schema/etc)
• TODO: #6 Add dark theme and auto dark/light based on browser preference

Using the Theme

1. Create a hugo site

   hugo new site hugo-test-dfd-demo-site-theme
   cd hugo-test-dfd-demo-site-theme
   

Using Hugo Modules (preferred)

1. Initialize the Hugo module system: hugo mod init github.com/<your_user>/<your_project> (assuming you are using github, of course).

2. Import the theme in your config.toml

   [module]
     [[module.imports]]
        path = "github.com/danielfdickinson/hugo-dfd-demo-site-theme"
   

3. Change back to the site directory

4. Get the module

   hugo mod get github.com/danielfdickinson/hugo-dfd-demo-site-theme
   hugo mod tidy
   

5. To test the result, run the local Hugo server

   hugo server -b http://localhost:1313/
   

Using downloaded copy of the theme (e.g. ZIP from the Git repo)

1. Make a themes directory and switch to it

   mkdir themes
   cd themes
   

2. Obtain a copy of the latest development version of the theme e.g. (a theme Zip file from the Git repo)

3. Copy/extract the theme into hugo-dfd-demo-site-theme in the themes directory

4. Change back to the site directory

5. To test the result, run the local Hugo server

   hugo server -t hugo-dfd-demo-site-theme -b http://localhost:1313/
   

Using git submodules (deprecated)

1. Make a themes directory and switch to it.

   mkdir themes
   cd themes
   

2. In the themes directory, add hugo-dfd-demo-site-theme as a submodule

   git submodule add -f https://github.com/danielfdickinson/hugo-dfd-demo-site-theme
   

3. Change back to the site directory

4. To test the result, run the local Hugo server

   hugo server -t hugo-dfd-demo-site-theme -b http://localhost:1313/
   

Enjoy!

Site and Page Params

CSS Classes

Under assets/css/hugo-dfd-demo-site/ Custom CSS should go in: assets/css/custom/ directory

Naming

Two types of classes available:

• Element classes (e.g. details-demo-site)
  • By actual use of element not the HTML element type (e.g. details, list, table-cell) — sometimes an <li> might be used with details when there is no additional information, but the item is a part of a list of details.
  • May include a hyphen in the element type part
  • Always end in -demo-site to denote they are ‘demo site’ classes
• Feature Classes
  • E.g. demo-warningold which is wrapped around the old browser warning.
  • Always begin with demo and a hyphen. The second word is a usually single word (no hyphens).

Feature Classes

Element Classes

From Debug Tables

From Chroma (Syntax Highlighting)

See https://github.com/alecthomas/chroma for more information and https://xyproto.github.io/splash/docs/ for a style gallery

For Demo Site we additionally prefix the .chroma styles with .main-demo-site .highlight.