Disenyo

Ang sistemang pinagbuuan ng site na ito, nakadokumento mula sa live na stylesheet sa halip na isinulat na katabi nito. Itinatakda ng mga pundasyon ang hilaw na materyal. Ipinapakita ng iba pa kung paano ito nagsasama-sama.

Mga prinsipyo

Tahimik

Isang accent, ginagamit nang may layunin. Ang berde ay nangangahulugang interaksyon o diin at wala nang iba, kaya ang anumang berde sa pahina ay nag-aanyaya ng tap o nagmamarka kung ano ang mahalaga. Ang lahat ng nakapaligid dito ay itim, puti at kulay-abo.

Editorial

Nangunguna ang nilalaman. Nauuna ang espasyo kaysa sa chrome at ang type kaysa sa dekorasyon. Nananatiling nasa gilid ang layout upang mabasa ang pagsusulat at ang gawa.

Teknikal

Bawat value ay isang CSS variable, at ang mga pahinang ito ay bumabasa mula sa parehong source kapag ini-build ang site. Hindi maaaring lumihis ang dokumentasyon mula sa site dahil ito ay nabubuo mula rito.

Mga pundasyon

Kulay Isang brand green, isang neutral scale, at ang token na nagpapanatiling nababasa ang berde. Typography Isang typeface, isang role-based na scale na bumababa kada screen. Layout Tatlong column, tapat na mga breakpoint, isang four-pixel na spacing ramp. Hugis at elevation Ang radius scale, ang mga naka-theme na shadow, ang hairline na rule. Iconography Mga line icon na Feather-style at solid na brand marks. Motion Maiikli, tahimik na mga transition, at ang reduced-motion na switch.

Mga component

Mga button Dalawang tier, totoong mga state, at kung ano ang isusulat sa mga ito. Mga tag at chip Mga badge na nagsasabi ng katotohanan, mga tag na may pupuntahan. Mga card Mula sa base card hanggang sa lead at series card ng blog. Navigation Isang chrome set na nagbabago ng hugis sa tatlong viewport. Mga sheet at overlay Ang bottom-sheet primitive sa likod ng bawat picker. Mga pattern ng artikulo Mga callout, code, table, contents: ang long-form kit. Timeline Ang rail ng work experience, kasama ang mga logo dot. Media Mga post hero, ang photo carousel, ang device frame, at mga placeholder.

Nilalaman

Pagsusulat British English, sentence case, mga petsa, mga link, mga pangalan ng brand. Pagsasalin Apat na locale; ano ang isinasalin, ano ang nananatiling English, at ang boses ng bawat wika. Newsletter Isang email bawat wika: ang disenyo ng site sa inbox, gamit ang text ng mismong post.

Aksesibilidad

Accessibility Ang mga pamantayang sinusunod ng site, at ang tapat na trade-off sa contrast ng green.

Isang buháy na dokumento

Ang mga table ng kulay, type at spacing sa mga pahinang ito ay nabubuo mula sa stylesheet ng site sa build time. Baguhin ang isang token sa CSS at magbabago rin ang mga table dito kasabay nito. Kung hindi na mabasa ng parser ang stylesheet, mabibigo ang build sa halip na magpakita ng walang lamang table.