Hugo Future Imperfect Slim is a theme based on jpescador's port of HTML5 UP's theme by the same name. The goal of this theme is to continue the development of the original theme.
This version takes that port and modernizes it with CSS Grid and Modern Hugo functions. In addition to the features that were present in the original theme, there are some additional features for you to utlize however you see fit.
Check out this live example site on the Hugo Theme Showcase.
There are two different ways I recommend getting started and it depends on one of two things: are you going to help develop the theme, or do you just want to use it for personal use.
If you would like to stay up-to-date with the current iteration of the theme and don't plan to aid in the development of the theme (or don't want to aid via your site), I would highly recommend you add it as a submodule to your project. From your site directory, do the following:
mkdir themes // Creates a Themes Folder
cd themes // Points to the Themes Folder
git submodule add https://github.com/pacollins/hugo-future-imperfect-slim.git
You will then have access to the theme at themes/hugo-future-imperfect-slim from within your project folder.
From here, you can customize any of the files for your personal use by creating a dupicating the file at the project level instead of the theme level. For example, if you wanted to change the About Me Page Template (which is located at MYPROJECT/themes/layouts/about/list.html), I would create a new file at MYPROJECT/layouts/about/list.html and change it to what I wanted it to be.
This is the proper way to adjust files for personal use when they do not contribute to the development of the them, and it can help prevent your site from being incompatible with the original theme.
If you plan on assisting with developing the theme, you will want to have your own copy that is not a submodule. To do this, navigate to where you want to place it and do the following:
git clone https://github.com/pacollins/hugo-future-imperfect-slim.git
Within the hugo-future-imperfect-slim folder, there will be another folder called exampleSite. The structure of the folder will look like this:
exampleSite
├── config.toml
├── content
│ ├── about
│ │ ├── _index.br.md
│ │ ├── _index.fr.md
│ │ ├── _index.md
│ │ └── _index.pl.md
│ ├── blog
│ │ ├── creating-a-new-theme.br.md
│ │ ├── creating-a-new-theme.fr.md
│ │ ├── creating-a-new-theme.md
│ │ ├── creating-a-new-theme.pl.md
│ │ ├── examples.md
│ │ ├── goisforlovers.fr.md
│ │ ├── goisforlovers.md
│ │ ├── goisforlovers.pl.md
│ │ ├── hugoisforlovers.fr.md
│ │ ├── hugoisforlovers.md
│ │ ├── hugoisforlovers.pl.md
│ │ ├── migrate-from-jekyll.fr.md
│ │ ├── migrate-from-jekyll.md
│ │ └── migrate-from-jekyll.pl.md
│ └── contact
│ ├── _index.br.md
│ ├── _index.fr.md
│ ├── _index.md
│ └── _index.pl.md
├── static
│ ├── css
│ │ └── add-on.css
│ ├── img
│ │ ├── 2014
│ │ │ ├── 04
│ │ │ │ ├── pic01.jpg
│ │ │ │ └── pic02.jpg
│ │ │ └── 09
│ │ │ └── pic03.jpg
│ │ └── main
│ │ └── logo.jpg
│ └── js
│ └── add-on.js
└── staticman.yml
To get started, you will want to copy config.toml from exampleSite to the root directory of your project.
If you would like static comments powered by Staticman, you will also need to copy staticman.yml. You may refer to this project page's Wiki page for details.
This file is important to the initial set-up of your project and contains all of the customizations that the developers feel as though you should have easy access to. Each prarameter listed should include a comment to help describe it's function. Unless otherwise state, true will turn a feature on, while false will turn a feature off. It is structured as follows:
.Site
├── .Params // Controls Carious Settings
| ├── .Meta
| ├── .Header
| ├── .Intro
| │ └── .Pic
| ├── .Sidebar
| ├── .Footer
| └── .Staticman
| └── .Recaptcha
├── .Languages // Controls Multilingual Settings and Navigation
| ├── .En
| │ └── .Menu.Main
| ├── .Fr
| │ └── .Menu.Main
| ├── .Pl
| │ └── .Menu.Main
| ├── .Br
| │ └── .Menu.Main
└── .Social // Controls Links to Social Media
You can adapt this theme according to your preferences using your own JS or CSS code.
To do this your can add your custom scripts to the cssFiles and jsFiles
parameters in config.toml.
To see a live version of your site locally, use the following command:
hugo server
Hugo will build your site and host a server locally. You can view this live at localhost:1313.
In addition to the native Hugo shortcodes, the theme also includes additional shortcodes that you may find useful.
You can enable source code hightlighting via
highlight.js. If you want to use a language which is
not in the common package of highlight.js
you can enable that language via highlightjsLang and the additional packages
with be added to your site.
highlightjsLang=["yaml", "groovy"]
Hugo Future Imperfect is a theme by HTML5 UP. Julio Pescador took the code provided from them and ported it over so that it could be used with Hugo. Patrick Collins then took this port, broke it down and restructured it under newer Hugo functions in addition to building it mobile-first utlizing CSS Grid. This also allowed for the slimming of the CSS and JS files originally included to strip those features not used in the site (hence the name, slim). During the this time, StatnMap worked on overhauling the majority of the theme to include Multilingual functionality - which is included here.
Since the original development had become stale and the redesign is not directly compatible with previous versions of the original Hugo Future Imperfect, it is now in its own repo to help aid in development and prevent confusion.
Please also refer to the project contributors list for everyone that has directly contributed to this version of the theme.
This theme is released under the Creative Commons Attribution 3.0 License. "Future Imperfect" is a theme by HTML5 UP licensed under the same terms. Please read the license for more information.