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

Side by Side Diff: html/content.html

Issue 29361647: Issue 4607 - Default content styles (Closed)
Patch Set: Addressed comments (round 1) Created Nov. 8, 2016, 3:47 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« gulpfile.js ('K') | « gulpfile.js ('k') | package.json » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <!-- 2 <!--
3 This file is part of universal-design-language 3 This file is part of universal-design-language
4 Copyright (C) 2016 Eyeo GmbH 4 Copyright (C) 2016 Eyeo GmbH
5 5
6 universal-design-language is free software: you can redistribute it and/or 6 universal-design-language is free software: you can redistribute it and/or
7 modify it under the terms of the GNU General Public License as published by 7 modify it under the terms of the GNU General Public License as published by
8 the Free Software Foundation, either version 3 of the License, or 8 the Free Software Foundation, either version 3 of the License, or
9 (at your option) any later version. 9 (at your option) any later version.
10 10
11 universal-design-language is distributed in the hope that it will be useful, 11 universal-design-language is distributed in the hope that it will be useful,
12 but WITHOUT ANY WARRANTY; without even the implied warranty of 12 but WITHOUT ANY WARRANTY; without even the implied warranty of
13 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 13 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14 GNU General Public License for more details. 14 GNU General Public License for more details.
15 15
16 You should have received a copy of the GNU General Public License 16 You should have received a copy of the GNU General Public License
17 along with web.starter-kit. If not, see <http://www.gnu.org/licenses/>. 17 along with web.starter-kit. If not, see <http://www.gnu.org/licenses/>.
18 --> 18 -->
19 <html dir="ltr"> 19 <html dir="ltr">
20 <head> 20 <head>
21 <meta charset="utf-8"> 21 <meta charset="utf-8">
22 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to- fit=no"> 22 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to- fit=no">
23 <meta http-equiv="x-ua-compatible" content="ie=edge"> 23 <meta http-equiv="x-ua-compatible" content="ie=edge">
24 <title>HTML Content</title> 24 <title>Content Styleguide</title>
25 <link rel="stylesheet" href="/css/main.css"> 25 <link rel="stylesheet" href="/css/main.css">
26 <style> 26 <style>
27
28 /* NOTE: The following inline styles are meant for this demo **only**. */
29
27 body 30 body
28 { 31 {
29 margin-bottom: 4em; 32 margin: 3em 0em;
33 }
34
35 main
36 {
37 max-width: 992px;
38 margin: 0px auto;
30 } 39 }
31 40
32 header 41 header
33 { 42 {
34 border-bottom: 1px solid lightgray; 43 border-bottom: 2px solid lightgray;
35 margin: 4em 0 1em 0; 44 margin: 2em 0em 1em 0em;
45 }
46
47 .row
48 {
49 margin: 0px -15px;
50 }
51
52 .col
53 {
54 float: left;
55 width: 50%;
56 padding: 0px 15px;
57 }
58
59 .clear
60 {
61 float: none;
62 clear: both;
36 } 63 }
37 </style> 64 </style>
38 </head> 65 </head>
39 <body> 66 <body>
40 <main class="container"> 67 <main>
41 68
42 <header> 69 <h1>Content Styleguide</h1>
43 <h1>HTML Content</h1> 70 <p>
44 </header> 71 This styleguide covers a subset of HTML5 that is expected to appear in pag es and includes in Eyeo websites.
45 <ol> 72 </p>
46 <li><a href="#headings">Headings</a></li> 73 <hr>
47 <li><a href="#inline">Inline</a></li> 74
48 <li><a href="#blockquotes">Blockquotes</a></li> 75 <div class="row">
49 <li><a href="#code-blocks">Code Blocks</a></li> 76
50 <li><a href="#ordered-lists">Ordered Lists</a></li> 77 <section class="col">
51 <li><a href="#unordered-lists">Unordered Lists</a></li> 78 <header>
52 <li><a href="#unstyled-lists">Unstyled Lists</a></li> 79 <h3>Headings</h3>
53 <li><a href="#definition-lists">Definition Lists</a></li> 80 </header>
54 <li><a href="#tables">Tables</a></li> 81 <h1>Heading 1</h1>
55 <li><a href="#image-alignment">Image Alignment</a></li> 82 <h2>Heading 2</h2>
56 <li><a href="#embeds">Embeds</a></li> 83 <h3>Heading 3</h3>
57 </ol> 84 <h4>Heading 4</h4>
58 85 <h5>Heading 5</h5>
59 <section> 86 <h6>Heading 6</h6>
87 </section>
88
89 <section class="col">
90 <header>
91 <h3>Inline</h3>
92 </header>
93 <p>This is a normal.</p>
94 <p>This is <em>emphasized</em>.</p>
95 <p>This is <strong>strong</strong>.</p>
96 <p>This is inline <code>code</code>.</p>
97 <p>This is an <abbr title="Abbreviation">abbr</abbr>.</p>
98 <p>This is a <a href="#">link</a>.</p>
99 <p>This has a footnote. <sup>[<a href="#">1</a>]</sup></p>
100 </section>
101
102 <section class="col">
103 <header>
104 <h3>Blockquotes</h3>
105 </header>
106 <blockquote>
107 <p>This is a blockquote.</p>
108 </blockquote>
109 </section>
110
111 <section class="col">
112 <header>
113 <h3>Code blocks</h3>
114 </header>
115 <pre style="height: 100px;"><code>
116 Lorem ipsum dolor sit amet, consectetur
117 adipiscing elit, sed do eiusmod tempor
118 incididunt ut labore et dolore magna
119 aliqua. Ut enim ad minim veniam, quis
120 nostrud exercitation ullamco laboris
121 nisi ut aliquip ex ea commodo consequat.
122 Duis aute irure dolor in reprehenderit
123 in voluptate velit esse cillum dolore eu
124 fugiat nulla pariatur. Excepteur sint
125 occaecat cupidatat non proident, sunt in
126 culpa qui officia deserunt mollit anim
127 id est laborum.
128 </code></pre>
129 <pre><code>
130 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i ncididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru d exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aut e irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat n ulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
131 </code></pre>
132 </section>
133
134 <section class="col">
135 <header>
136 <h3>Ordered Lists</h3>
137 </header>
138 <ol>
139 <li>This is a list item.</li>
140 <li>This is a list item.</li>
141 <li>This is a list item.
142 <ol>
143 <li>This is a list item.</li>
144 <li>This is a list item.</li>
145 <li>This is a list item.</li>
146 <li>This is a list item.</li>
147 </ol>
148 </li>
149 <li>This is a list item.</li>
150 </ol>
151 </section>
152
153 <section class="col">
154 <header>
155 <h3>Unoredered Lists</h3>
156 </header>
157 <ul>
158 <li>This is a list item.</li>
159 <li>This is a list item.</li>
160 <li>This is a list item.
161 <ul>
162 <li>This is a list item.</li>
163 <li>This is a list item.</li>
164 <li>This is a list item.</li>
165 <li>This is a list item.</li>
166 </ul>
167 </li>
168 <li>This is a list item.</li>
169 </ul>
170 </section>
171
172 <section class="col">
173 <header>
174 <h3>Unstyled Lists</h3>
175 </header>
176 <ul class="unstyled-list">
177 <li>This is a list item.</li>
178 <li>This is a list item.</li>
179 <li>This is a list item.
180 <ul>
181 <li>This is a list item.</li>
182 <li>This is a list item.</li>
183 <li>This is a list item.</li>
184 <li>This is a list item.</li>
185 </ul>
186 </li>
187 <li>This is a list item.</li>
188 </ul>
189 </section>
190
191 <section class="col">
192 <header>
193 <h3>Definition Lists</h3>
194 </header>
195 <h5>This is an H5.</h5>
196 <p>This is a paragraph.</p>
197 <dl>
198 <dt>This is a definition title.</dt>
199 <dd>This is a definition detail.</dd>
200 <dt>This is a definition title.</dt>
201 <dd>This is a definition detail.</dd>
202 </dl>
203 <h6>This is an H6.</h6>
204 <p>This is a paragraph.</p>
205 </section>
206
207 <section class="col">
208 <header>
209 <h3>Embeds</h3>
210 </header>
211 <div class="youtube-16x9">
212 <iframe src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscree n></iframe>
213 </div>
214 </section>
215
216 </div>
217
218 <section class="clear">
60 <header> 219 <header>
61 <h2 id="headings">Headings</h2> 220 <h3>Image Alignment</h3>
62 </header> 221 </header>
63 <h1>Heading 1</h1> 222 <p>
64 <h2>Heading 2</h2> 223 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qui s nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
65 <h3>Heading 3</h3> 224
66 <h4>Heading 4</h4> 225 <img class="block" src="//placehold.it/992x140?text=Block">
67 <h5>Heading 5</h5> 226
68 <h6>Heading 6</h6> 227 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum do lore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, s unt in culpa qui officia deserunt mollit anim id est laborum.
228 </p>
229
230 <img class="float-start" src="//placehold.it/120x120?text=Start">
231 <p>
232 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qui s 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 c ulpa qui officia deserunt mollit anim id est laborum.
233 </p>
234 <img class="float-end" src="//placehold.it/120x120?text=End">
235 <p>
236 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qui s nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.D uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu f ugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in cu lpa qui officia deserunt mollit anim id est laborum.
237 </p>
238 <p>
239 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qui s 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 c ulpa qui officia deserunt mollit anim id est laborum.
240 </p>
69 </section> 241 </section>
70 242
71 <section>
72 <header>
73 <h2 id="inline">Inline</h2>
74 </header>
75 <p>This is a normal.</p>
76 <p>This is <em>emphasized</em>.</p>
77 <p>This is <strong>strong</strong>.</p>
78 <p>This is inline <code>code</code>.</p>
79 <p>This is an <abbr title="Abbreviation">abbr</abbr>.</p>
80 <p>This is a <a href="#">link</a>.</p>
81 </section>
82
83 <section>
84 <header>
85 <h2 id="blockquotes">Blockquotes</h2>
86 </header>
87 <blockquote>
88 <p>This is a blockquote</p>
89 </blockquote>
90 </section>
91
92 <section>
93 <header>
94 <h2 id="code-blocks">Code blocks</h2>
95 </header>
96 <pre><code>
97 #include<stdio.h>
98
99 int main(void) {
100 printf("Hello World\n");
101 return 0;
102 }
103 </code></pre>
104 </section>
105
106 <section>
107 <header>
108 <h2 id="ordered-lists">Ordered Lists</h2>
109 </header>
110 <ol>
111 <li>This is a list item</li>
112 <li>This is a list item</li>
113 <li>This is a list item
114 <ol>
115 <li>This is a list item</li>
116 <li>This is a list item</li>
117 <li>This is a list item</li>
118 <li>This is a list item</li>
119 </ol>
120 </li>
121 <li>This is a list item</li>
122 </ol>
123 </section>
124
125 <section>
126 <header>
127 <h2 id="unordered-lists">Unoredered Lists</h2>
128 </header>
129 <ul>
130 <li>This is a list item</li>
131 <li>This is a list item</li>
132 <li>This is a list item
133 <ul>
134 <li>This is a list item</li>
135 <li>This is a list item</li>
136 <li>This is a list item</li>
137 <li>This is a list item</li>
138 </ul>
139 </li>
140 <li>This is a list item</li>
141 </ul>
142 </section>
143
144 <section>
145 <header>
146 <h2 id="unstyled-lists">Unstyled Lists</h2>
147 </header>
148 <ul class="unstyled-list">
149 <li>This is a list item</li>
150 <li>This is a list item</li>
151 <li>This is a list item
152 <ul>
153 <li>This is a list item</li>
154 <li>This is a list item</li>
155 <li>This is a list item</li>
156 <li>This is a list item</li>
157 </ul>
158 </li>
159 <li>This is a list item</li>
160 </ul>
161 </section>
162
163 <section>
164 <header>
165 <h2 id="definition-lists">Definition Lists</h2>
166 </header>
167 <dl>
168 <dt>This is a question?</dt>
169 <dd>This is an answer.</dd>
170 <dt>This is a <dfn>term</dfn>.</dt>
171 <dd>This is that term's definition.</dd>
172 </dl>
173 </section>
174
175 <section>
176 <header>
177 <h2 id="tables">Tables</h2>
178 </header>
179 <table>
180 <thead>
181 <th>Heading 1</th>
182 <th>Heading 2</th>
183 <th>Heading 3</th>
184 <th>Heading 4</th>
185 </thead>
186 <tbody>
187 <tr>
188 <td>Item 1:1</td>
189 <td>Item 1:2</td>
190 <td>Item 1:3</td>
191 <td>Item 1:4</td>
192 </tr>
193 <tr>
194 <td>Item 2:1</td>
195 <td>Item 2:2</td>
196 <td>Item 2:3</td>
197 <td>Item 2:4</td>
198 </tr>
199 <tr>
200 <td>Item 3:1</td>
201 <td>Item 3:2</td>
202 <td>Item 3:3</td>
203 <td>Item 3:4</td>
204 </tr>
205 <tr>
206 <td>Item 4:1</td>
207 <td>Item 4:2</td>
208 <td>Item 4:3</td>
209 <td>Item 4:4</td>
210 </tr>
211 </tbody>
212 </table>
213 </section>
214
215 <section>
216 <header>
217 <h2 id="image-alignment">Image alignment</h2>
218 </header>
219 <p class="block">
220 This <img src="//placehold.it/100x100?text=Image"> appears inline
221 </p>
222 <p class="block">
223 This image appears
224 <img class="block" src="//placehold.it/480x100?text=Full+width">
225 </p>
226 <p class="block">
227 This image appears
228 <img class="sol" src="//placehold.it/100x100?text=Left">
229 </p>
230 <p class="block">
231 This image appears
232 <img class="eol" src="//placehold.it/100x100?text=Right">
233 </p>
234 </section>
235
236 <section>
237 <header>
238 <h2 id="embeds">Embeds</h2>
239 </header>
240 <div class="embed">
241 <iframe src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen> </iframe>
242 </div>
243 </section>
244
245 </main> 243 </main>
246
247 <script src="/node_modules/anchor-js/anchor.js"></script>
248 <script>anchors.add("header h2");</script>
249 </body> 244 </body>
250 </html> 245 </html>
OLDNEW
« gulpfile.js ('K') | « gulpfile.js ('k') | package.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld