-
Notifications
You must be signed in to change notification settings - Fork 257
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'example-css-grid' into tech-media-queries-grid-reflow
- Loading branch information
Showing
1 changed file
with
211 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,211 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Using media queries and grid CSS to reflow columns</title> | ||
| <style> | ||
|
|
||
| /* Reflow Styling */ | ||
| header[role="banner"] { grid-area: header; } | ||
| main[role="main"] { grid-area: main; } | ||
| aside[role="complementary"] { grid-area: aside; } | ||
| footer[role="contentinfo"] { grid-area: footer; } | ||
|
|
||
| .grid, | ||
| .subgrid { | ||
| display: grid; | ||
| grid-template-columns: 1fr; | ||
| } | ||
|
|
||
| .grid { | ||
| grid-template-areas: | ||
| 'header' | ||
| 'main' | ||
| 'aside' | ||
| 'footer'; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .subgrid { | ||
| width: calc(100% + 2em); | ||
| margin: 0 -1em; | ||
| } | ||
|
|
||
| .grid-item, | ||
| .subgrid-item { | ||
| padding: 1em; | ||
| } | ||
|
|
||
| @media all and (min-width: 576px) { | ||
| .subgrid { | ||
| grid-template-columns: 1fr 1fr; | ||
| margin-bottom: 1rem; | ||
| } | ||
| .subgrid-item { | ||
| padding-bottom: 0.25em; | ||
| } | ||
| } | ||
|
|
||
| @media all and (min-width: 992px) { | ||
| .grid { | ||
| grid-template-areas: | ||
| 'header header header' | ||
| 'main main aside' | ||
| 'footer footer footer'; | ||
| grid-template-columns: 1fr 1fr 1fr; | ||
| } | ||
| } | ||
|
|
||
| /* Content Styling */ | ||
|
|
||
| html { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| *, | ||
| *::before, | ||
| *::after { | ||
| box-sizing: inherit; | ||
| } | ||
|
|
||
| body { | ||
| font-family: Noto Sans,Trebuchet MS,Helvetica Neue,Arial,sans-serif; | ||
| background-color: #fafafc; | ||
| margin: 0; | ||
| } | ||
|
|
||
| a:hover { | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| h1, h2, h3 { | ||
| color: #005a6a; | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 2rem; | ||
| margin: 0; | ||
| } | ||
|
|
||
| h2 { | ||
| font-size: 1.5em; | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| h3 { | ||
| font-size: 1.2em; | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| header[role="banner"] { | ||
| background-color: #005a9c; | ||
| margin-top: 1em; | ||
| } | ||
|
|
||
| header nav ul { | ||
| list-style: none; | ||
| } | ||
|
|
||
| header nav ul li { | ||
| display: inline; | ||
| padding: 0 0.25em; | ||
| } | ||
|
|
||
| nav { | ||
| position: relative; | ||
| border-top: 1px solid #005a9c; | ||
| border-bottom: 1px solid #005a9c; | ||
| background-color: #003366; | ||
| margin: 0 -1em -1em -1em; | ||
| } | ||
|
|
||
| nav ul { | ||
| padding-left: 1em; | ||
| } | ||
|
|
||
| a { | ||
| color: #ffffff; | ||
| } | ||
|
|
||
| main[role="main"] { | ||
| background: #ffffff; | ||
| padding-bottom: 0; | ||
| } | ||
|
|
||
| aside[role="complementary"] { | ||
| border-left: 1px solid #dddddd; | ||
| } | ||
|
|
||
| footer[role="contentinfo"] { | ||
| color: #ffffff; | ||
| background-color: #3b3b3b; | ||
| } | ||
|
|
||
| footer h2 { | ||
| color: #ffffff; | ||
| } | ||
|
|
||
| .logo { | ||
| width: 90px; | ||
| vertical-align: middle; | ||
| margin: 0 .5em 1em 0; | ||
| } | ||
|
|
||
| .panel { | ||
| background-color: #fafafc; | ||
| border: 1px solid #ddd; | ||
| padding: 1rem; | ||
| } | ||
|
|
||
| </style> | ||
|
|
||
| </head> | ||
|
|
||
| <body class="grid"> | ||
|
|
||
| <header role="banner" class="grid-item"> | ||
| <a href="https://w3.org/"><img alt="W3C" class="logo" src="https://www.w3.org/WAI/assets/images/w3c.svg">Header</a> | ||
| <nav> | ||
| <ul> | ||
| <li><a href="#">Home</a></li> | ||
| <li><a href="#">Products</a></li> | ||
| <li><a href="#">About</a></li> | ||
| <li><a href="#">Contact</a></li> | ||
| </ul> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <main role="main" class="grid-item"> | ||
| <h1>Using media queries and grid CSS to reflow columns</h1> | ||
| <p>The objective of this technique is to be able to present content without introducing horizontal scroll bars by using layout techniques that adapt to the available horizontal space. To view the effect use the zoom feature, or change the window width of your browser. The remaining text is Latin filler text not intended to convey information.</p> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor lorem vitae quam aliquam, vel vulputate dolor ultricies. Sed sed nunc ipsum. Aliquam rhoncus risus pellentesque, faucibus nunc sodales, laoreet risus. Nulla interdum purus at facilisis porta.</p> | ||
| <div class="subgrid"> | ||
| <div class="subgrid-item"> | ||
| <div class="panel"> | ||
| <h3>Panel 1</h3> | ||
| <p>Nam venenatis turpis in erat tincidunt, non laoreet sem egestas. Etiam feugiat vehicula risus, non lobortis turpis aliquam nec. Nunc nec cursus arcu. In felis sapien, dictum a metus in, vehicula fermentum sem. Morbi in aliquam lorem. Suspendisse in interdum nunc.</p> | ||
| </div> | ||
| </div> | ||
| <div class="subgrid-item"> | ||
| <div class="panel"> | ||
| <h3>Panel 2</h3> | ||
| <p>Curabitur semper dui dui, quis interdum felis ullamcorper ut. Sed mauris eros, ullamcorper eget dolor a, fringilla consequat mi. In tortor lorem, varius in accumsan et, volutpat eu dolor. Proin fermentum velit non nulla blandit pharetra.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </main> | ||
|
|
||
| <aside role="complementary" class="grid-item"> | ||
| <h2>Aside</h2> | ||
| <p>Quisque ac ultricies massa. Ut eu aliquam sem. Aenean sit amet pharetra tellus, eu sollicitudin sem. Curabitur sit amet erat mi. Proin rutrum pretium nisl nec ornare. Curabitur ultricies eros justo, vel tempus augue consequat eget. Ut lacinia orci a eleifend facilisis.</p> | ||
| </aside> | ||
|
|
||
| <footer role="contentinfo" class="grid-item"> | ||
| <h2>Footer</h2> | ||
| <p>Copyright © 2018 W3C <sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, | ||
| <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>) <a href="/Consortium/Legal/ipr-notice">Usage policies apply</a>. | ||
| </p> | ||
| </footer> | ||
|
|
||
| </body> | ||
| </html> |