NOW-UI for Hugo

Creative Tim adapted the popular Invision UI Kit to HTML. cboettig brings it to Hugo. MIT Licensed.

Live preview.

Features

• Built on Boostrap v4, making it easy to adapt and extend using the latest version of the wildly popular Bootstrap CSS and JS tools.

• Responsive menu collapses into a side-drawer style navigation on smaller devices. Transparent navigation bar becomes solid on scroll.

• Adjust theme colors simply by modifying the static/sass/now-ui-kit/_variables.scss ~~and recompiling CSS with sass.~~ Hugo will then re-compile the CSS from SASS files automatically (see #22).

• Adjust theme tint by setting the tint parameter. The theme recogonizes the following tints: orange, red, yellow, blue, green, with orange as the default.

• Example includes three free MIT licensed templates and icons.

For more details, see the preview pages.

Shortcodes

Full Width Image

{{%/* image-fullwidth src="images/file.jpg" class="" */%}}

Image float left

{{%/* image-floatleft src="file.jpg" class="animate left" */%}}

Image float right

{{%/* image-floatright src="file.jpg" class="animate right" */%}}

Side by side images

{{%/* image-sidebyside src="images/file.jpg" class="animate left" */%}}

{{%/* image-sidebyside src="images/file.jpg" class="animate left" */%}}

Carousel

Include the following in your frontmatter:

resources: 
- src: images/IMG_5504slide.jpg
  name: "slide-1"
  title: 
- src: images/IMG_5503.jpg
  name: "slide-2"
  title: 
- src: images/IMG_5500.jpg
  name: "slide-3"
  title: 

Then just add the shortcode where you want the carousel to appear.

{{%/* carousel title="optional" */%}}

Screenshots

Wide display menu

Menu collapsed on smaller display

Side-drawer menu open

Installation

via Git

If you already use your Hugo project as a git repository, it is a better practice to use a theme as a submodule instead of using a git repository inside another git repository.

at the root of your hugo project : git submodule add 'the source' 'the destination'
such as an example : git submodule add https://github.com/cboettig/hugo-now-ui themes/hugo-now-ui

If your Hugo project is not a git repository then you simply execute git clone https://github.com/cboettig/hugo-now-ui themes/hugo-now-ui

Cut and past way

As you may notice Github offer you to download a zip file
Simply download it and extract the content inside ./themes/
You may wish to rename the directory from hugo-now-ui-master to hugo-now-ui

Customizing

It is a best practice to override a file rather than modify it. This helps you easily update Hugo and the theme without loosing your customizations. To learn more see the Hugo documentation on customizing Hugo themes