mirror of
https://github.com/google/material-design-lite.git
synced 2024-09-20 00:32:08 +03:00
1163 lines
42 KiB
HTML
1163 lines
42 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="no-js no-touch" itemscope itemtype="http://schema.org/Article">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Visual Style Guide — Web Starter Kit</title>
|
|
|
|
<meta name="author" content="" />
|
|
<meta name="description" content="" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta property="twitter:account_id" content="@chromium_dev" />
|
|
<meta itemprop="name" content="Visual Style Guide — Web Starter Kit">
|
|
<meta itemprop="description" content="Visual style guide used by this site.">
|
|
<link rel="stylesheet" media="screen" href="../styles/styles.css" />
|
|
|
|
</head>
|
|
|
|
<body class="page--styleguide">
|
|
|
|
<div class="summary-header">
|
|
<div class="container">
|
|
<h1 class="summary-header__title">Styleguide</h1>
|
|
<ol class="summary-header__anchor-list list-links">
|
|
<li class="summary-header__anchors-item"><a href="#typography">Typography</a></li>
|
|
<li class="summary-header__anchors-item"><a href="#buttons">Buttons</a></li>
|
|
<li class="summary-header__anchors-item"><a href="#lists">Lists</a></li>
|
|
<li class="summary-header__anchors-item"><a href="#links">Links</a></li>
|
|
<li class="summary-header__anchors-item"><a href="#icons">Icons</a></li>
|
|
<li class="summary-header__anchors-item"><a href="#breadcrumbs">Breadcrumbs</a></li>
|
|
<li class="summary-header__anchors-item"><a href="#table">Table</a></li>
|
|
<li class="summary-header__anchors-item"><a href="#grid">Grid</a></li>
|
|
<li class="summary-header__anchors-item"><a href="#colors">Colors</a></li>
|
|
<li class="summary-header__anchors-item"><a href="#highlights">Highlights</a></li>
|
|
<li class="summary-header__anchors-item"><a href="#editorial-header">Editorial header</a></li>
|
|
<li class="summary-header__anchors-item"><a href="#article-section">Article section</a></li>
|
|
<li class="summary-header__anchors-item"><a href="#guides-section">Guides section</a></li>
|
|
<li class="summary-header__anchors-item"><a href="#page-header">Page header</a></li>
|
|
<li class="summary-header__anchors-item"><a href="#quote">Quote</a></li>
|
|
<li class="summary-header__anchors-item"><a href="#guides-intro">Guides Intro</a></li>
|
|
<li class="summary-header__anchors-item"><a href="#featured-spotlight">Featured spotlight</a></li>
|
|
<li class="summary-header__anchors-item"><a href="#featured-list">Featured list</a></li>
|
|
<li class="summary-header__anchors-item"><a href="#article-navigation">Article navigation</a></li>
|
|
<li class="summary-header__anchors-item"><a href="#next-lessons">Next lessons</a></li>
|
|
<li class="summary-header__anchors-item"><a href="#related-guides">Related guides</a></li>
|
|
<li class="summary-header__anchors-item"><a href="#did-you-know">Did you know</a></li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
|
|
<a name="typography"></a>
|
|
<section class="styleguide__typography">
|
|
<h2 class="subsection-title"><strong class="subsection-number">#01</strong> Typography</h2>
|
|
<p class="small">Lorem ipsum dolor sit amet.</p>
|
|
<p class="base">Lorem ipsum dolor sit amet.</p>
|
|
<p class="medium">Lorem ipsum dolor sit amet.</p>
|
|
<p class="large">Lorem ipsum dolor sit amet.</p>
|
|
<p class="xlarge">Lorem ipsum dolor sit amet.</p>
|
|
<p class="xxlarge">Lorem ipsum dolor sit amet.</p>
|
|
<p class="huge">Lorem ipsum dolor sit amet.</p>
|
|
</section>
|
|
|
|
|
|
|
|
<a name="buttons"></a>
|
|
<section class="styleguide__buttons">
|
|
<h2 class="subsection-title"><strong class="subsection-number">#02</strong> Buttons</h2>
|
|
|
|
<div>
|
|
<h4>Primary</h4>
|
|
<a href="#0" class="button--primary">Use our tool</a>
|
|
</div>
|
|
|
|
<div>
|
|
<h4>Secondary</h4>
|
|
<div>
|
|
<a href="#0" class="button--secondary">Use our tool</a>
|
|
</div>
|
|
|
|
<div class="styleguide__inverted-block">
|
|
<a href="#0" class="button--secondary-variation">Use our tool</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<a name="lists"></a>
|
|
<section class="styleguide__lists">
|
|
<h2 class="subsection-title"><strong class="subsection-number">#03</strong> Lists</h2>
|
|
|
|
<h3>Default lists</h3>
|
|
|
|
<h4>ul</h4>
|
|
<ul>
|
|
<li>Lorem ipsum dolor sit amet.</li>
|
|
<li>Dicta optio cumque dolore hic ea facilis</li>
|
|
<li>Minus, possimus, veniam, incidunt eligendi</li>
|
|
</ul>
|
|
|
|
<h4>ol</h4>
|
|
<ol>
|
|
<li>Lorem ipsum dolor sit amet</li>
|
|
<li>Dicta optio cumque dolore hic ea facilis</li>
|
|
<li>Minus, possimus, veniam, incidunt eligendi</li>
|
|
<li>Lorem ipsum dolor sit amet</li>
|
|
<li>Dicta optio cumque dolore hic ea facilis</li>
|
|
<li>Minus, possimus, veniam, incidunt eligendi</li>
|
|
<li>Lorem ipsum dolor sit amet</li>
|
|
<li>Dicta optio cumque dolore hic ea facilis</li>
|
|
<li>Minus, possimus, veniam, incidunt eligendi</li>
|
|
<li>Lorem ipsum dolor sit amet</li>
|
|
<li>Dicta optio cumque dolore hic ea facilis</li>
|
|
</ol>
|
|
|
|
<h3>Default lists of links</h3>
|
|
|
|
<h4>ul</h4>
|
|
<ul class="list-links"> <!-- # helvetica -->
|
|
<li class="list__item"><a href="#">Lorem ipsum dolor sit amet</a></li>
|
|
<li class="list__item"><a href="#">Dicta optio cumque dolore hic ea facilis</a></li>
|
|
<li class="list__item"><a href="#">Minus, possimus, veniam, incidunt eligendi</a></li>
|
|
</ul>
|
|
|
|
<ul class="list-links list-links--primary"> <!-- > roboto -->
|
|
<li class="list__item"><a href="#">Lorem ipsum dolor sit amet</a></li>
|
|
<li class="list__item"><a href="#">Dicta optio cumque dolore hic ea facilis</a></li>
|
|
<li class="list__item"><a href="#">Minus, possimus, veniam, incidunt eligendi</a></li>
|
|
</ul>
|
|
|
|
<h4>ol</h4>
|
|
<ol class="list-links">
|
|
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
|
|
<li class="current"><a href="#">Dicta optio cumque dolore hic ea facilis</a></li>
|
|
<li><a href="#">Minus, possimus, veniam, incidunt eligendi</a></li>
|
|
</ol>
|
|
|
|
<ol class="list-anchor">
|
|
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
|
|
<li><a href="#">Dicta optio cumque dolore hic ea facilis</a></li>
|
|
<li><a href="#">Minus, possimus, veniam, incidunt eligendi</a></li>
|
|
</ol>
|
|
|
|
<ol class="list-anchor list-small">
|
|
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
|
|
<li><a href="#">Dicta optio cumque dolore hic ea facilis</a></li>
|
|
<li><a href="#">Minus, possimus, veniam, incidunt eligendi</a></li>
|
|
</ol>
|
|
|
|
<ol class="list-links list-links--secondary">
|
|
<li><a href="#">Layout basics</a></li>
|
|
<li><a href="#">Basics layouts</a></li>
|
|
<li><a href="#">Layout patterns</a></li>
|
|
</ol>
|
|
|
|
<ol class="list-links list-links--secondary list-small">
|
|
<li><a href="#">Layout basics</a></li>
|
|
<li><a href="#">Basics layouts</a></li>
|
|
<li><a href="#">Layout patterns</a></li>
|
|
</ol>
|
|
|
|
</section>
|
|
|
|
|
|
<a name="links"></a>
|
|
<section class="styleguide__links">
|
|
<h2 class="subsection-title"><strong class="subsection-number">#04</strong> Links</h2>
|
|
|
|
<div>
|
|
<h4>Primary</h4>
|
|
<a href="#" class="cta--primary">Use our tool</a>
|
|
</div>
|
|
|
|
<div>
|
|
<h4>Secondary</h4>
|
|
<div>
|
|
<a href="#" class="cta--secondary">Use our tool</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="cta">use our tool</a> Fugiat, quam alias voluptatem tempora minus dolor facere cumque necessitatibus placeat velit aliquid ab dolore beatae. Neque ipsam in a illum repellendus?</p>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<a name="icons"></a>
|
|
<section class="styleguide__icons">
|
|
<h2 class="styleguide__icons"><strong class="subsection-number">#05</strong> Icons</h2>
|
|
|
|
<div class="clear">
|
|
<p class="g--third"><i class="icon icon-minus"></i></p>
|
|
<p class="g--third"><i class="icon icon-plus"></i></p>
|
|
<p class="g--third g--last"><i class="icon icon-star"></i></p>
|
|
<p class="g--third"><i class="icon icon-chevron-right"></i></p>
|
|
<p class="g--third"><i class="icon icon-chevron-left"></i></p>
|
|
<p class="g--third g--last"><i class="icon icon-chevron-up"></i></p>
|
|
<p class="g--third"><i class="icon icon-chevron-down"></i></p>
|
|
<p class="g--third"><i class="icon icon-slash"></i></p>
|
|
<p class="g--third g--last"><i class="icon icon-google-dev"></i></p>
|
|
<p class="g--third"><i class="icon icon-lessons"></i></p>
|
|
<p class="g--third"><i class="icon icon-multi-device-layouts"></i></p>
|
|
<p class="g--third g--last"><i class="icon icon-user-input"></i></p>
|
|
<p class="g--third"><i class="icon icon-introduction-to-media"></i></p>
|
|
<p class="g--third"><i class="icon icon-performance"></i></p>
|
|
<p class="g--third g--last"><i class="icon icon-bullet"></i></p>
|
|
<p class="g--third"><i class="icon icon-chevron-large"></i></p>
|
|
<p class="g--third"><i class="icon icon-close"></i></p>
|
|
<p class="g--third g--last"><i class="icon icon-cog"></i></p>
|
|
<p class="g--third"><i class="icon icon-diamond"></i></p>
|
|
<p class="g--third"><i class="icon icon-exclamation"></i></p>
|
|
<p class="g--third g--last"><i class="icon icon-hash"></i></p>
|
|
<p class="g--third"><i class="icon icon-menu"></i></p>
|
|
<p class="g--third"><i class="icon icon-question"></i></p>
|
|
<p class="g--third g--last"><i class="icon icon-tick"></i></p>
|
|
</div>
|
|
|
|
<h4>Icon Circles</h4>
|
|
|
|
<div class="clear">
|
|
<p class="g--half"><span class="icon-circle"><i class="icon icon-lessons"></i></span></p>
|
|
<p class="g--half g--last"><span class="icon-circle"><i class="icon icon-lessons"></i></span></p>
|
|
<p class="g--half"><span class="icon-circle"><i class="icon icon-lessons"></i></span></p>
|
|
<p class="g--half g--last"><span class="icon-circle"><i class="icon icon-lessons"></i></span></p>
|
|
</div>
|
|
|
|
<h4>Icon Circles - Themed</h4>
|
|
|
|
<div class="clear">
|
|
<p class="g--half theme--multi-device-layouts"><span class="icon-circle themed--background"><i class="icon icon-multi-device-layouts"></i></span></p>
|
|
<p class="g--half g--last theme--user-input"><span class="icon-circle themed--background"><i class="icon icon-user-input"></i></span></p>
|
|
<p class="g--half theme--introduction-to-media"><span class="icon-circle themed--background"><i class="icon icon-introduction-to-media"></i></span></p>
|
|
<p class="g--half g--last theme--performance"><span class="icon-circle themed--background"><i class="icon icon-performance"></i></span></p>
|
|
</div>
|
|
|
|
<h4>Icon Circles - Large</h4>
|
|
|
|
<div class="clear">
|
|
<p class="g--half theme--multi-device-layouts"><span class="icon-circle--large themed--background"><i class="icon icon-multi-device-layouts"></i></span></p>
|
|
<p class="g--half g--last theme--user-input"><span class="icon-circle--large themed--background"><i class="icon icon-user-input"></i></span></p>
|
|
<p class="g--half theme--introduction-to-media"><span class="icon-circle--large themed--background"><i class="icon icon-introduction-to-media"></i></span></p>
|
|
<p class="g--half g--last theme--performance"><span class="icon-circle--large themed--background"><i class="icon icon-performance"></i></span></p>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<a name="breadcrumbs"></a>
|
|
<section class="styleguide__breadcrumb">
|
|
<h2 class="subsection-title"><strong class="subsection-number">#06</strong> Breadcrumbs</h2>
|
|
|
|
<nav class="breadcrumbs">
|
|
<p><a href="#" class="breadcrumbs__link">Link 1</a> / <a href="#" class="breadcrumbs__link">Link 2</a> / <a href="#" class="breadcrumbs__link">Link 3</a> / <a href="#" class="breadcrumbs__link">Link 4</a> </p>
|
|
</nav>
|
|
|
|
</section>
|
|
|
|
<a name="table"></a>
|
|
<section class="styleguide__table">
|
|
<h2 class="subsection-title"><strong class="subsection-number">#07</strong> Table</h2>
|
|
|
|
<table class="table-4">
|
|
<colgroup>
|
|
<col span="1">
|
|
<col span="1">
|
|
<col span="1">
|
|
<col span="1">
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th>Element</th>
|
|
<th>Availability</th>
|
|
<th>Description</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-th="element"><code>src</code></td>
|
|
<td data-th="availability">All browsers</td>
|
|
<td data-th="description">Gives the address (URL) of the video.</td>
|
|
<td data-th="description">Gives the address (URL) of the video.</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-th="element"><code>poster</code></td>
|
|
<td data-th="availability">All browsers</td>
|
|
<td data-th="description">Gives the address (URL) of an image file that the browser can show as soon as the video element loads, before playback begins.</td>
|
|
<td data-th="description">Gives the address (URL) of an image file that the browser can show as soon as the video element loads, before playback begins.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table class="table-3">
|
|
<colgroup>
|
|
<col span="1">
|
|
<col span="1">
|
|
<col span="1">
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th>Element</th>
|
|
<th>Availability</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-th="element"><code>src</code></td>
|
|
<td data-th="availability">All browsers</td>
|
|
<td data-th="description">Gives the address (URL) of the video.</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-th="element"><code>poster</code></td>
|
|
<td data-th="availability">All browsers</td>
|
|
<td data-th="description">Gives the address (URL) of an image file that the browser can show as soon as the video element loads, before playback begins.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table class="table-2">
|
|
<colgroup>
|
|
<col span="1">
|
|
<col span="1">
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th>Element</th>
|
|
<th>Availability</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-th="element"><code>src</code></td>
|
|
<td data-th="availability">Rules applied for any browser width over the value defined in the query.</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-th="element"><code>poster</code></td>
|
|
<td data-th="availability">Rules applied for any browser width over the value defined in the query.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p>
|
|
<b>Note:</b> <code>markdown</code> isn't recognized in tables, therefore any code
|
|
blocks should be wrapped in <code> tags.
|
|
</p>
|
|
|
|
</section>
|
|
|
|
<a name="grid"></a>
|
|
<section class="styleguide__grid">
|
|
<h2 class="subsection-title"><strong class="subsection-number">#08</strong> Grid</h2>
|
|
|
|
<div class="clear demo">
|
|
<div class="g-medium--half g-wide--1"></div>
|
|
<div class="g-medium--half g-medium--last g-wide--1"></div>
|
|
<div class="g-medium--half g-wide--1"></div>
|
|
<div class="g-medium--half g-medium--last g-wide--1 g-wide--last"></div>
|
|
</div>
|
|
|
|
<div class="clear demo">
|
|
<div class="g-wide--1 g-medium--half"></div>
|
|
<div class="g-wide--3 g-wide--last g-medium--half g--last"></div>
|
|
</div>
|
|
|
|
<div class="clear demo">
|
|
<div class="g-wide--3 g-medium--half"></div>
|
|
<div class="g-wide--1 g-wide--last g-medium--half g--last"></div>
|
|
</div>
|
|
|
|
<div class="clear demo">
|
|
<div class="g-medium--full g-wide--full"></div>
|
|
</div>
|
|
|
|
<div class="clear demo">
|
|
<div class="g-medium--2 g-medium--last g-wide--3"></div>
|
|
</div>
|
|
|
|
<div class="clear demo">
|
|
<div class="g-medium--1 g-medium--last g-wide--2"></div>
|
|
</div>
|
|
|
|
<div class="clear demo">
|
|
<div class="g-medium--1 g-medium--last g-wide--1"></div>
|
|
</div>
|
|
|
|
<div class="clear demo">
|
|
<div class="g-medium--1 g-medium--push-2 g-medium--last g-wide--1 g-wide--push-3 g-wide--last"></div>
|
|
</div>
|
|
|
|
<div class="clear demo">
|
|
<div class="g-medium--1 g-medium--push-2 g-medium--last g-wide--2 g-wide--push-2 g-wide--last"></div>
|
|
</div>
|
|
|
|
<div class="clear demo">
|
|
<div class="g-medium--2 g-medium--push-1 g-medium--last g-wide--3 g-wide--push-1 g-wide--last"></div>
|
|
</div>
|
|
|
|
<h4>Consistent grid classes</h4>
|
|
|
|
<div class="clear demo">
|
|
<div class="g--third"></div>
|
|
<div class="g--third"></div>
|
|
<div class="g--third g--last"></div>
|
|
</div>
|
|
|
|
|
|
<div class="clear demo">
|
|
<div class="g--half"></div>
|
|
<div class="g--half g--last"></div>
|
|
</div>
|
|
|
|
<div class="clear demo">
|
|
<div class="g--half g--centered"></div>
|
|
<div class="g--third g--centered"></div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<a name="colors"></a>
|
|
<section class="styleguide__colors">
|
|
<h2 class="subsection-title"><strong class="subsection-number">#09</strong> Colours</h2>
|
|
|
|
<h3>Blacks</h3>
|
|
<ul class="styleguide__color-list list--reset clear">
|
|
<li class="color--gray-background g--half">gray-background</li>
|
|
<li class="color--gray-keyline g--half g--last">gray-keyline</li>
|
|
<li class="color--gray g--half">gray</li>
|
|
<li class="color--gray-dark g--half g--last">gray-dark</li>
|
|
</ul>
|
|
|
|
<h3>Themes</h3>
|
|
<ul class="styleguide__color-list list--reset clear">
|
|
<li class="color--layouts g--half">layouts</li>
|
|
<li class="color--layouts-secondary g--half g--last">layouts secondary</li>
|
|
<li class="color--user g--half">user</li>
|
|
<li class="color--user-secondary g--half g--last">user secondary</li>
|
|
<li class="color--media g--half">media</li>
|
|
<li class="color--media-secondary g--half g--last">media secondary</li>
|
|
<li class="color--performance g--half">performance</li>
|
|
<li class="color--performance-secondary g--half g--last">performance secondary</li>
|
|
</ul>
|
|
|
|
<h3>Google</h3>
|
|
<ul class="styleguide__color-list list--reset clear">
|
|
<li class="color--blue g--half">blue</li>
|
|
<li class="color--blue-secondary g--half g--last">blue secondary</li>
|
|
<li class="color--green g--half">green</li>
|
|
<li class="color--green-secondary g--half g--last">green secondary</li>
|
|
<li class="color--red g--half">red</li>
|
|
<li class="color--red-secondary g--half g--last">red secondary</li>
|
|
<li class="color--yellow g--half">yellow</li>
|
|
<li class="color--yellow-secondary g--half g--last">yellow secondary</li>
|
|
</ul>
|
|
|
|
<h3>Helpers</h3>
|
|
<ul class="styleguide__color-list list--reset clear">
|
|
<li class="color--text g--half">text</li>
|
|
<li class="color--highlight g--half g--last">highlight</li>
|
|
<li class="color--warning g--half">warning</li>
|
|
<li class="color--danger g--half g--last">danger</li>
|
|
<li class="color--muted g--half">muted</li>
|
|
<li class="color--remember g--half g--last">remember</li>
|
|
<li class="color--learning g--half">learning</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<a name="highlights"></a>
|
|
<h2 class="subsection-title"><strong class="subsection-number">#10</strong> Highlights</h2>
|
|
|
|
</div> <!-- // closing container -->
|
|
|
|
<section class="styleguide__highlights">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlight-module highlight-module--right highlight-module--remember ">
|
|
<div class="highlight-module__container icon-exclamation ">
|
|
<div class="highlight-module__content g-wide--push-1 g-wide--pull-1 g-medium--pull-1 ">
|
|
<p class="highlight-module__title"> Remember</p>
|
|
|
|
|
|
<p class="highlight-module__text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="content" markdown="1">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlight-module highlight-module--left highlight-module--learning ">
|
|
<div class="highlight-module__container icon-star ">
|
|
<div class="highlight-module__content g-wide--push-1 g-wide--pull-1 g-medium--push-1 ">
|
|
<p class="highlight-module__title"> Key Takeaways</p>
|
|
|
|
|
|
<p class="highlight-module__text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="content" markdown="1">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlight-module highlight-module--right highlight-module--remember ">
|
|
<div class="highlight-module__container icon-exclamation ">
|
|
<div class="highlight-module__content g-wide--push-1 g-wide--pull-1 g-medium--pull-1 ">
|
|
<p class="highlight-module__title"> Remember</p>
|
|
|
|
|
|
|
|
|
|
<ul class="highlight-module__list">
|
|
|
|
<li>Lorem ipsum dolor sit amet</li>
|
|
|
|
<li>Fugit itaque sapiente earum quo expedita</li>
|
|
|
|
<li>labore aliquam cupiditate veritatis nihil</li>
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="content" markdown="1">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlight-module highlight-module--left highlight-module--remember ">
|
|
<div class="highlight-module__container icon-exclamation ">
|
|
<div class="highlight-module__content g-wide--push-1 g-wide--pull-1 g-medium--push-1 ">
|
|
<p class="highlight-module__title"> Remember</p>
|
|
|
|
|
|
<p class="highlight-module__text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="content" markdown="1">
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<div class="highlight-module highlight-module--code highlight-module--right">
|
|
<div class="highlight-module__container">
|
|
<code class='html'><div class="highlight"><pre> <span class="cp"><!DOCTYPE html></span>
|
|
<span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span>
|
|
<span class="nt"><head></span>
|
|
<span class="nt"><title></span>Article Example: sample example<span class="nt"></title></span>
|
|
<span class="nt"></head></span>
|
|
<span class="nt"><body></span>
|
|
<span class="nt"><div</span> <span class="na">role=</span><span class="s">"main"</span><span class="nt">></span>
|
|
Hello, world.
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></body></span>
|
|
<span class="nt"></html></span>
|
|
</pre></div></code>
|
|
<a class="highlight-module__cta" href="/resources/samples/resources/styleguide/test.html">View full sample</a>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="content" markdown="1">
|
|
|
|
|
|
<div>
|
|
<pre><code class='html'><meta name="viewport" content="width=device-width, initial-scale=1.0"></code></pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlight-module highlight-module--left highlight-module--learning highlight-module--inline ">
|
|
<div class="highlight-module__container icon-star ">
|
|
<div class="highlight-module__content g-wide--pull-1 ">
|
|
<p class="highlight-module__title"> Key Takeaways</p>
|
|
|
|
|
|
|
|
|
|
<ul class="highlight-module__list">
|
|
|
|
<li>Lorem ipsum dolor sit amet</li>
|
|
|
|
<li>Fugit itaque sapiente earum quo expedita</li>
|
|
|
|
<li>labore aliquam cupiditate veritatis nihil</li>
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="content" markdown="1">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlight-module highlight-module--right highlight-module--remember highlight-module--inline ">
|
|
<div class="highlight-module__container icon-exclamation ">
|
|
<div class="highlight-module__content g-wide--pull-1 ">
|
|
<p class="highlight-module__title"> Remember</p>
|
|
|
|
|
|
|
|
|
|
<ul class="highlight-module__list">
|
|
|
|
<li>Lorem ipsum dolor sit amet</li>
|
|
|
|
<li>Fugit itaque sapiente earum quo expedita</li>
|
|
|
|
<li>labore aliquam cupiditate veritatis nihil</li>
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="content" markdown="1">
|
|
|
|
|
|
|
|
</section>
|
|
|
|
<div class="container">
|
|
<a name="editorial-header"></a>
|
|
<h2 class="subsection-title"><strong class="subsection-number">#11</strong> Editorial header</h2>
|
|
</div>
|
|
|
|
<section class="styleguide__editorial-header">
|
|
|
|
<div class="editorial-header">
|
|
<div class="container">
|
|
<nav class="breadcrumbs">
|
|
<p> / <a href="#" class="breadcrumbs__link">The Essentials</a> / <a href="#" class="breadcrumbs__link"> Multi-screen layouts</a></p>
|
|
</nav>
|
|
|
|
<h1 class="tag editorial-header__title">Layout Basics</h1>
|
|
<h2 class="editorial-header__subtitle">What is the viewport?</h2>
|
|
<p class="editorial-header__excerpt g-wide--pull-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae varius augue, eu varius dolor. Sed vitae varius augue, eu varius dolor. </p>
|
|
<p class="g-wide--pull-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae varius augue, eu varius dolor. Donec augue diam, scelerisque eget lectus in, posuere aliquet mi. Pellentesque suscipit nisl gravida sem tincidunt, id blandit turpis commodo.</p>
|
|
|
|
<div class="toc">
|
|
<p class="toc__title">In this lesson</p>
|
|
<ol class="toc__list list-anchor" id="toc">
|
|
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
|
|
<li class="current"><a href="#">Dicta optio cumque dolore hic ea facilis</a></li>
|
|
<li><a href="#">Minus, possimus, veniam, incidunt eligendi</a></li>
|
|
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
|
|
<li><a href="#">Dicta optio cumque dolore hic ea facilis</a></li>
|
|
<li><a href="#">Minus, possimus, veniam, incidunt eligendi</a></li>
|
|
</ol>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<div class="container">
|
|
<a name="article-section"></a>
|
|
<h2 class="subsection-title"><strong class="subsection-number">#12</strong> Article section</h2>
|
|
</div>
|
|
|
|
<section class="styleguide__articles-section">
|
|
<div class="articles-section">
|
|
<div class="container">
|
|
<p class="articles-count">4 guides</p>
|
|
<ol class="articles-list">
|
|
<li class="articles-list__item">
|
|
<h3 class="xlarge"><a href="#">Layout basics</a></h3>
|
|
<p class="g-wide--push-1 g-wide--pull-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, distinctio blanditiis quos porro harum nemo.</p>
|
|
<a href="#" class="cta--primary">See all lessons</a>
|
|
</li>
|
|
<li class="articles-list__item">
|
|
<h3 class="xlarge"><a href="#">Basic layouts</a></h3>
|
|
<p class="g-wide--push-1 g-wide--pull-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, distinctio blanditiis quos porro harum nemo.</p>
|
|
<a href="#" class="cta--primary">See all lessons</a>
|
|
</li>
|
|
<li class="articles-list__item">
|
|
<h3 class="xlarge"><a href="#">Layout patterns</a></h3>
|
|
<p class="g-wide--push-1 g-wide--pull-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, distinctio blanditiis quos porro harum nemo.</p>
|
|
<a href="#" class="cta--primary">See all lessons</a>
|
|
</li>
|
|
<li class="articles-list__item">
|
|
<h3 class="xlarge"><a href="#">UI Elements</a></h3>
|
|
<p class="g-wide--push-1 g-wide--pull-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, distinctio blanditiis quos porro harum nemo.</p>
|
|
<a href="#" class="cta--primary">See all lessons</a>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="container">
|
|
<a name="guides-section"></a>
|
|
<h2 class="subsection-title"><strong class="subsection-number">#13</strong> Guides section</h2>
|
|
</div>
|
|
|
|
<section class="styleguide__guides-section">
|
|
<div class="guides-section">
|
|
<header class="container">
|
|
<h2 class="xxlarge">Documentation</h2>
|
|
<p>Follow these guides and build web content users can access on any device they choose.</p>
|
|
</header>
|
|
|
|
<ul class="guides-list container-medium">
|
|
<li class="guides-list__item g--half theme--multi-device-layouts ">
|
|
<div class="primary-content">
|
|
<h3 class="xlarge"><a href="#" title="Go to Multi-Device Layouts" class="themed">Multi-Device Layouts</a></h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, velit, illum iure id in saepe laborum. Doloribus, eaque, assumenda inventore eos iusto tenetur error dolorem suscipit molestiae natus ullam aliquam?</p>
|
|
</div>
|
|
<div class="secondary-content">
|
|
<span class="icon-circle themed--background"><i class="icon icon-lessons"></i></span>
|
|
<ol class="list-links list-links--secondary">
|
|
<li><a href="#" title="Read the lesson Responsive Web Design Fundamentals">Responsive Web Design Fundamentals</a></li>
|
|
<li><a href="#" title="Read the lesson Responsive Web Design Patterns">Responsive Web Design Patterns</a></li>
|
|
<li><a href="#" title="Read the lesson Navigation and Action Patterns">Navigation and Action Patterns</a></li>
|
|
</ol>
|
|
</div>
|
|
</li>
|
|
<li class="guides-list__item g--half theme--introduction-to-media g--last">
|
|
<div class="primary-content">
|
|
<h3 class="xlarge"><a href="#" title="Go to Images, Audio and Video" class="themed">Images, Audio and Video</a></h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, fugit ea maiores omnis ad iste autem sed reiciendis amet quam deleniti sapiente laboriosam voluptate pariatur veniam quod beatae sunt architecto?</p>
|
|
</div>
|
|
<div class="secondary-content">
|
|
<span class="icon-circle themed--background"><i class="icon icon-lessons"></i></span>
|
|
<ol class="list-links list-links--secondary">
|
|
<li><a href="#" title="Read the lesson Images">Images</a></li>
|
|
<li><a href="#" title="Read the lesson Video">Video</a></li>
|
|
<li><a href="#" title="Read the lesson Audio">Audio</a></li>
|
|
</ol>
|
|
</div>
|
|
</li>
|
|
<li class="guides-list__item g--half theme--user-input ">
|
|
<div class="primary-content">
|
|
<h3 class="xlarge"><a href="#" title="Go to Forms and User Input" class="themed">Forms and User Input</a></h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, adipisci, aspernatur. Velit, consequatur, temporibus, neque minus obcaecati dolor officia architecto voluptatem et pariatur quo vitae saepe laborum ratione eum. Soluta.</p>
|
|
</div>
|
|
<div class="secondary-content">
|
|
<span class="icon-circle themed--background"><i class="icon icon-lessons"></i></span>
|
|
<ol class="list-links list-links--secondary">
|
|
<li><a href="#" title="Read the lesson Create Amazing Forms">Create Amazing Forms</a></li>
|
|
<li><a href="#" title="Read the lesson Add Touch to Your Site">Add Touch to Your Site</a></li>
|
|
</ol>
|
|
</div>
|
|
</li>
|
|
<li class="guides-list__item g--half theme--performance g--last">
|
|
<div class="primary-content">
|
|
<h3 class="xlarge"><a href="#" title="Go to Optimizing Performance" class="themed">Optimizing Performance</a></h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, ratione officia officiis natus illum quos cumque quis! Optio, dolore, eligendi ea culpa quod esse atque architecto reprehenderit at tempora itaque!</p>
|
|
</div>
|
|
<div class="secondary-content">
|
|
<span class="icon-circle themed--background"><i class="icon icon-lessons"></i></span>
|
|
<ol class="list-links list-links--secondary">
|
|
<li><a href="#" title="Read the lesson Critical Rendering Path">Critical Rendering Path</a></li>
|
|
<li><a href="#" title="Read the lesson Optimizing Content Efficiency">Optimizing Content Efficiency</a></li>
|
|
</ol>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="container">
|
|
<a name="page-header"></a>
|
|
<h2 class="subsection-title"><strong class="subsection-number">#14</strong> Page header</h2>
|
|
</div>
|
|
|
|
<section class="styleguide__page-header">
|
|
<div class="page-header">
|
|
<div class="container">
|
|
<nav class="breadcrumbs">
|
|
<p> / <a href="#" class="breadcrumbs__link"> The Essentials</a></p>
|
|
</nav>
|
|
<h3 class="xxlarge text-divider">Multi-screen layouts</h3>
|
|
<p class="page-header__excerpt g-wide--push-1 g-wide--pull-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, optio, ad, voluptates repudiandae at excepturi error delectus explicabo nulla eum provident quibusdam ipsum sapiente culpa sequi quia unde fuga id.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="container">
|
|
<a name="quote"></a>
|
|
<h2 class="subsection-title"><strong class="subsection-number">#15</strong> Quote</h2>
|
|
</div>
|
|
|
|
<section class="styleguide__quote">
|
|
<div class="quote">
|
|
<div class="container">
|
|
<blockquote class="quote__content g-wide--push-1 g-wide--pull-1 g-medium--push-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, illum, at quis vero nam minus incidunt consequatur reprehenderit aliquid blanditiis fugiat nihil dolor tempora distinctio ipsum quisquam debitis excepturi magni.
|
|
<p>Name / Details</p>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="container">
|
|
<a name="guides-intro"></a>
|
|
<h2 class="subsection-title"><strong class="subsection-number">#16</strong> Guides intro</h2>
|
|
</div>
|
|
|
|
<section class="styleguide__centered-list">
|
|
<div class="container">
|
|
<ul class="list-guides-intro list-centered list--reset clear">
|
|
<li class="g-medium--half g-wide--1 theme--multi-device-layouts ">
|
|
<a href="#" class="themed">
|
|
<span class="icon-circle--large themed--background"><i class="icon icon-multi-device-layouts"></i></span>
|
|
<h3 class="large text-divider">Multi-Device Layouts</h3>
|
|
</a>
|
|
<p>Create flexible, not fixed, layouts.</p>
|
|
<!-- <a href="#" class="cta--secondary">Get started</a> -->
|
|
</li>
|
|
<li class="g-medium--half g-wide--1 theme--introduction-to-media g-medium--last ">
|
|
<a href="#" class="themed">
|
|
<span class="icon-circle--large themed--background"><i class="icon icon-introduction-to-media"></i></span>
|
|
<h3 class="large text-divider">Images, Audio and Video</h3>
|
|
</a>
|
|
<p>Only use media that loads fast and scales.</p>
|
|
<!-- <a href="#" class="cta--secondary">Get started</a> -->
|
|
</li>
|
|
<li class="g-medium--half g-wide--1 theme--user-input ">
|
|
<a href="#" class="themed">
|
|
<span class="icon-circle--large themed--background"><i class="icon icon-user-input"></i></span>
|
|
<h3 class="large text-divider">Forms and User Input</h3>
|
|
</a>
|
|
<p>Touch, tap, click, and submit.</p>
|
|
<!-- <a href="#" class="cta--secondary">Get started</a> -->
|
|
</li>
|
|
<li class="g-medium--half g-wide--1 theme--performance g-medium--last g-wide--last ">
|
|
<a href="#" class="themed">
|
|
<span class="icon-circle--large themed--background"><i class="icon icon-performance"></i></span>
|
|
<h3 class="large text-divider">Optimizing Performance</h3>
|
|
</a>
|
|
<p>Performance is a feature.</p>
|
|
<!-- <a href="#" class="cta--secondary">Get started</a> -->
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="container">
|
|
<a name="featured-spotlight"></a>
|
|
<h2 class="subsection-title"><strong class="subsection-number">#17</strong> Featured spotlight</h2>
|
|
</div>
|
|
|
|
<a name="feature-spotlight"></a>
|
|
<section class="styleguide__feature-spotlight">
|
|
|
|
|
|
<div class="featured-spotlight">
|
|
|
|
<div class="container-medium">
|
|
|
|
<div class="featured-spotlight__container g--pull-half">
|
|
<div class="featured-spotlight__img">
|
|
<img src="../images/icons/placeholder--wide.png" alt="image exemple">
|
|
</div>
|
|
|
|
<div class="container-small">
|
|
<h3 class="xxlarge">Featured spotlight</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed vitae varius augue, eu varius dolor.</p>
|
|
<a href="#" class="cta--primary">View Google</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<div class="container">
|
|
<a name="featured-list"></a>
|
|
<h2 class="subsection-title"><strong class="subsection-number">#18</strong> Featured list</h2>
|
|
</div>
|
|
|
|
<section class="styleguide__featured-section">
|
|
<div class="featured-section">
|
|
<div class="container-medium">
|
|
<ul class="featured-list">
|
|
<li class="featured-list__item clear">
|
|
<div class="container-small">
|
|
<div class="featured-list__content g--half">
|
|
<h3>Case study</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, incidunt harum aut quae eaque sequi sunt molestiae tenetur vitae.</p>
|
|
<a href="#" class="cta--primary">View Google</a>
|
|
</div>
|
|
<div class="featured-list__img-wrapper g--half g--last">
|
|
<div class="featured-list__img">
|
|
<img src="../images/icons/placeholder--small.png" alt="image exemple">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="featured-list__item clear">
|
|
<div class="container-small">
|
|
<div class="featured-list__content g--half">
|
|
<h3>Case study</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, incidunt harum aut quae eaque sequi sunt molestiae tenetur vitae.</p>
|
|
<a href="#" class="cta--primary">View Google</a>
|
|
</div>
|
|
<div class="featured-list__img-wrapper g--half g--last">
|
|
<div class="featured-list__img">
|
|
<img src="../images/icons/placeholder--small.png" alt="image exemple">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="container">
|
|
<a name="article-navigation"></a>
|
|
<h2 class="subsection-title"><strong class="subsection-number">#19</strong> Article navigation</h2>
|
|
</div>
|
|
|
|
<section class="styleguide__article-nav">
|
|
<div class="container-medium">
|
|
<nav class="article-nav">
|
|
<a href="#" class="article-nav-link article-nav-link--prev">
|
|
<p class="article-nav-count">02</p>
|
|
<p>A need for responsive pages</p>
|
|
</a>
|
|
<a href="#" class="article-nav-link article-nav-link--next">
|
|
<p class="article-nav-count">04</p>
|
|
<p>Create images for multiple resolutions</p>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="container">
|
|
<a name="next-lessons"></a>
|
|
<h2 class="subsection-title"><strong class="subsection-number">#20</strong> Next lessons</h2>
|
|
</div>
|
|
|
|
<section class="styleguide__next-lessons">
|
|
<div class="next-lessons container-medium" data-current-lesson="03">
|
|
<h3><i class="icon icon-lessons"></i> Next Lessons</h3>
|
|
<ol class="list-lessons list-links">
|
|
<li><a href="#">Lesson title one</a></li>
|
|
<li class="current"><a href="#">Lesson title two <i class="icon icon-tick"></i></a></li>
|
|
<li><a href="#">Lesson title three</a></li>
|
|
<li><a href="#">Lesson title four</a></li>
|
|
<li><a href="#">Lesson title five</a></li>
|
|
</ol>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="container">
|
|
<a name="related-guides"></a>
|
|
<h2 class="subsection-title"><strong class="subsection-number">#21</strong> Related guides</h2>
|
|
</div>
|
|
|
|
<section class="styleguide__related-guides">
|
|
<div class="container">
|
|
|
|
|
|
<div class="related-guides clear">
|
|
<h3 class="related-guides__title g-wide--1 g-medium--full">Related guides</h3>
|
|
<div class="related-guides__section clear">
|
|
|
|
<ul class="related-guides-list list--reset">
|
|
<li class="g-medium--1 g-wide--1 theme--multi-device-layouts">
|
|
<p><a class="tag themed" href="#" title="Layout basics">Layout basics</a></p>
|
|
<p class="medium"><a href="#">Guides title which goes over two lines</a></p>
|
|
</li>
|
|
<li class="g-medium--1 g-wide--1 theme--introduction-to-media">
|
|
<p><a class="tag themed" href="#" title="Media">Introduction To Media</a></p>
|
|
<p class="medium"><a href="#">Guides completely device agnostic site created for the this website</a></p>
|
|
</li>
|
|
<li class="g-medium--1 g-medium--last g-wide--1 g-wide--last theme--performance">
|
|
<p><a class="tag themed" href="#" title="Performance">Performance</a></p>
|
|
<p class="medium"><a href="#">Guides new, completely device agnostic site created for the this website</a></p>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<div class="container">
|
|
<a name="did-you-know"></a>
|
|
<h2 class="subsection-title"><strong class="subsection-number">#22</strong> Did you know</h2>
|
|
</div>
|
|
|
|
<section class="styleguide__did-you-know">
|
|
<div class="container clear">
|
|
<div class="did-you-know">
|
|
<div class="g--half">
|
|
|
|
<h2 class="xlarge">Why mobile first</h2>
|
|
<p class="did-you-know__symbol">Body - It is really simple. We create a basic page and add a “viewport”. The viewport is the most critical component you need for building mobile-first experiences. Without it, your site will not work well on a mobile device.</p>
|
|
|
|
<div>
|
|
<p><i class="icon icon-lessons"></i> Lessons</p>
|
|
<ol class="list-links list-links--secondary">
|
|
<li><a href="#">Modern developer workflow</a></li>
|
|
<li><a href="#">Creating forms</a></li>
|
|
<li><a href="#">Touch input</a></li>
|
|
</ol>
|
|
<a href="#" class="cta--primary">See all lessons</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
<footer id="gc-footer">
|
|
<div id="gc-copyright" class="container">
|
|
<ul>
|
|
<li><a href="http://www.google.com/">Google</a></li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
<div class="grid-overlay clear">
|
|
<div class="g-medium--1 g-wide--1"></div>
|
|
<div class="g-medium--1 g-wide--1"></div>
|
|
<div class="g-medium--1 g-medium--last g-wide--1"></div>
|
|
<div class="g-wide--1 g-wide--last"></div>
|
|
</div>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|