Created
February 28, 2018 07:38
-
-
Save thomasthesecond/c688304ef18f50f099611b0b3426ed4e to your computer and use it in GitHub Desktop.
Design Systems and CSS Grid, 8
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
| <header class="global-header" role="banner">Global header</header> | |
| <div class="template"> | |
| <div class="wrapper"> | |
| <nav class="pattern pattern--breadcrumbs"> | |
| Breadcrumbs pattern | |
| </nav> | |
| <header class="pattern pattern--poi-header"> | |
| POI header pattern | |
| </header> | |
| <div class="pattern pattern--hero-photos"> | |
| <img src="https://cl.ly/3A0Y2h0G3l22/photo.jpg"> | |
| </div> | |
| <!-- <div class="pattern pattern--booking"> | |
| Booking pattern | |
| </div> --> | |
| <div class="pattern pattern--article"> | |
| Article pattern | |
| </div> | |
| <aside class="template--right-rail"> | |
| right-rail | |
| </aside> | |
| <div class="pattern pattern--map"> | |
| Map pattern | |
| </div> | |
| <div class="pattern pattern--article"> | |
| Article pattern | |
| <!-- <hr class="divider"> --> | |
| </div> | |
| <div class="pattern pattern--related-tour"> | |
| Related tour pattern | |
| <!-- <hr class="divider"> --> | |
| </div> | |
| <div class="pattern pattern--related-hotels"> | |
| Related hotels pattern | |
| </div> | |
| <!-- <div class="pattern pattern--activities"> | |
| Activities pattern | |
| </div> --> | |
| <!-- <hr class="divider"> --> | |
| <!-- <div class="pattern pattern--ad"></div> --> | |
| </div> | |
| </div> | |
| <footer class="global-footer" role="contentinfo">Global footer</footer> |
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
| :root { | |
| --grid-columns: 6; | |
| --grid-column-gap: 12px; | |
| --grid-row-gap: 32px; | |
| --max-width: 1290px; | |
| --gutter: 16px; | |
| --edges: 4px; | |
| --border-color: #e4e4e4; | |
| --wrapper-width: 1510px; | |
| --column-width: 1fr; | |
| /* --container-width: calc(288px + 12px + 12px); */ | |
| } | |
| @media (min-width: 768px) { | |
| :root { | |
| --grid-columns: 8; | |
| --grid-column-gap: 24px; | |
| --gutter: 28px; | |
| /* --container-width: calc(712px + 24px + 24px); */ | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| :root { | |
| --grid-columns: 12; | |
| --grid-column-gap: 24px; | |
| --edges: 8px; | |
| --gutter: 32px; | |
| /* --container-width: calc(960px + 30px + 30px); */ | |
| } | |
| } | |
| /* @media (min-width: 1080px) { | |
| :root { | |
| --gutter: 64px; | |
| } | |
| } */ | |
| @media (min-width: 1354px) { | |
| :root { | |
| --grid-column-gap: 30px; | |
| /* --edges: 2px; */ | |
| --edges: 1fr; | |
| --column-width: 80px; | |
| } | |
| } | |
| /* @media (min-width: 1510px) { | |
| :root { | |
| --edges: 80px; | |
| } | |
| } */ | |
| /* @media (min-width: 1510px) { | |
| :root { | |
| --container-width: calc(1290px + 30px + 30px); | |
| } | |
| } */ | |
| @supports (display: grid) { | |
| .wrapper { | |
| display: grid; | |
| grid-column-gap: var(--grid-column-gap); | |
| grid-row-gap: var(--grid-row-gap); | |
| grid-template-columns: | |
| [full-start] | |
| var(--edges) | |
| [container-start] | |
| repeat(var(--grid-columns), [col-start] var(--column-width)) | |
| [container-end] | |
| var(--edges) | |
| [full-end]; | |
| justify-content: center; | |
| } | |
| @media (min-width: 1355px) { | |
| /* @media (min-width: 1418px) { */ | |
| .wrapper { | |
| /* display: grid; */ | |
| /* grid-gap: var(--grid-gap); */ | |
| /* grid-column-gap: var(--grid-column-gap); */ | |
| /* grid-row-gap: var(--grid-row-gap); */ | |
| /* grid-auto-rows: minmax(150px, auto); */ | |
| /* grid-template-rows: 16px 88px auto auto; */ | |
| /* grid-template-columns: | |
| [full-start] | |
| minmax(calc(calc(100% - 1350px) / 2), 1fr) | |
| [container-start] | |
| repeat(var(--grid-columns), [col-start] 1fr) | |
| [container-end] | |
| minmax(calc(calc(100% - 1350px) / 2), 1fr) | |
| [full-end]; */ | |
| } | |
| } | |
| } | |
| /* .wrapper { | |
| background-color: darkgrey; | |
| } */ | |
| .wrapper-contained { | |
| margin-left: auto; | |
| margin-right: auto; | |
| max-width: 1510px; | |
| } | |
| /* .container { | |
| background-color: white; | |
| grid-column: container; | |
| } */ | |
| /* .container-full { | |
| background-color: white; | |
| grid-column: full; | |
| } */ | |
| .pattern { | |
| align-items: center; | |
| background-color: #3b454f; | |
| color: rgba(255, 255, 255, 0.5); | |
| display: flex; | |
| font-size: 8px; | |
| justify-content: center; | |
| line-height: 1; | |
| width: 100%; | |
| } | |
| /* Layout stuff */ | |
| .divider { | |
| border: 0; | |
| border-top: 1px solid #e4e4e4; | |
| margin: 0; | |
| margin-top: var(--grid-row-gap); | |
| } | |
| .template { | |
| margin-bottom: 32px; | |
| margin-top: 32px; | |
| } | |
| @media (min-width: 768px) { | |
| .template { | |
| margin-bottom: 40px; | |
| margin-top: 40px; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .template { | |
| margin-bottom: 80px; | |
| margin-top: 8px; | |
| } | |
| } | |
| .template--right-rail { | |
| /* align-self: start; */ | |
| background-color: gainsboro; | |
| grid-column: full; | |
| } | |
| @media (min-width: 768px) { | |
| .template--right-rail { | |
| grid-column: col-start 6 / span 3; | |
| grid-row: 2 / 7; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .template--right-rail { | |
| grid-column: col-start 9 / span 4; | |
| grid-row: 3 / 8; | |
| } | |
| } | |
| .pattern--breadcrumbs { | |
| height: 16px; | |
| /* margin-bottom: 56px; */ | |
| margin-bottom: 24px; | |
| grid-column: container; | |
| } | |
| @media (max-width: 1023px) { | |
| .pattern--breadcrumbs { | |
| display: none; | |
| } | |
| } | |
| .pattern--poi-header { | |
| height: 88px; | |
| /* margin-bottom: 32px; */ | |
| /* margin-top: 24px; */ | |
| grid-column: container; | |
| } | |
| .pattern--hero-photos { | |
| /* height: 416px; */ | |
| /* margin-bottom: 40px; */ | |
| /* margin-bottom: 32px; */ | |
| /* margin-bottom: 8px; */ | |
| grid-column: full; | |
| } | |
| @media (min-width: 768px) { | |
| .pattern--hero-photos { | |
| grid-column: 1 / span 6; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .pattern--hero-photos { | |
| grid-column-end: span 9; | |
| justify-self: right; | |
| max-width: 960px; | |
| } | |
| } | |
| .pattern--hero-photos img { | |
| display: block; | |
| width: 100%; | |
| } | |
| .pattern--article { | |
| height: 264px; | |
| /* margin-bottom: 32px; */ | |
| grid-column: container; | |
| } | |
| @media (min-width: 768px) { | |
| .pattern--article { | |
| grid-column: col-start 1 / span 5; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .pattern--article { | |
| grid-column-end: span 8; | |
| } | |
| .pattern--hero-photos + .pattern--article { | |
| margin-bottom: 32px; | |
| margin-top: 32px; | |
| } | |
| } | |
| .pattern--map { | |
| height: 410px; | |
| /* margin-bottom: 32px; */ | |
| grid-column: container; | |
| } | |
| @media (min-width: 768px) { | |
| .pattern--map { | |
| grid-column: 1 / span 6; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .pattern--map { | |
| grid-column-end: span 9; | |
| justify-self: right; | |
| max-width: 960px; | |
| } | |
| } | |
| .pattern--related-tour { | |
| height: 490px; | |
| grid-column: container; | |
| } | |
| @media (min-width: 768px) { | |
| .pattern--related-tour { | |
| grid-column: col-start 1 / span 5; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .pattern--related-tour { | |
| grid-column-end: span 8; | |
| } | |
| } | |
| .pattern--related-hotels { | |
| height: 324px; | |
| grid-column: container; | |
| } | |
| /* .template-poi--nearby-places { | |
| height: 264px; | |
| margin-bottom: 32px; | |
| margin-top: 32px; | |
| } */ | |
| /* .template-poi--partner-review { | |
| height: 424px; | |
| margin-bottom: 32px; | |
| margin-top: 32px; | |
| } */ | |
| /* .template-poi--partner-features { | |
| height: 368px; | |
| margin-top: 32px; | |
| } */ | |
| .pattern--booking { | |
| height: 296px; | |
| margin-bottom: 32px; | |
| grid-column: col-start 9 / span 4; | |
| grid-row: 3; | |
| } | |
| .pattern--activities { | |
| height: 192px; | |
| margin-bottom: 16px; | |
| grid-column: col-start 9 / span 4; | |
| grid-row: 4; | |
| } | |
| .pattern--ad { | |
| height: 250px; | |
| margin-top: 32px; | |
| } | |
| /* Global header, footer */ | |
| .global-header { | |
| border-bottom: 1px solid var(--border-color); | |
| height: 130px; | |
| } | |
| .global-footer { | |
| border-top: 1px solid var(--border-color); | |
| height: 630px; | |
| } | |
| .global-header, | |
| .global-footer { | |
| align-items: center; | |
| display: flex; | |
| justify-content: center; | |
| margin-left: auto; | |
| margin-right: auto; | |
| max-width: var(--max-width); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment