Unified 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.
Use n/p to move between diff chunks;
N/P to move between comments.
« gulpfile.js ('K')
|
« gulpfile.js ('k')
|
package.json » ('j')
|
no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| Index: html/content.html |
| =================================================================== |
| --- a/html/content.html |
| +++ b/html/content.html |
| @@ -16,235 +16,230 @@ |
| 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>HTML Content</title> |
| + <title>Content Styleguide</title> |
| <link rel="stylesheet" href="/css/main.css"> |
| <style> |
| + |
| + /* NOTE: The following inline styles are meant for this demo **only**. */ |
| + |
| body |
| { |
| - margin-bottom: 4em; |
| + margin: 3em 0em; |
| + } |
| + |
| + main |
| + { |
| + max-width: 992px; |
| + margin: 0px auto; |
| } |
| header |
| { |
| - border-bottom: 1px solid lightgray; |
| - margin: 4em 0 1em 0; |
| + border-bottom: 2px solid lightgray; |
| + margin: 2em 0em 1em 0em; |
| + } |
| + |
| + .row |
| + { |
| + margin: 0px -15px; |
| + } |
| + |
| + .col |
| + { |
| + float: left; |
| + width: 50%; |
| + padding: 0px 15px; |
| + } |
| + |
| + .clear |
| + { |
| + float: none; |
| + clear: both; |
| } |
| </style> |
| </head> |
| <body> |
| - <main class="container"> |
| - |
| - <header> |
| - <h1>HTML Content</h1> |
| - </header> |
| - <ol> |
| - <li><a href="#headings">Headings</a></li> |
| - <li><a href="#inline">Inline</a></li> |
| - <li><a href="#blockquotes">Blockquotes</a></li> |
| - <li><a href="#code-blocks">Code Blocks</a></li> |
| - <li><a href="#ordered-lists">Ordered Lists</a></li> |
| - <li><a href="#unordered-lists">Unordered Lists</a></li> |
| - <li><a href="#unstyled-lists">Unstyled Lists</a></li> |
| - <li><a href="#definition-lists">Definition Lists</a></li> |
| - <li><a href="#tables">Tables</a></li> |
| - <li><a href="#image-alignment">Image Alignment</a></li> |
| - <li><a href="#embeds">Embeds</a></li> |
| - </ol> |
| - |
| - <section> |
| - <header> |
| - <h2 id="headings">Headings</h2> |
| - </header> |
| - <h1>Heading 1</h1> |
| - <h2>Heading 2</h2> |
| - <h3>Heading 3</h3> |
| - <h4>Heading 4</h4> |
| - <h5>Heading 5</h5> |
| - <h6>Heading 6</h6> |
| - </section> |
| - |
| - <section> |
| - <header> |
| - <h2 id="inline">Inline</h2> |
| - </header> |
| - <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> |
| - </section> |
| + <main> |
| - <section> |
| - <header> |
| - <h2 id="blockquotes">Blockquotes</h2> |
| - </header> |
| - <blockquote> |
| - <p>This is a blockquote</p> |
| - </blockquote> |
| - </section> |
| - |
| - <section> |
| - <header> |
| - <h2 id="code-blocks">Code blocks</h2> |
| - </header> |
| - <pre><code> |
| -#include<stdio.h> |
| + <h1>Content Styleguide</h1> |
| + <p> |
| + This styleguide covers a subset of HTML5 that is expected to appear in pages and includes in Eyeo websites. |
| + </p> |
| + <hr> |
| -int main(void) { |
| - printf("Hello World\n"); |
| - return 0; |
| -} |
| - </code></pre> |
| - </section> |
| + <div class="row"> |
| - <section> |
| + <section class="col"> |
| + <header> |
| + <h3>Headings</h3> |
| + </header> |
| + <h1>Heading 1</h1> |
| + <h2>Heading 2</h2> |
| + <h3>Heading 3</h3> |
| + <h4>Heading 4</h4> |
| + <h5>Heading 5</h5> |
| + <h6>Heading 6</h6> |
| + </section> |
| + |
| + <section class="col"> |
| + <header> |
| + <h3>Inline</h3> |
| + </header> |
| + <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> |
| + </section> |
| + |
| + <section class="col"> |
| + <header> |
| + <h3>Blockquotes</h3> |
| + </header> |
| + <blockquote> |
| + <p>This is a blockquote.</p> |
| + </blockquote> |
| + </section> |
| + |
| + <section class="col"> |
| + <header> |
| + <h3>Code blocks</h3> |
| + </header> |
| + <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> |
| + </section> |
| + |
| + <section class="col"> |
| + <header> |
| + <h3>Ordered Lists</h3> |
| + </header> |
| + <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> |
| + </section> |
| + |
| + <section class="col"> |
| + <header> |
| + <h3>Unoredered Lists</h3> |
| + </header> |
| + <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> |
| + </section> |
| + |
| + <section class="col"> |
| + <header> |
| + <h3>Unstyled Lists</h3> |
| + </header> |
| + <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> |
| + </section> |
| + |
| + <section class="col"> |
| + <header> |
| + <h3>Definition Lists</h3> |
| + </header> |
| + <h5>This is an H5.</h5> |
| + <p>This is a paragraph.</p> |
| + <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> |
| + <h6>This is an H6.</h6> |
| + <p>This is a paragraph.</p> |
| + </section> |
| + |
| + <section class="col"> |
| + <header> |
| + <h3>Embeds</h3> |
| + </header> |
| + <div class="youtube-16x9"> |
| + <iframe src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe> |
| + </div> |
| + </section> |
| + |
| + </div> |
| + |
| + <section class="clear"> |
| <header> |
| - <h2 id="ordered-lists">Ordered Lists</h2> |
| - </header> |
| - <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> |
| - </section> |
| - |
| - <section> |
| - <header> |
| - <h2 id="unordered-lists">Unoredered Lists</h2> |
| + <h3>Image Alignment</h3> |
| </header> |
| - <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> |
| - </section> |
| - |
| - <section> |
| - <header> |
| - <h2 id="unstyled-lists">Unstyled Lists</h2> |
| - </header> |
| - <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> |
| - </section> |
| - |
| - <section> |
| - <header> |
| - <h2 id="definition-lists">Definition Lists</h2> |
| - </header> |
| - <dl> |
| - <dt>This is a question?</dt> |
| - <dd>This is an answer.</dd> |
| - <dt>This is a <dfn>term</dfn>.</dt> |
| - <dd>This is that term's definition.</dd> |
| - </dl> |
| - </section> |
| + <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. |
| - <section> |
| - <header> |
| - <h2 id="tables">Tables</h2> |
| - </header> |
| - <table> |
| - <thead> |
| - <th>Heading 1</th> |
| - <th>Heading 2</th> |
| - <th>Heading 3</th> |
| - <th>Heading 4</th> |
| - </thead> |
| - <tbody> |
| - <tr> |
| - <td>Item 1:1</td> |
| - <td>Item 1:2</td> |
| - <td>Item 1:3</td> |
| - <td>Item 1:4</td> |
| - </tr> |
| - <tr> |
| - <td>Item 2:1</td> |
| - <td>Item 2:2</td> |
| - <td>Item 2:3</td> |
| - <td>Item 2:4</td> |
| - </tr> |
| - <tr> |
| - <td>Item 3:1</td> |
| - <td>Item 3:2</td> |
| - <td>Item 3:3</td> |
| - <td>Item 3:4</td> |
| - </tr> |
| - <tr> |
| - <td>Item 4:1</td> |
| - <td>Item 4:2</td> |
| - <td>Item 4:3</td> |
| - <td>Item 4:4</td> |
| - </tr> |
| - </tbody> |
| - </table> |
| - </section> |
| + <img class="block" src="//placehold.it/992x140?text=Block"> |
| - <section> |
| - <header> |
| - <h2 id="image-alignment">Image alignment</h2> |
| - </header> |
| - <p class="block"> |
| - This <img src="//placehold.it/100x100?text=Image"> appears inline |
| + 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 class="block"> |
| - This image appears |
| - <img class="block" src="//placehold.it/480x100?text=Full+width"> |
| + |
| + <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> |
| - <p class="block"> |
| - This image appears |
| - <img class="sol" src="//placehold.it/100x100?text=Left"> |
| + <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 class="block"> |
| - This image appears |
| - <img class="eol" src="//placehold.it/100x100?text=Right"> |
| + <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> |
| </section> |
| - <section> |
| - <header> |
| - <h2 id="embeds">Embeds</h2> |
| - </header> |
| - <div class="embed"> |
| - <iframe src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe> |
| - </div> |
| - </section> |
| - |
| </main> |
| - |
| - <script src="/node_modules/anchor-js/anchor.js"></script> |
| - <script>anchors.add("header h2");</script> |
| </body> |
| </html> |
