Delta Between Two Patch Sets: html/content.html
Issue 29361647:
Issue 4607 - Default content styles (Closed)
Left Patch Set: Removed responsive headings and unnessisary comments
Created Nov. 12, 2016, 12:46 a.m.
Right Patch Set: Removed extra list items and changed image text capitilization
Created Nov. 17, 2016, 4:17 p.m.
| Left: | ||
| Right: |
Use n/p to move between diff chunks;
N/P to move between comments.
« gulpfile.js ('K')
|
« gulpfile.js ('k')
|
package.json » ('j')
|
scss/_content.scss » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| LEFT | RIGHT |
|---|---|
| 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>Content</title> | 24 <title>Content</title> |
| 25 <link rel="stylesheet" href="/css/main.css"> | 25 <link rel="stylesheet" href="/css/main.css"> |
| 26 </head> | 26 </head> |
| 27 <body> | 27 <body style="margin-bottom: 3em;"> |
|
saroyanm
2016/11/21 18:44:35
Detail: let's not encourage people to use inline s
juliandoucette
2016/11/22 00:54:02
Do we really want to create a new <style> for *jus
saroyanm
2016/11/24 13:26:49
I see couple of reasons:
* Overwriting inline-styl
saroyanm
2016/11/24 15:18:42
Acknowledged.
We gonna use <style> tag
juliandoucette
2016/11/25 16:28:41
Done.
| |
| 28 <div class="container"> | 28 <div class="container"> |
| 29 | 29 |
| 30 <h1>Content</h1> | 30 <h1>Content</h1> |
| 31 <p>This document outlines a subset of HTML5 that we recommend supporting acc ross all websites.</p> | 31 <p>This document outlines a subset of HTML5 that we recommend supporting acc ross all websites.</p> |
| 32 | 32 |
| 33 <h2>Headings</h2> | 33 <h2>Headings</h2> |
| 34 | 34 |
| 35 <h1>Heading 1</h1> | 35 <h1>Heading 1</h1> |
| 36 <h2>Heading 2</h2> | 36 <h2>Heading 2</h2> |
| 37 <h3>Heading 3</h3> | 37 <h3>Heading 3</h3> |
| 38 <h4>Heading 4</h4> | 38 <h4>Heading 4</h4> |
| 39 <h5>Heading 5</h5> | 39 <h5>Heading 5</h5> |
| 40 <h6>Heading 6</h6> | 40 <h6>Heading 6</h6> |
| 41 | 41 |
| 42 <h2>Body content</h2> | 42 <h2>Body content</h2> |
| 43 | 43 |
| 44 <p>This is a normal.</p> | 44 <p>This is a normal.</p> |
| 45 <p>This is <em>emphasized</em>.</p> | 45 <p>This is <em>emphasized</em>.</p> |
| 46 <p>This is <strong>strong</strong>.</p> | 46 <p>This is <strong>strong</strong>.</p> |
| 47 <p>This is inline <code>code</code>.</p> | |
| 48 <p>This is an <abbr title="Abbreviation">abbr</abbr>.</p> | 47 <p>This is an <abbr title="Abbreviation">abbr</abbr>.</p> |
| 49 <p>This is a <a href="#">link</a>.</p> | 48 <p>This is a <a href="#">link</a>.</p> |
| 50 <p>This has a footnote. <sup><a href="#" class="footnote-ref">1</a></sup></p > | 49 <p>This has a footnote. <sup><a href="#" class="footnote-ref">1</a></sup></p > |
| 51 <blockquote>This is a blockquote.</blockquote> | 50 <blockquote>This is a blockquote.</blockquote> |
| 52 <p>This is followed by a thematic break.</p> | 51 <p>This is followed by a thematic break.</p> |
| 53 <hr> | 52 <hr> |
| 54 <p>Like a change of scene in a story, or a shift of topic within a section.< /p> | 53 <p>Like a change of scene in a story, or a shift of topic within a section.< /p> |
| 55 | 54 |
| 56 <h3>Ordered lists</h3> | 55 <h3>Ordered lists</h3> |
| 57 | 56 |
| 58 <ol> | 57 <ol> |
| 59 <li>This is a list item.</li> | 58 <li>This is a list item</li> |
| 60 <li>This is a list item.</li> | 59 <li>This is a list item |
| 61 <li>This is a list item. | |
| 62 <ol> | 60 <ol> |
| 63 <li>This is a list item.</li> | 61 <li>This is a list item</li> |
| 64 <li>This is a list item.</li> | 62 <li>This is a list item</li> |
| 65 <li>This is a list item.</li> | |
| 66 <li>This is a list item.</li> | |
| 67 </ol> | 63 </ol> |
| 68 </li> | 64 </li> |
| 69 <li>This is a list item.</li> | 65 <li>This is a list item</li> |
| 70 </ol> | 66 </ol> |
| 71 | 67 |
| 72 <h3>Unordered lists</h3> | 68 <h3>Unordered lists</h3> |
| 73 | 69 |
| 74 <ul> | 70 <ul> |
| 75 <li>This is a list item.</li> | 71 <li>This is a list item</li> |
| 76 <li>This is a list item.</li> | 72 <li>This is a list item |
| 77 <li>This is a list item. | |
| 78 <ul> | 73 <ul> |
| 79 <li>This is a list item.</li> | 74 <li>This is a list item</li> |
| 80 <li>This is a list item.</li> | 75 <li>This is a list item</li> |
| 81 <li>This is a list item.</li> | |
| 82 <li>This is a list item.</li> | |
| 83 </ul> | 76 </ul> |
| 84 </li> | 77 </li> |
| 85 <li>This is a list item.</li> | 78 <li>This is a list item</li> |
| 86 </ul> | 79 </ul> |
| 87 | 80 |
| 88 <h3>Unstyled lists</h3> | 81 <h3>Unstyled lists</h3> |
| 89 | 82 |
| 90 <ul class="unstyled-list"> | 83 <ul class="unstyled-list"> |
| 91 <li>This is a list item.</li> | 84 <li>This is a list item</li> |
| 92 <li>This is a list item.</li> | 85 <li>This is a list item |
| 93 <li>This is a list item. | |
| 94 <ul class="unstyled-list"> | 86 <ul class="unstyled-list"> |
| 95 <li>This is a list item.</li> | 87 <li>This is a list item</li> |
| 96 <li>This is a list item.</li> | 88 <li>This is a list item</li> |
| 97 <li>This is a list item.</li> | |
| 98 <li>This is a list item.</li> | |
| 99 </ul> | 89 </ul> |
| 100 </li> | 90 </li> |
| 101 <li>This is a list item.</li> | 91 <li>This is a list item</li> |
| 102 </ul> | 92 </ul> |
| 103 | 93 |
| 104 <h3>Definition lists</h3> | 94 <h3>Definition lists</h3> |
| 105 | 95 |
| 106 <dl> | 96 <dl> |
| 107 <dt>This is a definition title.</dt> | 97 <dt>This is a definition title</dt> |
| 108 <dd>This is a definition detail.</dd> | 98 <dd>This is a definition detail</dd> |
| 109 <dt>This is a definition title.</dt> | 99 <dt>This is a definition title</dt> |
| 110 <dd>This is a definition detail.</dd> | 100 <dd>This is a definition detail</dd> |
| 111 </dl> | 101 </dl> |
| 112 | 102 |
| 113 <h3>Code blocks</h3> | 103 <h2>Images</h2> |
|
juliandoucette
2016/11/17 16:09:32
Note: I removed code and pre > code from content b
| |
| 114 | 104 |
| 115 <pre style="height: 100px;"><code> | 105 <img src="//placehold.it/480x240?text=Fixed width" /> |
| 116 Lorem ipsum dolor sit amet, consectetur | 106 <img class="full-width" src="//placehold.it/960x240?text=Full width" /> |
| 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 | |
| 133 <h3>Embedded video</h3> | |
|
juliandoucette
2016/11/17 16:09:33
Note: I removed embedded video because we don't ha
| |
| 134 | |
| 135 <div class="embed"> | |
| 136 <iframe src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></ iframe> | |
| 137 </div> | |
| 138 | |
| 139 <h2>Image alignment</h2> | |
|
juliandoucette
2016/11/17 16:09:33
Note: I removed floating images because they compl
| |
| 140 | |
| 141 <p> | |
| 142 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod te mpor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. | |
| 143 | |
| 144 <img class="full-width" src="//placehold.it/992x140?text=Block"> | |
| 145 | |
| 146 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolo re eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sun t in culpa qui officia deserunt mollit anim id est laborum. | |
| 147 </p> | |
| 148 | |
| 149 <img class="float-start" src="//placehold.it/120x120?text=Start"> | |
| 150 <p> | |
| 151 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod te mpor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Du is aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fu giat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in cul pa qui officia deserunt mollit anim id est laborum. | |
| 152 </p> | |
| 153 <img class="float-end" src="//placehold.it/120x120?text=End"> | |
| 154 <p> | |
| 155 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod te mpor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Dui s aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fug iat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culp a qui officia deserunt mollit anim id est laborum. | |
| 156 </p> | |
| 157 <p> | |
| 158 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod te mpor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Du is aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fu giat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in cul pa qui officia deserunt mollit anim id est laborum. | |
| 159 </p> | |
| 160 | 107 |
| 161 </div> | 108 </div> |
| 162 </body> | 109 </body> |
| 163 </html> | 110 </html> |
| LEFT | RIGHT |
« gulpfile.js ('k')
|
package.json » ('j')
|
Toggle Intra-line Diffs ('i')
|
Expand Comments ('e')
|
Collapse Comments ('c')
|
Toggle Comments ('s')
