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

See Also

• Ace documentation
• Dot
• Educenter Hugo
• Hugo Bootstrap v4 Blog
• Hugo Cards