A presentation at Web Directions: Code 2019 in in Melbourne VIC, Australia by Anton Ball
SUPER HERO LAYOUTS @antonjb
GOLDEN @antonjb SILVER BRONZE MODERN
GOLDEN @antonjb SILVER BRONZE MODERN
GOLDEN @antonjb SILVER BRONZE MODERN
GOLDEN @antonjb SILVER BRONZE MODERN
GOLDEN @antonjb SILVER BRONZE MODERN
GOLDEN @antonjb SILVER BRONZE MODERN
1938 @antonjb 1950 70 YEARS 1970 NOW
HTML 26 @antonjb CSS 22
HTML FLASH RESPONSIVE @antonjb TABLE ABSOLUTE FLOAT INTRINSIC
IT’S AMAZING HOW FAR WE HAVE PROGRESSED WITH LAYOUT @antonjb
ANTON BALL @antonjb
Action Comics #1 - DC Comics @antonjb
Action Comics #1 - DC Comics @antonjb
l e n a P @antonjb Gap
576PX 36PX 576 ÷ 36 = 16 COLUMNS @antonjb
.comic .comic {_ display: grid; grid-template-columns: repeat(16, 1fr); grid-gap: 12px; } https://codepen.io/antonjb/pen/vMPgBJ @antonjb
.comic Defined Grid .comic { display: grid; grid-template-columns: repeat(16, 1fr); grid-auto-rows: auto; } Track @antonjb
.comic .panel-1 span 6 .panel-2 span 5 .comic {_ display: grid; grid-template-columns: repeat(16, 1fr); grid-gap: 12px; } .panel-1 { grid-column: span 6; } .panel-2 { grid-column: span 5; }_ https://codepen.io/antonjb/pen/vMPgBJ @antonjb
Spider-man #121 - Marvel Comics @antonjb
Spider-man #121 - Marvel Comics @antonjb
@antonjb
.comic .comic {_ display: grid; grid-template-columns: repeat(23, auto); gap: 12px; }_ https://codepen.io/antonjb/pen/QPRKYN @antonjb
.comic .panel-1 .panel-2 column span 9 column span 7 row span 3 .panel-4 column span 8 row span 2 https://codepen.io/antonjb/pen/QPRKYN @antonjb .panel-1 { grid-column: span 9; grid-row: span 3; } .panel-2 { grid-column: span 7; } .panel-4 { grid-column: span 8; grid-row: span 2; }_
Watchmen #7 - DC Comics @antonjb
Watchmen #7 - DC Comics @antonjb
.comic .overlap .panel-3 .comic { display: grid; grid-template-columns: repeat(2, auto); grid-template-rows: repeat(3, auto); gap: 16px; }_ .overlap { display: grid; grid-column: span 2; } .panel-3 { grid-row: 1; grid-column: 1 / span 2; } https://codepen.io/antonjb/pen/rgvKrO @antonjb
.comic .overlap .panel-3 .comic { grid-template-columns: repeat(2, auto); } .overlap { display: grid; grid-column: span 2; grid-template-columns: subgrid; } https://codepen.io/antonjb/pen/rgvKrO @antonjb
.comic .overlap .overlap { display: grid; grid-column: span 2; grid-template-columns: subgrid; grid-template-rows: repeat(3, auto) } @antonjb
.comic .overlap .panel-3 .overlap { display: grid; grid-column: span 2; grid-template-columns: subgrid; } .overlap#::after { content: ’ ‘; outline: 16px solid #fff; grid-row: 1; grid-column: 1; } https://codepen.io/antonjb/pen/rgvKrO @antonjb
@antonjb
subgrid subgrid @antonjb
height @antonjb min-height
subgrid subgrid @antonjb
SUBGRID @antonjb
.comic .overlap .panel-3 .overlap { display: contents; } .overlap#::after { content: ’ ‘; outline: 16px solid #fff; grid-row: 2; grid-column: 1; } https://codepen.io/antonjb/pen/rbKdpE @antonjb
https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents @antonjb
Spider-man 2018 #9 - Marvel Comics @antonjb
Spider-man 2018 #9 - Marvel Comics @antonjb
.comic .comic { display: grid; grid-template-columns: 1fr 6fr 4fr 9fr 6fr repeat(2, 1fr); grid-template-rows: 16px 2.35fr 1fr 0.5fr 0.3fr 1fr 1fr 0.35fr 0.45fr 1.25fr; } https://codepen.io/antonjb/pen/yrmQez @antonjb
9 985PX ROWS @antonjb Spider-man 2018 #9 - Marvel Comics 985 ÷ 9 = 109
291PX 291 ÷ 109 = 2.6FR @antonjb Spider-man 2018 #9 - Marvel Comics
.comic .comic { display: grid; grid-template-columns: 1fr 6fr 4fr 9fr 6fr repeat(2, 1fr); grid-template-rows: 16px 2.35fr 1fr 0.5fr 0.3fr 1fr 1fr 0.35fr 0.45fr 1.25fr; } .panel-3 .panel-4 .panel-3 { grid-row: 4 / 7; grid-column: 5 / span 1; z-index: 1; } .panel-4 { grid-row: 5 / 9; grid-column: 2 / -2; } https://codepen.io/antonjb/pen/yrmQez @antonjb
12 3 4 5 678 .panel-4 { grid-column: 2 / -2; } Grid Line @antonjb
12 3 4 5 678 .panel-4 { grid-column: 2 / -2; } -8 @antonjb -6 -5 -4 -2
.panel-4 { grid-column: 2 / -2; } @antonjb
Hawkeye #1 - Marvel Comics @antonjb https://codepen.io/antonjb/pen/zQOvqa
.panel-4 { grid-row: 5 / 9; grid-column: 2 / -2; } @antonjb .panel-4 { grid-row: 1 / span 5; grid-column: 1 / -1; }
STRUCTURE @antonjb CSS GRID MAINTAIN
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility @antonjb
@antonjb
Generations: Phoenix and Jean Grey - Marvel Comics @antonjb https://codepen.io/antonjb/pen/mYyJvj
CLIP-PATH I don’t feel so good… @antonjb
.comic .comic { position: relative; background-image: url(space.jpg); background-size: cover; background-position: center; overflow: hidden; } @antonjb
.comic .panels .panel-2 @antonjb .panel-3 .panels { display: grid; grid-template-columns: 3fr repeat(4, 1fr) 2fr; }
1 l 2 l 3 l 4 5 l l e e e e e n n n n n a a a a a .p .p .p .p .p .panels { display: grid; grid-template-columns: 3fr repeat(4, 1fr) 2fr; } @antonjb
.comic .panels @antonjb .panels { display: grid; grid-template-columns: 3fr repeat(4, 1fr) 2fr; position: absolute; left: -20%; right: -20%; bottom: -10%; top: 20%; transform: rotate(-20deg) translateY(100px); }
0 18% 20% 20% x y .panel-3 { clip-path: polygon(0 18%, 20% 20%, 78% 71%, 63% 100%, 5% 80%); } 78% 71% 5% 80% 63% 100% @antonjb
.comic .panel-1 { grid-column: 1 / 1; grid-row: 1; clip-path: polygon(0 2%, 98% 15%, 89% 100%, 0 100%); } .panel-2 { grid-column: 1 / span 3; grid-row: 1; z-index: 1; clip-path: polygon(59% 16%, 80% 18%, 86% 100%, 54% 100%); } .panel-1 @antonjb .panel-2
@antonjb
.comic .panel-1 { grid-column: 1 / 1; grid-row: 1; clip-path: polygon(1% 2%, 98.5% 15.75%, 89% 100%, 0 100%); } .panel-1 @antonjb .panel-1 img { clip-path: polygon(1% 2%, 98.5% 15.75%, 89% 100%, 0 100%); transform: scale(0.95); transform-origin: 70% 22%; }
https://codepen.io/antonjb/pen/mYyJvj @antonjb
Detective Comics #876 - DC Comics @antonjb
.panel-1 .panel-2 .panel-1 { grid-row: 1 / span 3; grid-column: 1 / span 4; transform: perspective(200px) rotate(-14deg, 6deg, -10deg); } .panel-2 { grid-row: 2 / span 3; grid-column: 2 / span 4; transform: perspective(600px) rotate(-16deg, 4deg); } https://codepen.io/antonjb/pen/EJOLMx @antonjb
.panel-3 @antonjb .panel-3 { grid-row: 2 / span 3; grid-column: 2 / span 4; transform: perspective(600px) rotateX(-16deg) rotateY(4deg); clip-path: polygon(207px -7px, 315px -8px, 310px 189px, -1% 102%, -6px 88px, 69% 20%); }
https://codepen.io/antonjb/pen/EJOLMx @antonjb Detective Comics #876 - DC Comics
https://codepen.io/antonjb/pen/JqjdBr @antonjb Flash - DC Comics
X ellipse(148px 202px at 245px 205px); Radius @antonjb Y
X circle(156px at 241px 162px); Radius @antonjb Y
Saga 1 - Image Comics @antonjb
CSS SHAPES @antonjb
Saga 1 - Image Comics @antonjb
.panel-1 { position: relative; } .panel p .panel img .panel p { margin: 0; margin-left: 100px; margin-top: 8px; width: 400px; } .panel img { float: right; width: 800px; height: 800px; shape-outside: circle(219px at 355px 225px); } https://codepen.io/antonjb/pen/xNGEye @antonjb
@antonjb
.panel img .panel img { float: right; shape-outside: polygon(349px 4px, 500px 1px, 99.44% 99.51%, 286px 282px, 54.86% 74.82%, 47.21% 64.25%, 48.08% 47.82%, 52.5% 32.01%, 63.98% 17.66%); } https://codepen.io/antonjb/pen/xNGEye @antonjb
cat-mask.png .panel img { float: right; shape-outside: url(‘cat-mask.png’) } @antonjb
NANI?! 何 @antonjb WHAT?
NANI?! 何 @antonjb WHAT?
Start Finish @antonjb Naruto Vol. 1 - Shueisha Naruto Vol. 1 - Madman Entertainment
.comic .comic { display: grid; grid-gap: 2rem 1rem; } @antonjb
Naruto Vol. 1 - Shueisha @antonjb Naruto Vol. 1 - Madman Entertainment
.bubble .bubble { writing-mode: vertical-rl; } @antonjb
@antonjb
@antonjb
@antonjb
WITH GREAT POWER COMES GREAT RESPONSIBILITY - Uncle Ben @antonjb
RACHEL ANDREW RESOURCES https://twitter.com/rachelandrew https://gridbyexample.com/ @antonjb JEN SIMMONS https://twitter.com/jensimmons https://labs.jensimmons.com/
CODEPEN COLLECTION https://codepen.io/collection/DjwRaP/ @antonjb
“EVER UPWARD” EXCELSIOR! - Stan Lee @antonjb
THANK YOU @antonjb
Modern CSS layout techniques opened a world of possibilities. Layouts previously thought impossible become possible. A great way of mastering techniques is through play, so I turned to one of my favourite hobbies - comic books.
Taking well known layouts, how could elements be built in a browser, such as uneven shapes, ever changing layout and many variations? This talk is going to dive into using modern CSS layout techniques to recreate elements of comic books with CSS Grid, writing mode, CSS shapes and more. Come along to see CSS layouts at play.
The following resources were mentioned during the presentation or are useful additional information.
The code samples from the talk
Here’s what was said about this presentation on social media.
for free. You
can too.