Every layout relearn CSS layout by example

262 Pages·2021·37.135 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 .
Second edition!
In fact, this is the SECOND EDITION of Every Layout, completed
some time in June 2021. This edition converts a number of layouts
to use the property which has come to be widely supported with
gap
Flexbox as well as Grid. Using simplifies many layouts and
gap
makes them easier to understand.
Ownership
When you purchase a licence for Every Layout, you own a licence 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>
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
The property
display
In both the above examples, the element's property is set to
display
. Block elements assume all of the available space in one
block
dimension. Typically, this is the horizontal dimension, because the
is set to (horizontal; with a top to bottom
writing-mode horizontal-tb
flow direction). In some cases, and for some languages (like
↗
Mongolian ), is the appropriate writing mode.
vertical-lr
Inline elements (with the value ) behave differently.
display inline
They are laid out in line with the current context, writing mode, and