marble
Version:
WeDeploy's style guide and UI components
166 lines (159 loc) • 7.11 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo: Blog</title>
<link rel="stylesheet" href="../../build/marble.css">
<link rel="stylesheet" href="../../build/templates/tutorial.css">
<link rel="stylesheet" href="../../build/fonts/galano/galano.css">
<link rel="stylesheet" href="../../build/fonts/icon-12/icon-12.css">
<link rel="stylesheet" href="../../build/fonts/icon-16/icon-16.css">
</head>
<body class="tutorial">
<main class="content">
<nav class="sidebar">
<ul class="sidebar-list toggler-collapsed">
<li class="sidebar-item">
<a class="sidebar-link sidebar-link-read" href="step-1">
<span class="before"></span>
<span class="tutorial-step">1</span>
<span class="section-title">Overview</span>
<span class="after"></span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link sidebar-link-read" href="step-2">
<span class="before"></span>
<span class="tutorial-step">2</span>
<span class="section-title">Get the sample code</span>
<span class="after"></span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link sidebar-link-read" href="step-3">
<span class="before"></span>
<span class="tutorial-step">3</span>
<span class="section-title">Canonical URLs, Meta Data & Search</span>
<span class="after"></span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link sidebar-link-selected" href="step-4">
<span class="before"></span>
<span class="tutorial-step">4</span>
<span class="section-title">Running the App and Following this Code Lab</span>
<span class="after"></span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="step-5">
<span class="before"></span>
<span class="tutorial-step">5</span>
<span class="section-title">Step 5: Create a calculator app - dealing with exceptions</span>
<span class="after"></span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="step-6">
<span class="before"></span>
<span class="tutorial-step">6</span>
<span class="section-title">Congratulations!</span>
<span class="after"></span>
</a>
</li>
</ul>
</nav>
<div class="sidebar-offset">
<nav class="topbar topbar--light">
<div class="topbar-logo">
<a class="topbar-logo-link" href="/">
<span class="name">Tutorial Name</span>
</a>
</div>
<div class="time-remaining">
<span class="icon icon-16-clock"></span>
<span class="name">38 min remaining</span>
</div>
</nav>
<div class="container">
<div class="card">
<div class="content">
<section>
<h5>1. Introduction</h5>
<p>In this <a href="#">codelab</a>, you'll learn how to build Accelerated Mobile Pages -- or AMP for short. To achieve this you will implement a simple news article web page that conforms to the AMP specifications while incorporating several typical web features commonly used on mobile news sites.</p>
<h6>What you'll learn</h6>
<ul class="checklist">
<li>How AMP improves the user experience of the mobile web.</li>
<li>The foundations of an AMP site.</li>
<li>AMP's limitations.</li>
<li>How AMP's web components solve common news site problems.</li>
<li>How to validate your AMP.</li>
<li>How to prepare your AMP for Google Search.</li>
</ul>
<h6>What you'll need</h6>
<ul>
<li>The sample code</li>
<li><code>Python</code> (preferably 2.7) or the Chrome 200 OK Web Server extension</li>
<li>Chrome (or an equivalent browser that can inspect the JavaScript console)</li>
<li>Code Editor (for example Atom, Sublime, Notepad++)</li>
</ul>
<h6>How will you use this tutorial?</h6>
<ul class="radio-group">
<li>
<input type="radio" id="answ_1-0" name="poll_1" value="answ_1-0"><label for="answ_1-0">Read it through only</label>
</li>
<li>
<input type="radio" id="answ_1-1" name="poll_1" value="answ_1-1"><label for="answ_1-1">Read it and complete the exercises</label>
</li>
</ul>
<div class="aside">
<p>Spreadsheets? What does this have to do with getting off the main thread, avoiding janky UIs and performance?</p>
<p>Going reactive makes you define your workflow in a way that is trivial to move to another <code>thread</code>, share work between a pool of threads, and manage error conditions. Agera comes with a mechanism to yield to the UI as much as possible, which avoids dropped frames, janky scrolls and unresponsive UIs.</p>
<h6>How will you use this tutorial?</h6>
<ul class="radio-group">
<li>
<input type="radio" id="answ_2-0" name="poll_2" value="answ_2-0"><label for="answ_2-0">Read it through only</label>
</li>
<li>
<input type="radio" id="answ_2-1" name="poll_2" value="answ_2-1"><label for="answ_2-1">Read it and complete the exercises</label>
</li>
</ul>
</div>
<table class="table block fixed">
<thead>
<tr>
<th>Tables</th>
<th align="center">Are</th>
<th align="right">Cool</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 3 is</td>
<td align="center">right-aligned left-aligned centered</td>
<td align="right">$1600</td>
</tr>
<tr>
<td>col 2 is</td>
<td align="center">centered</td>
<td align="right">$12</td>
</tr>
<tr>
<td>zebra stripes</td>
<td align="center">are neat</td>
<td align="right">$1</td>
</tr>
</tbody>
</table>
<div class="text-center">
<button class="btn btn-inverse-accent">Report a problem</button>
<button class="btn btn-accent">I have installed WeDeploy CLI</button>
</div>
</section>
</div>
</div>
</div>
</div>
</main>
</body>
</html>