Nevo example imageDocumentation

Structure

HTML

html
  head
    // Styles + scripts
  body
    div.wrapper
      header.header
        // Logo + Navigation
      section
        // A section, with content you want
      section
        // Another section on the same level, a grid maybe?

In a nutshell

The structure on the left pretty much sums up the general code structure. No hidden stuff you need in order to get it work. Just add your sections the way you want to.

section.section-size-2
  .container
    .grid
      .column-6
        // Left column
      .column-6
        // Right column
  .container
    // Another container if you'd like

Sections

Create sections easily by using the <section> element.

Define sizes

Use the .section-size-[1 to 12] class like in the example here, where 12 is the biggest section.

header.header
  // The logo
  .brand
    img // Logo image
  // The main menu
  ul.menu.main 
    li.menu-item
      a link
    li.menu-item
      a link // Another link
  ul.social // The social (secondary) menu
    // Same markup as main
div.burger
  // Mobile menu trigger

Navigation

On the left, the main structure of your navigation menus. We can use the main menu and social navigation, which has the same markup, but only differs in styling.

Need to go deeper?

If you use more navigation items, consider a dropdown navigation. You can achieve this using another <ul> element inside your li.menu-item.

Next add a '.has-dropdown' class to the parent item and '.dropdown-nav' to your dropdown navigation.

Next: Grid
ThemeVillain is always striving for the best possible quality for its templates and themes. If you encounter bugs or need something special done with your template, please contact support@themevillain.com.Kaj — Owner @ ThemeVillain