Every Layout: Relearn CSS Layout by Example

265 Pages·2022·3.389 MB·English

by  Heydon Pickering, Andy Bell

Preface
↗
This is the ebook version of every-layout.dev and contains all of
the same content. We made it for you because we thought you
might like to read about CSS layout in this format, and offline.
An EPUB book cannot do or show all the things a website can, and
the interactive demos are replaced with links back to the every-
↗
layout.dev website. To see all of these pages and demos, you
have to purchase the full version of Every Layout. If you are looking
at this book, you have hopefully done that already. After purchase, a
link to the full, unlocked site will accompany the link to this book in
an email.
↗
All external links in this book are marked with a symbol/character.
↗
If you see a link not suffixed with , it points to a section within the
book itself. The book has been tested to render and behave as
expected in the latest versions of Apple’s iBooks, and the Calibre e-
↗
book manager .
Editions
Third edition (current)
This edition introduced logical properties for better compatibility
with different languages and their writing modes. It also updated the
Frame component to use the property, which is now
aspect-ratio
widely supported.
Second edition
This edition converted a number of layouts to use the property
gap
which has come to be widely supported with Flexbox as well as
Grid. Using simplifies many layouts and makes them easier to
gap
understand.
First edition
We actually added a lot more content after the initial release but we
hadn’t started recording “editions” so all of those updates are
implicitly part of the first edition.
Ownership
When you purchase a licence for Every Layout, you own a license
to the content that is authored and owned by Heydon Pickering and
Andy Bell.
Fair usage and redistribution
Re-publishing and re-selling of Every Layout is strictly forbidden
and discovered instances will be pursued, legally, in accordance
with United Kingdom copyright law.
We expect licence holders to use their licence in a fair manner. We
put a lot of trust in our licence holders so that we can make using
Every Layout as frictionless as possible. We believe that you, the
licence holder, should be able to access the content that you paid
for with little to no barriers, but this also means that the licence is
easily shared.
If we suspect you are not using your license in a fair manner or
sharing it irresponsibly, we reserve the right to revoke your access
to Every Layout with no refunds, after a fair warning.
RUDIMENTS
Boxes
Composition
Units
Global and local styling
Modular scale
Axioms
LAYOUTS

The Stack

The Box

The Center

The Cluster

The Sidebar

The Switcher
The Cover

The Grid

The Frame

The Reel

The Imposter

The Icon
Boxes
↗
As Rachel Andrew has reminded us, everything in web design is
↗
a box , or the absence of a box. Not everything necessarily looks
like a box— , , and can be
border-radius clip-path transforms
deceptive, but everything takes up a box-like space. Layout is
inevitably, therefore, the arrangement of boxes.
Before one can embark on combining boxes to make composite
layouts, it is important to be familiar with how boxes themselves are
designed to behave as standard.
The box model
↗
The box model is the formula upon which layout boxes are
based, and comprises content, padding, border, and margin. CSS
lets us alter these values to change the overall size and shape of
elements’ display.
Web browsers helpfully apply default CSS styles to some elements,
meaning they are laid out in a reasonably readable fashion: even
where author CSS has not been applied.
In Chrome, the default user agent styles for paragraphs ( ) look
<p>
like…
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
… and unordered list ( ) styles look like…
<ul>