All the layout structure of an application is inside the src/app.html file. The main features of the app style are controlled by the following elements and classes.

Container div

This element wraps the entire application.

<div class="lt-vapp">...</div>

Addtionally, the following classes can be added to this element.

Header

To create a header, we use the lt-vapp-header class.

<header class="lt-vapp-header">...</header>

Menu Bar

The navigation menu is controlled by the class lt-vapp-menu. The list elements included inside the menu have to add a main tag and the first child must include the active class.

<nav class="lt-vapp-menu">
  <ul class="lt-vapp-menu-main">
    <li class="active" main="main1">
      ...
    </li>
  </ul>
</nav>

<nav class="lt-vapp-menu">
  <ul class="lt-vapp-menu-main">
    <li main="main1">
      <p class="lt-vapp-menu-item-name">
        <i class="lticon-analytics_presentation_statistics_graph"></i>
        <span>TAB 1</span>
      </p>
      <nav class="lt-vapp-menu-scroll">
        <p class="lt-vapp-menu-scroll-titles">
          <strong>Quick access</strong>
          <span>Scroll to one of the sections</span>
        </p>
        <ul>
          <li section="section11">Section 1</li>
        </ul>
      </nav>
    </li>
  </ul>
  <ul class="lt-vapp-menu-preferences">
    <li class="lt-vapp-tv-mode" title="TV Mode">
      <span class="lticon-tv_televison_movie_news"></span>
    </li>
    <li class="lt-vapp-capture-button" title="Capture app">
      <span class="lticon-polaroid_picture_image_photo"></span>
    </li>
    <li class="lt-vapp-options-button va-menu-trigger" title="General settings">
      <span class="lticon-settings_gear_preferences"></span>
    </li>
  </ul>
</nav>

Configuration Panel

This element contains the visual settings of the application. It is optional, but it must go under the header when it is included. One click on the general settings button in menu bar let you access to configuration panel. This element is divided in a top bar, a container and a footer.

<nav class="lt-vapp-config">...</nav>

<nav class="lt-vapp-config">
  <p class="lt-vapp-config-bar">
    <i class="lt-vapp-config-close LtAppIcon-close2"></i>
    <span>Close settings</span>
  </p>
  <h4>
    <i class="lticon-settings_gear_preferences"></i>
    <span>Settings</span>
  </h4>
  <div class="lt-vapp-config-form-wrapper"></div>
  <div class="lt-vapp-config-footer">
    <button class="lt-vapp-config-close grey">Cancel</button>
    <button>Update</button>
  </div>
</nav>

Tab contain

The content of the tab is wrapped in a main element.

<main class="lt-vapp-main" id="main1"></main>

Sections

Sections wrap widgets with the same theme.

<section class="lt-vapp-section" id="section11"></section>

<h3 class="lt-vapp-section-title">
  <i class="lticon-analytics_presentation_statistics_graph"></i>
  <span>Title 1</span>
  <span class="lt-vapp-section-collapser lticon-vapp_expand"></span>
</h3>

Widgets

Each widget is a graphical representation of the data.

<article class="lt-vapp-widget" id="widget1"></article>

<article class="lt-vapp-widget" id="widget1">
  <header class="lt-vapp-widget-header">
    <h3>Widget title</h3>
    <p>Widget description</p>
    <nav class="lt-vapp-widget-options">
      <span class="lt-vapp-widget-collapser "></span>
      <span class="lt-vapp-widget-menu-launcher "></span>
      <ul>
        <li>
          <i class="lticon-polaroid_picture_image_photo"></i>
          <span>Screenshot</span>
        </li>
      </ul>
    </nav>
  </header>
  <div class="lt-vapp-widget-graphic inner-padding"></div>
</article>

By default, the widgets take the max width of its container. However, you can add some class to to make it responsive.

You can add anyone in those classes (.sm- *, .md- * and .lg- *) to adjust the widths of the widgets. Add them next to the lt-vapp-widget class.

Highlights

If you want emphasize some data inside in the container, you can introduce a new article with the class lt-vapp-highlight.

<article class="lt-vapp-highlight">
  <div class="lt-vapp-highlight-item lg-4">
    <span class="lt-vapp-highlight-icon lticon-time_watch_clock_wall"></span>
    <div class="lt-vapp-highlight-info">
      <div class="lt-vapp-highlight-title">
        <h5>Num. of users.</h5>
        <span class="lt-vapp-highlight-details"></span>
      </div>
      <h4 class="lt-vapp-highlight-data">
        <span class="lt-vapp-highlight-data-value">224.576</span>
        <span class="lt-vapp-highlight-data-unit">users</span>
      </h4>
    </div>
  </div>
</article>