Finally!
Layout in CSS
Tyler Benziger
What We're Covering
- Flexible Box Layout
- Grid Layout
- Shapes
- Regions
Four Specifications
- First, run through the concepts of each - no code
- Second, show you the code
- Third, demos
Flexible Box Layout
Sane CSS Layout
One-Dimensional Layout
One
Two
Two
Three
Three
Three
Vertical centering
Flexing
1
2
Rearranging Order
A
B
C
“Holy Grail” Layout
And More
Grid Layout
Full 2D
defining grid lines
- lengths/percentages
- based on content
- flexing
defining grid lines
- lengths/percentages
- based on content
- flexing
defining grid lines
- lengths/percentages
- based on content
- flexing
defining grid lines
- lengths/percentages
- based on content
- flexing
grid item placement
grid item alignment
grid item overlap
grid implementations are catching up to spec changes
Shapes
Regions
Define where content flows
Simple Regions example
Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.
Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.
Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.
Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.
Named Flows
Pull content from the normal flow and give it a label
Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.
Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.
Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.
Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.
CSS Regions
Define boxes to display the named flow content
Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.
Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.
Recap
- Flexible Box Layout
- Grid Layout
- Shapes
- Regions
Flexible Box Layout (code)
flex container
display: flex;
display: inline-flex;flex container direction
flex-direction: row;
flex-direction: column;
flex-direction: row-reverse;
flex-direction: column-reverse;flex container distribution
justify-content: flex-start;
flex container alignment
align-items: stretch;
flex items
// no code required!flex items alignment
align-self: auto;flex items order
order: <integer>;flex items flexing
flex: <positive integer>;.green {
min-width: 150px;
flex: 1;
}
.blue {
min-width: 150px;
flex: 2;
}flex items flexing space
any margin property: auto;.items {
min-width: 100px;
max-width: 150px;
flex: 1;
}
.green,
.yellow {
margin-left: auto;
}
.blue {
margin-right: auto;
}Vertical Center Styling
.flex-container {
display: flex;
}
.flex-item {
margin: auto;
}.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
Holy Grail Styling
<header>H</header>
<article>ART</article>
<nav>N</nav>
<aside>A</aside>
<footer>F</footer>R
T
Flex Wrapper
<header>H</header>
<div class="flex-container">
<article>ART</article>
<nav>N</nav>
<aside>A</aside>
</div>
<footer>F</footer>.flex-container {
display: flex;
}R
T
Reorder Content
.flex-container {
display: flex;
}
nav {
order: -1;
}R
T
Flex item min-width
.flex-container {
display: flex;
}
.flex-container > * {
min-width: 100px;
}
nav {
order: -1;
}R
T
Article flexing
.flex-container {
display: flex;
}
.flex-container > * {
min-width: 100px;
}
nav {
order: -1;
}
article {
flex: 1;
}R
T
Grid Layout (code)
(nothing stable enough to talk about)
Shapes (code)
basic shape value syntax
inset(top right bottom left [round rx ry]);
circle(radius at cx cy);
ellipse(rx ry at cx cy);
polygon(x1 y1, x2 y2, ... , xn yn);shapes from images
uses alpha channel path
url("an-image.png");shape-outside and shape-margin
start with a float
.circle-float {
float: left;
}
As the number of sides increases, a Polygon approximates to a Circle; and, when the number is very great indeed, say for example three or four hundred, it is extremely difficult for the most delicate touch to feel any polygonal angles. As the number of sides increases, a Polygon approximates to a Circle; and, when the number is very great indeed, say for example three or four hundred, it is extremely difficult for the most delicate touch to feel any polygonal angles. As the number of sides increases, a Polygon approximates to a Circle; and, when the number is very great indeed, say for example three or four hundred, it is extremely difficult for the most delicate touch to feel any polygonal angles. As the number of sides increases, a Polygon approximates to a Circle; and, when the number is very great indeed, say for example three or four hundred, it is extremely difficult for the most delicate touch to feel any polygonal angles.
add a shape-outside
.circle-float {
float: left;
shape-outside: circle(50% at 50% 50%);
}As the number of sides increases, a Polygon approximates to a Circle; and, when the number is very great indeed, say for example three or four hundred, it is extremely difficult for the most delicate touch to feel any polygonal angles. As the number of sides increases, a Polygon approximates to a Circle; and, when the number is very great indeed, say for example three or four hundred, it is extremely difficult for the most delicate touch to feel any polygonal angles. As the number of sides increases, a Polygon approximates to a Circle; and, when the number is very great indeed, say for example three or four hundred, it is extremely difficult for the most delicate touch to feel any polygonal angles. As the number of sides increases, a Polygon approximates to a Circle; and, when the number is very great indeed, say for example three or four hundred, it is extremely difficult for the most delicate touch to feel any polygonal angles.
defaults
.circle-float {
float: left;
shape-outside: circle();
}As the number of sides increases, a Polygon approximates to a Circle; and, when the number is very great indeed, say for example three or four hundred, it is extremely difficult for the most delicate touch to feel any polygonal angles. As the number of sides increases, a Polygon approximates to a Circle; and, when the number is very great indeed, say for example three or four hundred, it is extremely difficult for the most delicate touch to feel any polygonal angles. As the number of sides increases, a Polygon approximates to a Circle; and, when the number is very great indeed, say for example three or four hundred, it is extremely difficult for the most delicate touch to feel any polygonal angles. As the number of sides increases, a Polygon approximates to a Circle; and, when the number is very great indeed, say for example three or four hundred, it is extremely difficult for the most delicate touch to feel any polygonal angles.
add a shape-margin
.circle-float {
float: left;
shape-outside: circle();
shape-margin: 10px;
}As the number of sides increases, a Polygon approximates to a Circle; and, when the number is very great indeed, say for example three or four hundred, it is extremely difficult for the most delicate touch to feel any polygonal angles. As the number of sides increases, a Polygon approximates to a Circle; and, when the number is very great indeed, say for example three or four hundred, it is extremely difficult for the most delicate touch to feel any polygonal angles. As the number of sides increases, a Polygon approximates to a Circle; and, when the number is very great indeed, say for example three or four hundred, it is extremely difficult for the most delicate touch to feel any polygonal angles. As the number of sides increases, a Polygon approximates to a Circle; and, when the number is very great indeed, say for example three or four hundred, it is extremely difficult for the most delicate touch to feel any polygonal angles.
Regions (code)
flow-into creates a named flow
starting markup
<article>
<p>...
<img>
<p>...
</article>Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.
Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.
use flow-into
<article>
<p>...
<img>
<p>...
</article>article > p {
flow-into: philip;
}flow-from creates regions
make some boxes
article > p {
flow-into: philip;
}
article::before {
display: block;
height: 50vh;
}
article::after {
display: block;
}add flow-from
article > p {
flow-into: philip;
}
article::before {
flow-from: philip;
display: block;
height: 50vh;
}
article::after {
flow-from: philip;
display: block;
}Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.
Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.
Change box styling
article > p {
flow-into: philip;
}
article::before {
flow-from: philip;
display: block;
height: 50vh;
width: 50vw;
}
article::after {
flow-from: philip;
display: block;
}Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.
Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.
Demos
Philip Walton’s Solved by FlexboxCJ Gammon’s Region/Shape Layout
Razvan Caliman’s Adaptive UI with Named Flows