Git Product home page Git Product logo

hugo-now-ui's Introduction

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

hugo-now-ui's People

Contributors

cboettig avatar brunoamaral avatar jodumont avatar ethanwhite avatar astropuffin avatar ringods avatar sagar2agrawal avatar simonwhitaker avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.