🌐 Hugo adaptation of Now-UI from Creative Tim
Switch branches/tags
Nothing to show
Clone or download
ringods and cboettig Correct rendering of the example site. (#11)
* Use absURL for images.

* Implementing recommendations from @onedrawingperday

* Images work with local rendering now.

* Adapted all remaining files.
Latest commit 3a9f459 Aug 7, 2018


NOW-UI for Hugo

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

Live preview.


  • 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.

  • Example includes three free MIT licensed templates and icons.

For more details, see the preview pages.


Wide display menu

Menu collapsed on smaller display

Side-drawer menu open


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/
I would recommand you to rename the directory from hugo-now-ui-master to hugo-now-ui


To discover the theme and build on top of it you must copy, as usual, the exampleSite at the root of your Hugo project. cp ./themes/hugo-now-ui/exampleSite/* ./


Again it's a best practice to overwritten a files instead of modifying it. It help you to easily updating Hugo and the theme without loosing your customization. To learn more about customizing a Hugo themes