Last active
June 13, 2019 13:01
-
-
Save tomgp/69bed4746b190bbf59de1457c2cae66c to your computer and use it in GitHub Desktop.
grid layouts
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
| <html> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| <body> | |
| <header></header> | |
| <section class="homepage-splash atf-grid"> | |
| <div class="splash__intro"> | |
| <h1>Title of the page</h1> | |
| <p>Your pier-glass will be minutely and | |
| multitudinously scratched in all directions</p> | |
| </div> | |
| <div class="splash__promo">.journal-splash</div> | |
| </section> | |
| <section class="promo-right atf-grid"> | |
| <div class="promo__text">.promo-text</div> | |
| <div class="promo__image">.promo-image</div> | |
| </section> | |
| <section class="promo-left atf-grid"> | |
| <div class="promo__text ragged"> | |
| <p>[ This div is classed <em>.ragged</em> which means that it extends, on the right, over ther grid column gap]</p> | |
| <p>He stumbled and half fell. | |
| Through a blur he saw rows of faces, curious, concerned, anxious. Men | |
| and women halting to see what the disturbance was. He fought past them | |
| toward his store. He could see Fergusson inside talking to a man, | |
| showing him an Emerson TV set. Pete Foley in the back at the service | |
| counter, setting up a new Philco. Loyce shouted at them frantically. | |
| His voice was lost in the roar of traffic and the murmur around him.</p></div> | |
| <div class="promo__image">.promo-image</div> | |
| </section> | |
| <section class="promo-right text-first atf-grid"> | |
| <div class="promo__text">.promo-text</div> | |
| <div class="promo__image">.promo-image</div> | |
| </section> | |
| <section class="promo-50-50 atf-grid"> | |
| <div class="small-promo-primary"> | |
| <div class="promo__text">.promo-text</div> | |
| <div class="promo__image">.promo-image</div> | |
| </div> | |
| <div class="small-promo-secondary"> | |
| <div class="promo__text">.promo-text</div> | |
| </div> | |
| </section> | |
| <section class="journal-archive atf-grid"> | |
| <div class="journal-archive__heading">archive heading</div> | |
| <div class="journal-archive__posts atf-archive-grid"> | |
| <div class="journal-archive__post">post</div> | |
| <div class="journal-archive__post">post</div> | |
| <div class="journal-archive__post">post</div> | |
| <div class="journal-archive__post">post</div> | |
| <div class="journal-archive__post">post</div> | |
| <div class="journal-archive__post">post</div> | |
| <div class="journal-archive__post">post</div> | |
| </div> | |
| </section> | |
| <footer></footer> | |
| </body> | |
| </html> |
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
| body{ | |
| background-color: #EEE; | |
| } | |
| div{ | |
| border: 1px dashed #000; | |
| background-color: white; | |
| } | |
| section{ | |
| border: 1px dashed #DDD; | |
| } | |
| .atf-grid{ | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| row-gap: 5px; | |
| column-gap: 20px; | |
| grid-auto-rows: minmax(50px, max-content); | |
| margin: 10px; | |
| } | |
| .atf-archive-grid{ | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| grid-gap: 5px 20px; | |
| grid-auto-rows: minmax(50px, max-content); | |
| } | |
| /* a utility class for allowing divs to push over the grid column gap */ | |
| .ragged{ | |
| margin-right:-20px; | |
| } | |
| /* | |
| home page splash stuff | |
| */ | |
| .homepage-splash{ | |
| grid-template-areas: " . intro intro intro intro intro intro . . . . ." | |
| " . . . . . . promo promo promo promo promo promo"; | |
| } | |
| @media (max-width: 650px) { | |
| .homepage-splash{ | |
| grid-template-areas: " . intro intro intro intro intro intro intro intro intro intro ." | |
| " . promo promo promo promo promo promo promo promo promo promo ."; | |
| } | |
| } | |
| .splash__intro{ | |
| grid-area: intro; | |
| } | |
| .splash__promo{ | |
| grid-area: promo; | |
| } | |
| /* | |
| promo slots | |
| */ | |
| .promo-right{ | |
| grid-template-areas: "image image image image image image . text text text text ."; | |
| } | |
| .promo-left{ | |
| grid-template-areas: ". text text text text . image image image image image image"; | |
| } | |
| @media (max-width: 650px) { | |
| .promo-left, .promo-right{ | |
| grid-template-areas: | |
| ". image image image image image image image image image image ." | |
| ". text text text text text text text text text text ."; | |
| } | |
| .promo-left.text-first, .promo-right.text-first{ | |
| grid-template-areas: | |
| ". text text text text text text text text text text . " | |
| ". image image image image image image image image image image ."; | |
| } | |
| } | |
| .promo-50-50{ | |
| grid-template-areas: ". primary primary primary primary primary secondary secondary secondary secondary secondary ."; | |
| } | |
| .small-promo-primary{ | |
| grid-area: primary; | |
| } | |
| .small-promo-secondary{ | |
| grid-area: secondary; | |
| } | |
| /* | |
| promo components | |
| */ | |
| .promo__text{ | |
| grid-area: text; | |
| } | |
| .promo__image{ | |
| grid-area: image; | |
| } | |
| /* | |
| archive components | |
| */ | |
| .journal-archive{ | |
| grid-template-areas: " . heading heading posts posts posts posts posts posts posts posts . "; | |
| } | |
| .journal-archive__posts{ | |
| grid-area: posts; | |
| } | |
| .journal-archive__heading{ | |
| grid-area: heading; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment