generator-web-igniter
Version:
A yeoman generator to kickstart your frontend development.
113 lines (71 loc) • 3.95 kB
HTML
<!-- Doctype HTML5 -->
<html lang="en">
<head>
<% if (gaEnabled) { %>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=<%= gaTrackingID %>"></script>
<script src="js/googleAnalytics.js"></script>
<% } %>
<!-- Set character encoding for the document -->
<meta charset="utf-8">
<!-- Instruct Internet Explorer to use its latest rendering engine -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">
<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Recommended favicon format -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml">
<!-- Link to your stylesheets -->
<link rel="stylesheet" href="css/styles.css">
<!-- Document Title -->
<title>FE-Boilerplate made with ❤ by Sebastian & Marek.</title>
<!-- Boilerplate-styles. You can delete this. -->
<style>*{font-family:'Helvetica',Arial,sans-serif;margin:0;padding:0;box-sizing:border-box}body{background-color:#2196ce;height:100vh}header{padding:1rem;color:#2196ce;height:100vh;position:fixed;width:80px}main{height:calc(100vh - 80px);padding:3rem;color:#fff}.igniter-intro{margin-left:auto;max-width:900px;transform:rotate(16deg) skew(16deg,0deg) translate(0,4rem) translateZ(0)}a,a:visited{color:white;text-decoration:underline}a:hover{text-decoration:none}h1{color:#fff;font-size:3rem;text-align:right;margin-bottom:0}.igniter-intro div{border-radius:1rem;margin-top:1rem;padding:2rem;color:#2196ce}.igniter-intro div p{background:#fff;display:inline-block;font-size:1.8rem;font-weight:700;margin-bottom:2rem;padding:1rem}ul{list-style:none}ul:after{content:'';clear:both;display:table}li{background:#fff;display:inline-block;float:left;font-size:1.4rem;margin:0 1rem 1rem 0;padding:1rem;transition:150ms ease-in transform;transform:scale(1)}li:hover{transform:scale(.95)}footer{padding:1rem;color:#fff;height:80px;display:flex;align-items:center;justify-content:center}</style>
</head>
<body>
<!-- Example Structure -->
<!-- This might be your header including the navigation for example -->
<header>
</header>
<!-- Your page content should go in here -->
<main>
<!-- Replace or rebuild all of this content if you want -->
<section class="igniter-intro">
<h1>Thanks for using web-igniter!</h1>
<div>
<p>Your boilerplate includes:</p>
<ul>
<li><span>💪 Webpack!</span></li>
<li><span>💪 Livereload magic!</span></li>
<li><span>💪 SASS!</span></li>
<% if (installJquery) { %>
<li><span>💪 jQuery</span></li>
<% } %>
<% if (gaEnabled) { %>
<li><span>💪 Google Analytics</span></li>
<% } %>
</ul>
</div>
</section>
<% if (gaEnabled) { %>
<!-- Link tracking is done like this.
https://developers.google.com/analytics/devguides/collection/gtagjs/events -->
<!--<a href="#" onclick="gtag('event', 'click', {'event_category': 'link', 'event_label': 'dummy'});">Dummy Link</a>-->
<% } %>
</main>
<!-- This is going to be your footer -->
<footer>
<p> Made with ❤ in Ober-Ramstadt and Seeheim<% if (useImprint) { %> | <a href="impressum.html">Impressum</a><% } %></p>
</footer>
<!-- Your js magic goes here -->
<script src="js/main.js"></script>
</body>
</html>