@travlrcom/uikit
Version:
TRAVLR UiKit
256 lines (223 loc) • 12.7 kB
HTML
<html lang="en">
<head>
<base href="/">
<meta charset="<%= htmlWebpackPlugin.options.contentManagement.head.meta.charset %>"/>
<meta name="theme-color" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.themeColor %>"/>
<meta name="viewport" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.viewport %>"/>
<meta name="robots" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.robots %>">
<meta http-equiv="X-UA-Compatible" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.httpEquiv %>">
<link rel="canonical" href="<%= htmlWebpackPlugin.options.contentManagement.head.meta.canonical %>">
<link rel="manifest" href="<%= htmlWebpackPlugin.options.contentManagement.head.meta.manifest %>">
<title><%= htmlWebpackPlugin.options.titlePage %></title>
<meta name="description" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.description %>">
<!-- Facebook -->
<meta property="og:title" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.title %>">
<meta property="og:description" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.description %>">
<meta property="og:type" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.markup.facebook.type %>" />
<meta property="og:url" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.markup.facebook.url %>">
<meta property="og:image" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.markup.facebook.image %>">
<meta property="fb:app_id" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.markup.facebook.appId %>" />
<meta property="og:site_name" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.title %>">
<!-- Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.markup.twitter.site %>" />
<meta name="twitter:title" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.title %>">
<meta name="twitter:description" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.description %>">
<meta property="twitter:image" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.markup.twitter.image %>">
<!-- Favicon -->
<link rel="shortcut icon" href="<%= htmlWebpackPlugin.options.contentManagement.head.favicon %>">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700">
<!-- Vendors -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/color-brewer.min.css" rel="stylesheet"/>
<!-- Vendors -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/color-brewer.min.css" rel="stylesheet"/>
<!-- Google Tag Manager -->
</head>
<body class="travlr-ui">
<div id="app">
<!-- core nav top -->
<header class="t-navbar-top t-background-white t-position-fixed">
<div class="t-container t-clearfix">
<div class="t-navbar-top-left t-float-left t-display-table">
<div class="t-navbar-top-left-logo t-display-table-cell t-v-align-middle t-p-r-16">
<a href="/">
<img
src="<%= require('./../../src/assets/images/statics/travlr-uikit-logo.svg') %>"
alt="TRAVLR Logo"
title="TRAVLR Logo"
class="t-navbar-top-left-logo-image">
</a>
</div>
<nav class="t-navbar-top-left-menus t-display-table-cell t-v-align-middle t-hidden-mobile">
<ul class="t-navbar-top-left-menus-list t-no-margin t-clearfix">
<% for (itemMenu of htmlWebpackPlugin.options.listMenu) { %>
<li class="t-navbar-top-left-menus-list-item t-float-left">
<a
href="<%= itemMenu.url %>"
class="t-navbar-top-left-menus-list-item-link t-color-grey-darkest t-text-callout"
title="<%= itemMenu.label %>">
<%= itemMenu.label %>
</a>
<%
if (Array.isArray(itemMenu.child)) {
%>
<!-- Begin Has Child -->
<ul class="t-navbar-top-left-menus-list-item-child t-background-white t-position-absolute t-primary-box-shadow">
<% for (itemChild of itemMenu.child) { %>
<li class="t-navbar-top-left-menus-list-item-child-item">
<a
href="<%= itemChild.url %>"
class="t-navbar-top-left-menus-list-item-child-item-link t-color-grey-darkest t-display-block t-body-text"
title="<%= itemChild.label %>">
<%= itemChild.label %>
<i class="t-icon icon-angle-right-small"></i>
</a>
<%
if (Array.isArray(itemChild.child)) {
%>
<!-- Begin Has Second Child -->
<ul class="t-navbar-top-left-menus-list-item-child-item-grandchild t-background-white t-position-absolute t-primary-box-shadow">
<% for (itemSecondChild of itemChild.child) { %>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="<%= itemSecondChild.url %>"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="<%= itemSecondChild.label %>">
<%= itemSecondChild.label %>
</a>
</li>
<% } %>
</ul>
<!-- End Has Second Child -->
<%
}
%>
</li>
<% } %>
</ul>
<!-- End Has Child -->
<%
}
%>
</li>
<% } %>
</ul>
</nav>
</div>
<div class="t-navbar-top-right t-float-right t-display-table">
<nav class="t-navbar-top-right-auth-container t-display-table-cell t-v-align-middle">
<ul class="t-navbar-top-right-menus-list t-clearfix t-no-margin t-display-table t-p-l-20">
<li class="t-navbar-top-right-menus-list-item t-display-table-cell t-hidden-mobile">
<a
href="http://"
class="t-btn t-btn-small t-btn-tertiary"
title="Download v1.0.0">Download v1.0.0
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- core nav top end -->
<!-- Begin Main Content -->
<main class="t-main-content">
<!-- section hero main -->
<section class="t-hero-main t-color-white t-background-tertiary">
<div class="t-container">
<div class="t-hero-main-content t-display-table t-w-100">
<div class="t-hero-main-content-list t-display-table-cell t-v-align-middle t-text-align-center">
<div class="t-hero-main-content-list-title">
<div class="t-columns">
<div class="t-col-8 t-col-mobile-12 t-offset-2 t-no-offset-mobile">
<h1 class="t-heading-1">TRAVLR UI Kit v1.0.0</h1>
<p class="t-label-text t-m-t-20 t-m-b-20">
A simple and clean framework making front-end web development fast & easy.
Fully responsive and filled with cool stuff.
</p>
<a href="javascript:;" class="t-btn t-btn-primary t-display-inline-block t-mobile-display-block t-btn-large t-m-r-20 t-mobile-m-r-0 t-mobile-m-b-8 t-btn-full-on-mobile">Download</a>
<a href="javascript:;" class="t-btn t-btn-inverted t-display-inline-block t-mobile-display-block t-btn-large t-btn-full-on-mobile">Documentation</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- section hero main end -->
<div class="t-container">
<!-- Begin Getting Started -->
<section class="t-section-small">
<h2 class="t-heading-2 t-m-b-5 t-color-grey-darkest">Getting Started</h2>
<p class="t-label-text">
TRAVLR UI Kit is easy to use and offers 20 useful components for quick layout creation and 8 useful add-on plugins.
</p>
<p class="t-body-text t-m-t-32 t-m-b-32">
To get started simply include the necessary resource files and start creating. TRAVLR UI Kit has no requires any dependencies.
</p>
<div class="t-panel t-primary-box-shadow t-no-margin">
<div class="t-panel-header t-p-t-0">
<div class="t-panel-header-title">
CSS
</div>
</div>
<div class="t-panel-body">
<div class="t-columns t-columns-with-gap">
<div class="t-col-10">
<pre>
<code class="xml hljs" id="gettingStarted">
<link rel="stylesheet" href="travlr-ui.css">
</code>
</pre>
</div>
<div class="t-col-2 t-text-align-right">
<button data-clipboard-action="copy" data-clipboard-target="#gettingStarted" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button>
</div>
</div>
</div>
</div>
</section>
<!-- End Getting Started -->
<div class="t-separator t-m-t-0 t-m-b-0"></div>
<!-- Begin Section Documentation -->
<section class="t-section-small">
<h2 class="t-heading-2 t-m-b-5 t-color-grey-darkest">Documentation</h2>
<p class="t-label-text">
Documentation are prestyled elements that are ready to be iplemented. Easily override default styles and customize them further.
</p>
<div class="t-columns t-columns-with-gap t-m-t-32">
<div class="t-col-3 t-col-mobile-12">
<a href="/colour-pallete.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Colour Pallete</a>
</div>
<div class="t-col-3 t-col-mobile-12">
<a href="/typography.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Typography</a>
</div>
<div class="t-col-3 t-col-mobile-12">
<a href="/assets.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Assets</a>
</div>
<div class="t-col-3 t-col-mobile-12">
<a href="/elements.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Elements</a>
</div>
<div class="t-col-3 t-col-mobile-12">
<a href="/components.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Componenets</a>
</div>
<div class="t-col-3 t-col-mobile-12">
<a href="/layouts.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Layouts</a>
</div>
</div>
</section>
<!-- End Section Documentation -->
</div>
</main>
<!-- End Main Content -->
<!-- core nav bottom -->
<%= require('html-loader!./../components/footer.html') %>
<!-- core nav bottom -->
</div>
<!-- core nav bottom script -->
<%= require('html-loader!./../components/footer-script.html') %>
<!-- core nav bottom script -->
</body>
</html>