Inner and outer flow, displaying and positionning
For now everything has been about shaping one element, but what about the flow of the page, the movement, the display, the positions and layout paradigm.
Position
[to be written]
Display
By default most element have a display: block;, like <p> or <div> or <ul> or <h2>. They go below each others, think of them like big stacking boxes that have the height of what's inside of them, and that construct from top to bottom.
Some element like <span> or <a> have another default display: inline;, think of them like little label that flow inside of a line of text. Often inline elements are found inside block elements.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
But not everything is either a block or a line.
On the early web, website crafter made strong use of the <table> element, which comes with its default display: table; behavior. Because they're wasn't a lot of way to create intricate layout, tables where used not to display data like it would have been expected, but to create complex nested design structure and navigation.
Even more simple than a table, a list like <ul> (unordered) or <ol> (ordered), in themselve they are have a block display, but their items <li> have the special display: list-item;. List can be customized with the list-style property.
- ....................
- ...............
- ...............
- ............................
- ..........
| ............ | . | .... |
|---|---|---|
| ............ | . | .... |
| ............ | . | .... |
| ............ | . | .... |
| ............ | . | .... |
| ............ | . | .... |
We also have more ambiguous ones, like inline-block an intuitive but complex mix where the element itself has the materiality of a block but can be flow like if it was inline, it's the default for <img> or UI elements like <input>.
There also is the unique float, that take inspiration from print design.
It is less and less used on the web, but a website where you might have seen it is none other than wikipedia (for the image thumbnail flowing in the article).
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Around 2010 we see arrive two other, more modern, type of display: flex and grid.
They both have become synonim of "professionnal" web-design, what you would use now to develop an app, with responsivity and accessibility.
While the previous list, table, and float are still largely in use, but their induced presentation have become synonim of "defaultism", "brutalism", sometime even "nostalgia". This is only a cultural-aesthetical expectation, nothing is bad about those element.
Mastering flex and grid can be a bit complex, since they each come with their own subset of properties. Nevertheless, when used correctly, they can be used to build strong & resilient modular design system.
The whole idea behind flex is like an enhanced version of inline-block, where you can control the spacing distribution in between elements both horizontaly and verticaly, but also the growing or skrinking of each element according to the available remaining space.
For grid, well it's speaks for itself. There is this slightly unexpected presentation of display: grid; by Jen Simmons, who introduced this feature in the W3C CSS working group.
Positions
[to be written]