|
| 1 | +/* Here are some starter styles |
| 2 | +You can edit these or replace them entirely |
| 3 | +It's showing you a common way to organise CSS |
| 4 | +And includes solutions to common problems |
| 5 | +As well as useful links to learn more */ |
| 6 | + |
| 7 | +/* ====== Design Palette ====== |
| 8 | + This is our "design palette". |
| 9 | + It sets out the colours, fonts, styles etc to be used in this design |
| 10 | + At work, a designer will give these to you based on the corporate brand, but while you are learning |
| 11 | + You can design it yourself if you like |
| 12 | + Inspect the starter design with Devtools |
| 13 | + Click on the colour swatches to see what is happening |
| 14 | + I've put some useful CSS you won't have learned yet |
| 15 | + For you to explore and play with if you are interested |
| 16 | + https://web.dev/articles/min-max-clamp |
| 17 | + https://scrimba.com/learn-css-variables-c026 |
| 18 | +====== Design Palette ====== */ |
| 19 | +:root { |
| 20 | + --paper: oklch(7 0 0); |
| 21 | + --ink: color-mix(in oklab, var(--color) 5%, black); |
| 22 | + --font: 100%/1.5 system-ui; |
| 23 | + --space: clamp(6px, 6px + 2vw, 15px); |
| 24 | + --line: 1px solid; |
| 25 | + --container: 1280px; |
| 26 | +} |
| 27 | +/* ====== Base Elements ====== |
| 28 | + General rules for basic HTML elements in any context */ |
| 29 | +body { |
| 30 | + background: var(--paper); |
| 31 | + color: var(--ink); |
| 32 | + font: var(--font); |
| 33 | +} |
| 34 | +a { |
| 35 | + padding: var(--space); |
| 36 | + border: var(--line); |
| 37 | + max-width: fit-content; |
| 38 | +} |
| 39 | +img, |
| 40 | +svg { |
| 41 | + width: 100%; |
| 42 | + object-fit: cover; |
| 43 | +} |
| 44 | +/* ====== Site Layout ====== |
| 45 | +Setting the overall rules for page regions |
| 46 | +https://www.w3.org/WAI/tutorials/page-structure/regions/ |
| 47 | +*/ |
| 48 | +main { |
| 49 | + max-width: var(--container); |
| 50 | + margin: 0 auto calc(var(--space) * 4) auto; |
| 51 | +} |
| 52 | +footer { |
| 53 | + position: fixed; |
| 54 | + bottom: 0; |
| 55 | + text-align: center; |
| 56 | +} |
| 57 | +/* ====== Articles Grid Layout ==== |
| 58 | +Setting the rules for how articles are placed in the main element. |
| 59 | +Inspect this in Devtools and click the "grid" button in the Elements view |
| 60 | +Play with the options that come up. |
| 61 | +https://developer.chrome.com/docs/devtools/css/grid |
| 62 | +https://gridbyexample.com/learn/ |
| 63 | +*/ |
| 64 | +main { |
| 65 | + display: grid; |
| 66 | + grid-template-columns: 1fr 1fr; |
| 67 | + gap: var(--space); |
| 68 | + > *:first-child { |
| 69 | + grid-column: span 2; |
| 70 | + } |
| 71 | +} |
| 72 | +/* ====== Article Layout ====== |
| 73 | +Setting the rules for how elements are placed in the article. |
| 74 | +Now laying out just the INSIDE of the repeated card/article design. |
| 75 | +Keeping things orderly and separate is the key to good, simple CSS. |
| 76 | +*/ |
| 77 | +article { |
| 78 | + border: var(--line); |
| 79 | + padding-bottom: var(--space); |
| 80 | + text-align: left; |
| 81 | + display: grid; |
| 82 | + grid-template-columns: var(--space) 1fr var(--space); |
| 83 | + > * { |
| 84 | + grid-column: 2/3; |
| 85 | + } |
| 86 | + > img { |
| 87 | + grid-column: span 3; |
| 88 | + } |
| 89 | +} |
0 commit comments