Finally! – Layout in CSS



Finally! – Layout in CSS

0 0


presentation-css-layout


On Github tybenz / presentation-css-layout

Finally!

Layout in CSS

Tyler Benziger

@tybenz  ||   github.com/tybenz  ||   tybenz.com

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

flex-start flex-end center stretch baseline
flex-start flex-end center space-between space-around

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;
}
OR
.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>
HARTNAF

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;
}
H
ARTNA
F

Reorder Content

.flex-container {
  display: flex;
}
nav {
  order: -1;
}
H
ARTNA
F

Flex item min-width

.flex-container {
  display: flex;
}
.flex-container > * {
  min-width: 100px;
}
nav {
  order: -1;
}
H
ARTNA
F

Article flexing

.flex-container {
  display: flex;
}
.flex-container > * {
  min-width: 100px;
}
nav {
  order: -1;
}
article {
  flex: 1;
}
H
ARTNA
F

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 LayoutRazvan Caliman’s Adaptive UI with Named Flows

Thanks!

@tybenz  ||   github.com/tybenz  ||   tybenz.com