blog/themes/hugo-uno

hugo-uno

A responsive hugo theme with awesome font's, charts and light-box galleries, the theme is based on Uno for ghost. A example site is available at hugouno.fredrikloch.me

A Swedish translation is available in the branch feature/swedish

Usage

The following is a short tutorial on the usage of some features in the theme. Configuration

To take full advantage of the features in this theme you can add variables to your site config file, the following is the example config from the example site:

languageCode = "en-us"
contentdir = "content"
publishdir = "public"
builddrafts = false
baseurl = "http://fredrikloch.me/"
canonifyurls = true
title = "Fredrik Loch"
author = "Fredrik Loch"
copyright = "This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License."


[indexes]
   category = "categories"
   tag = "tags"
[Params]
  AuthorName = "Fredrik"
  github = "Senjindarashiva"
  bitbucket = "floch"
  flickr = "senjin"
  twitter = "senjindarshiva"
  email = "mail@fredrikloch.me"
  description = ""
  cv = "/pages/cv"
  legalnotice = "/pages/legal-notice"
  muut = "fredrikloch"
  linkedin = "fredrikloch"
  cover = "/images/background-cover.jpg"
  logo = "/img/logo-1.jpg"

If you prefer to use discourse replace the "muut" line with the following(remember the trailing slash)

  discourse = "http://discourse.yoursite.com/"

If you prefer to use disqus replace the "muut" line with the following

  disqus = "disqusUsername"

Charts

To create charts I use Chart.js which can be configured through basic js files. To add a chart to a post use the following short-code:

{{% chart id="basicChart" width=860 height=400 js="../../js/chartData.js" %}}

Where the javascript file specified contains the data for the chart, a basic example could look like this:

$(function(){
  var chartData = {
      labels: ["Jekyll", "Hugo", "Wintersmith"],
      datasets: [
          {
              label: "Mean build time",
              fillColor: "#E1EDD7",
              strokeColor: "#E1EDD7",
              highlightFill: "#C1D8AB",
              highlightStroke: "#C1D8AB",
              data: [784, 100, 5255]
          }
      ]
  };

  var ctx = $('#basicChart').get(0).getContext("2d");
  var myBarChart = new Chart(ctx).Bar(chartData, {
      scaleBeginAtZero : true,
      responsive: true,
      maintainAspectRatio: false,
    }
  );
  })

A running example can be found in my comparison between Jekyll, Hugo and Winthersmith Gallery

To add a gallery to the site we use basic html together with lightGallery to create a responsive light-box gallery.

<ul style="list-style: none;" id="lightGallery">
    <li data-src="pathToImg.jpg">
        <img src="pathToThumb.jpg"></img>
    </li>
    <li data-src="pathToImg.jpg">
        <img src="pathToThumb.jpg"></img>
    </li>
</ul>

<script src=../../js/lightGallery.min.js></script>
<script>
    $("#lightGallery").lightGallery();
</script>

Features

Cover page The landing page for Hugo-Uno is a full screen 'cover' featuring your avatar, blog title, mini-bio and cover image.

Built with SASS, using BEM If you know HTML and CSS making modifications to the theme should be super simple.

Responsive Hugo-Uno looks great on all devices, even those weird phablets that nobody buys.

Moot comments Moot integration allows users to comment on your posts.

Font-awesome icons For more information on available icons: font-awesome

No-JS fallback While JS is widely used, some themes and websites don't provide fallback for when no JS is available (I'm looking at you Squarespace). If for some weird reason a visitor has JS disabled your blog will still be usable.

License

Creative Commons Attribution 4.0 International

Development

In order to develop or make changes to the theme you will need to have the sass compiler and bourbon both installed.

To check installation run the following commands from a terminal and you should see the > cli output but your version numbers may vary.

** SASS **

sass -v
> Sass 3.3.4 (Maptastic Maple)

If for some reason SASS isn't installed then either follow the instructions from the Sass install page or run bundle install in the project root.

** Bourbon **

bourbon help
> Bourbon 3.1.8

If Bourbon isn't installed follow the installation instructions on the Bourbon website or run bundle install in the project root.

Once installation is verified we will need to go mount the bourbon mixins into the scss folder.

From the project root run bourbon install with the correct path

bourbon install --path static/scss
> bourbon files installed to static/scss/bourbon/

Now that we have the bourbon mixins inside of the scss src folder we can now use the sass cli command to watch the scss files for changes and recompile them.

sass --watch static/scss:static/css
>>>> Sass is watching for changes. Press Ctrl-C to stop.

To minify the css files use the following command in the static folder

curl -X POST -s --data-urlencode 'input@static/css/uno.css' http://cssminifier.com/raw > static/css/uno.min.css