Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: html/content.html

Issue 29361647: Issue 4607 - Default content styles (Closed)
Patch Set: Added container & simplified html/scss Created Nov. 10, 2016, 1:22 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: html/content.html
===================================================================
new file mode 100644
--- /dev/null
+++ b/html/content.html
@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<!--
+ This file is part of universal-design-language
+ Copyright (C) 2016 Eyeo GmbH
+
+ universal-design-language is free software: you can redistribute it and/or
+ modify it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ universal-design-language is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with web.starter-kit. If not, see <http://www.gnu.org/licenses/>.
+-->
+<html dir="ltr">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <title>Content</title>
+ <link rel="stylesheet" href="/css/main.css">
+</head>
+<body>
+ <main class="container">
+
+ <h1>Content</h1>
+ <p>This document outlines a subset of HTML5 that we recommend supporting accross all websites.</p>
+
+ <h3>Headings</h3>
+
+ <h1>Heading 1</h1>
+ <h2>Heading 2</h2>
+ <h3>Heading 3</h3>
+ <h4>Heading 4</h4>
+ <h5>Heading 5</h5>
+ <h6>Heading 6</h6>
+
+ <h3>Inline styles</h3>
+
+ <p>This is a normal.</p>
+ <p>This is <em>emphasized</em>.</p>
+ <p>This is <strong>strong</strong>.</p>
+ <p>This is inline <code>code</code>.</p>
+ <p>This is an <abbr title="Abbreviation">abbr</abbr>.</p>
+ <p>This is a <a href="#">link</a>.</p>
+ <p>This has a footnote. <sup>[<a href="#">1</a>]</sup></p>
+
+ <h3>Blockquotes</h3>
+
+ <blockquote>
+ <p>This is a blockquote.</p>
+ </blockquote>
+
+ <h3>Code blocks</h3>
+
+ <pre style="height: 100px;"><code>
+Lorem ipsum dolor sit amet, consectetur
+adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna
+aliqua. Ut enim ad minim veniam, quis
+nostrud exercitation ullamco laboris
+nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit
+in voluptate velit esse cillum dolore eu
+fugiat nulla pariatur. Excepteur sint
+occaecat cupidatat non proident, sunt in
+culpa qui officia deserunt mollit anim
+id est laborum.
+ </code></pre>
+ <pre><code>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </code></pre>
+
+ <h3>Ordered lists</h3>
+
+ <ol>
+ <li>This is a list item.</li>
+ <li>This is a list item.</li>
+ <li>This is a list item.
+ <ol>
+ <li>This is a list item.</li>
+ <li>This is a list item.</li>
+ <li>This is a list item.</li>
+ <li>This is a list item.</li>
+ </ol>
+ </li>
+ <li>This is a list item.</li>
+ </ol>
+
+ <h3>Unordered lists</h3>
+
+ <ul>
+ <li>This is a list item.</li>
+ <li>This is a list item.</li>
+ <li>This is a list item.
+ <ul>
+ <li>This is a list item.</li>
+ <li>This is a list item.</li>
+ <li>This is a list item.</li>
+ <li>This is a list item.</li>
+ </ul>
+ </li>
+ <li>This is a list item.</li>
+ </ul>
+
+ <h3>Unstyled list</h3>
+
+ <ul class="unstyled-list">
+ <li>This is a list item.</li>
+ <li>This is a list item.</li>
+ <li>This is a list item.
+ <ul>
+ <li>This is a list item.</li>
+ <li>This is a list item.</li>
+ <li>This is a list item.</li>
+ <li>This is a list item.</li>
+ </ul>
+ </li>
+ <li>This is a list item.</li>
+ </ul>
+
+ <h3>Definition list</h3>
+
+ <dl>
+ <dt>This is a definition title.</dt>
+ <dd>This is a definition detail.</dd>
+ <dt>This is a definition title.</dt>
+ <dd>This is a definition detail.</dd>
+ </dl>
+
+ <h3>Embedded video</h3>
+
+ <div class="youtube-16x9">
+ <iframe src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
+ </div>
+
+ <h3>Image alignment</h3>
+
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+ <img class="block" src="//placehold.it/992x140?text=Block">
+
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+
+ <img class="float-start" src="//placehold.it/120x120?text=Start">
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ <img class="float-end" src="//placehold.it/120x120?text=End">
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+
+ </main>
+</body>
+</html>

Powered by Google App Engine
This is Rietveld