HTML Starter Template Generator - Appwork v1.1.0 Docs

Material ripple

PACE.js loader

RTL support

RTL mode

Theme settings panel

PAGE LAYOUT

LAYOUT OPTIONS

Fixed navbar

Fixed footer

Reversed

Collapsed sidenav

THEME

NAVBAR BG

SIDENAV BG

FOOTER BG

<!DOCTYPE html>

<title>{{pageTitle}} - HTML Starter</title>

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet">

<link rel="stylesheet" href="assets/vendor/fonts/ionicons.css">

<link rel="stylesheet" href="assets/vendor/css{% if rtlSupport %}/rtl{% endif %}/bootstrap{% if style == 'material' %}-material{% endif %}.css"{% if settingsPanel %} class="theme-settings-bootstrap-css"{% endif %}>
  <link rel="stylesheet" href="assets/vendor/css{% if rtlSupport %}/rtl{% endif %}/appwork{% if style == 'material' %}-material{% endif %}.css"{% if settingsPanel %} class="theme-settings-appwork-css"{% endif %}>
  <link rel="stylesheet" href="assets/vendor/css{% if rtlSupport %}/rtl{% endif %}/theme-{{theme}}{% if style == 'material' %}-material{% endif %}.css"{% if settingsPanel %} class="theme-settings-theme-css"{% endif %}>
  <link rel="stylesheet" href="assets/vendor/css{% if rtlSupport %}/rtl{% endif %}/colors{% if style == 'material' %}-material{% endif %}.css"{% if settingsPanel %} class="theme-settings-colors-css"{% endif %}>
  <link rel="stylesheet" href="assets/vendor/css{% if rtlSupport %}/rtl{% endif %}/uikit.css">

{% if materialRipple %}
  
  <script src="assets/vendor/js/material-ripple.js"></script>
  {% endif %}
  {%- if materialRipple and not settingsPanel -%}
  <script>window.attachMaterialRippleOnLoad();</script>
  {% endif %}

{% if pageLayout != 'blank' or settingsPanel %}
  
  <script src="assets/vendor/js/layout-helpers.js"></script>
  {% endif %}

{% if settingsPanel %}
  
  <script src="assets/vendor/js/theme-settings.js"></script>
  <script>
    // Use settings panel generator to configure the plugin
    window.themeSettings = new ThemeSettings({
      cssPath: 'assets/vendor/css{% if rtlSupport %}/rtl{% endif %}/',
      themesPath: 'assets/vendor/css{% if rtlSupport %}/rtl{% endif %}/'
    });
  </script>
  {% endif %}

{% if paceLoader %}
  
  <script src="assets/vendor/js/pace.js"></script>
  {% endif %}

{% if pageLayout != 'blank' and pageLayout != 'without-sidenav' %}

<link rel="stylesheet" href="assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css">
  {% endif %}

</head>
<body>
  {% if paceLoader %}
  
  <div class="page-loader"><div class="bg-primary"></div></div>
  {% endif %}

{% macro layoutNavbar(tabsCount) %}{% set tabs = '  '.repeat(tabsCount) %}
{{ tabs }}
{{ tabs }}<nav class="layout-navbar navbar navbar-expand-lg align-items-lg-center bg-{{navbarBg}} container-p-x" id="layout-navbar">
{{ tabs }}  <a href="index.html" class="navbar-brand">HTML Starter</a>

{% if pageLayout != 'horizontal-sidenav' and pageLayout != 'without-sidenav' -%}
{{ tabs }}  
{{ tabs }}  <div class="layout-sidenav-toggle navbar-nav align-items-lg-center mr-auto mr-lg-4">
{{ tabs }}    <a class="nav-item nav-link px-0 ml-2" href="javascript:void(0)">
{{ tabs }}      <i class="ion ion-md-menu text-large align-middle"></i>
{{ tabs }}    </a>
{{ tabs }}  </div>
{%- endif %}

{{ tabs }}  
{{ tabs }}  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#layout-navbar-collapse">
{{ tabs }}    <span class="navbar-toggler-icon"></span>
{{ tabs }}  </button>
{{ tabs }}
{{ tabs }}  <div class="navbar-collapse collapse" id="layout-navbar-collapse">
{{ tabs }}    <div class="navbar-nav align-items-lg-center">
{{ tabs }}      <div class="nav-item"><a class="nav-link" href="#">Link 1</a></div>
{{ tabs }}      <div class="nav-item"><a class="nav-link" href="#">Link 2</a></div>
{{ tabs }}    </div>
{{ tabs }}  </div>
{{ tabs }}</nav>
{{ tabs }}
  {% endmacro %}

{% macro layoutSidenav(tabsCount) %}{% set tabs = '  '.repeat(tabsCount) %}
{{ tabs }}
{{ tabs }}<div id="layout-sidenav" class="layout-sidenav{% if sidenavHorizontal %}-horizontal{% endif %} sidenav sidenav-{% if sidenavHorizontal %}horizontal{% else %}vertical{% endif %} bg-{{sidenavBg}}{% if sidenavHorizontal %} container-p-x flex-grow-0{% endif %}">
{{ tabs }}  <ul class="sidenav-inner{% if not sidenavHorizontal %} py-1{% endif %}">
{{ tabs }}    <li class="sidenav-item{% if templateName === 'index.html' %} active{% endif %}">
{{ tabs }}      <a href="index.html" class="sidenav-link"><i class="sidenav-icon ion ion-ios-contact"></i><div>Page 1</div></a>
{{ tabs }}    </li>
{{ tabs }}    <li class="sidenav-item{% if templateName === 'page-2.html' %} active{% endif %}">
{{ tabs }}      <a href="page-2.html" class="sidenav-link"><i class="sidenav-icon ion ion-md-desktop"></i><div>Page 2</div></a>
{{ tabs }}    </li>
{{ tabs }}  </ul>
{{ tabs }}</div>
{{ tabs }}
  {% endmacro %}

{% macro pageContent(tabsCount) -%}{% set tabs = '  '.repeat(tabsCount) %}
{% if pageLayout == 'layout-1-flex' or pageLayout == 'layout-2-flex' or pageLayout == 'without-navbar-flex' -%}
{{ tabs }}<div class="flex-shrink-1 flex-grow-0 w-25 bg-light container-p-x container-p-y">
{{ tabs }}  Side box
{{ tabs }}</div>
{{ tabs }}<div class="flex-shrink-1 flex-grow-1 container-p-x container-p-y">
{% if pageLayout == 'without-navbar-flex' -%}
{{ tabs }}  <h4 class="font-weight-bold py-3 mb-4">
{{ tabs }}    {{pageTitle}}
{{ tabs }}    <a href="#" class="layout-sidenav-toggle d-inline-block text-muted align-middle ml-3" style="font-size: 14px"><i class="ion ion-md-menu text-large align-middle"></i></a>
{{ tabs }}  </h4>
{%- else -%}
{{ tabs }}  <h4 class="font-weight-bold py-3 mb-4">{{pageTitle}}</h4>
{%- endif %}
{{ tabs }}  <p>Page content.</p>
{{ tabs }}  <p><button class="btn btn-primary btn-lg">Button</button></p>
{{ tabs }}</div>
{%- else -%}
{% if pageLayout == 'without-navbar' -%}
{{ tabs }}<h4 class="font-weight-bold py-3 mb-4">
{{ tabs }}  {{pageTitle}}
{{ tabs }}  <a href="#" class="layout-sidenav-toggle d-inline-block text-muted align-middle ml-3" style="font-size: 14px"><i class="ion ion-md-menu text-large align-middle"></i></a>
{{ tabs }}</h4>
{%- else -%}
{{ tabs }}<h4 class="font-weight-bold py-3 mb-4">{{pageTitle}}</h4>
{%- endif %}
{{ tabs }}<p>Page content.</p>
{{ tabs }}<p><button class="btn btn-primary btn-lg">Button</button></p>
{%- endif -%}
  {%- endmacro %}

{% set sidenavHorizontal = pageLayout == 'horizontal-sidenav' %}
  {% set isLayout1 = pageLayout == 'layout-1' or pageLayout == 'layout-1-flex' or pageLayout == 'horizontal-sidenav' or pageLayout == 'without-navbar' or pageLayout == 'without-navbar-flex' or pageLayout == 'without-sidenav' %}
  {% set isLayout2 = pageLayout == 'layout-2' or pageLayout == 'layout-2-flex' %}

{% if pageLayout != 'blank' %}
  
  <div class="layout-wrapper layout-{% if isLayout1 %}1{% elif isLayout2 %}2{% endif %}{% if pageLayout == 'horizontal-sidenav' or pageLayout == 'without-sidenav' %} layout-without-sidenav{% endif %}">
    
    <div class="layout-inner">

{% if isLayout1 and pageLayout != 'without-navbar' and pageLayout != 'without-navbar-flex' %}{{ layoutNavbar(3) }}{% elif isLayout2 %}{{ layoutSidenav(3) }}{% endif %}

<div class="layout-container">
        {% if isLayout1 and pageLayout != 'horizontal-sidenav' and pageLayout != 'without-sidenav' %}{{ layoutSidenav(4) }}{% elif isLayout2 %}{{ layoutNavbar(4) }}{% endif %}

<div class="layout-content">
          {% if pageLayout == 'horizontal-sidenav' %}{{ layoutSidenav(5) }}{% endif %}

<div class="container-fluid flex-grow-1 {% if pageLayout == 'layout-1-flex' or pageLayout == 'layout-2-flex' or pageLayout == 'without-navbar-flex' %}d-flex align-items-stretch p-0{% else %}container-p-y{% endif %}">
            {{- pageContent(6) }}
          </div>

<nav class="layout-footer footer bg-{{footerBg}}">
            <div class="container-fluid container-p-x pb-3">
              <a href="#" class="footer-link pt-3">Link 1</a>
              <a href="#" class="footer-link pt-3 ml-4">Link 2</a>
            </div>
          </nav>

</div>
      </div>

</div>

{%- if pageLayout != 'horizontal-sidenav' and pageLayout != 'without-sidenav' %}

<div class="layout-overlay layout-sidenav-toggle"></div>
    {%- endif %}
  </div>
  
  {% else %}
  
  {{- pageContent(1) }}
  
  {% endif %}

{% if pageLayout != 'blank' and pageLayout != 'without-sidenav' %}

<script src="assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
  {% endif %}

</body>
</html>