Post-Modern CSS: In-depth on Grid, Flexbox and other new paradigms of CSS

Post-Modern CSS IN-DEPTH ON GRID LAYOUT, FLEXBOX & OTHER NEW PROPERTIES

Wait. Post-Modern? L …A W ? IKE NDY ARHOL

Wait. Post-Modern? L …A W ?S . IKE NDY ARHOL ORTA

“Simplifying to the extreme, I define postmodern as an incredulity toward metanarratives.” – Jean-François Lyotard

“Postmodernism was a reaction to modernism. Where modernism was about objectivity, postmodernism was about subjectivity. Where modernism sought a singular truth, postmodernism sought the multiplicity of truths.” – Miguel Syjuco

Why Post-Modern? A VERY BRIEF HISTORY OF THE ERAS OF THE WEB AND CSS

Pre-History P - -P C OINT TO OINT ONNECTIONS; BULLETIN BOARDS; RESEARCHERS

The Classical Era HTTP; HTML; T B ;S T HE ROWSER IR IM BERNERS-LEE

The Middle Ages O R F CSS R THE ISE AND ALL OF

The Modern Era HTML5; CSS3; A JS; F DVANCED RAMEWORKS

Postmodernity A L ; R -E DVANCED AYOUT E MERGENCE OF UNIQUE DESIGN

“Postmodernism was a reaction to modernism. Where modernism was about objectivity, postmodernism was about subjectivity. Where modernism sought a singular truth, postmodernism sought the multiplicity of truths.” – Miguel Syjuco

Our Objectivism

SOURCE: HTTP://ADVENTUREGA.ME/BOOTSTRAP/

“Simplifying to the extreme, I define postmodern as an incredulity toward metanarratives.” – Jean-François Lyotard

Our Metanarrative

“CSS Sucks” -E D E VERY EVELOPER VER

The Rise and Fall of CSS THE BATTLE OVER STYLE SHEETS AND IMPLEMENTATION

CSS Starts Strong 1994: CSS1 Spec starts 1996: CSS1 Spec complete (IE3 kinda adopts) 2000: IE5 reaches 99% CSS1 adoption

The middle part, not so much 1998: CSS2 Spec first WD 2000: CSS2 Becomes Recommendation 2000-07: CSS2/2.1 turmoil and back and forth 2011: CSS2.1 Finally finished and published SOURCE: HTTP://LEARNCSS.INFO/

Why CSS3 is better T M HE SECRET SAUCE IS ODULES SOURCE: MDN

Further Reading • • The CSS Saga The Evolution of CSS

The New Hotness TODAY’S GOAL: ADOPT ONE OF THESE PROPERTIES

CSS Gradients WHY USE IMAGES WHEN CSS CAN DO AMAZING THINGS?

Support (GO FOR IT!)

body { background-image: lineargradient(#F46035, #7E311C); }

body { background-image: lineargradient(45deg, #F46035, #7E311C); }

body { background-image: lineargradient(to bottom, #F46035, #7E311C 50%, #F46035 70%); }

body { background-image: radialgradient(#F46035, #7E311C); }

body { background-image: radialgradient(circle at 10% 0, #F46035, #7E311C 50%); }

body { background-image: repeatinglinear-gradient(to top right, #F46035, #F46035 20px, #7E311C 20px, #7E311C 40px); }

repeating-linear-gradient( [direction], [first color] #F46035, [first color again to fight fade] #F46035 20px, [second color] #7E311C 20px, [second color again to fight fade] #7E311C 40px );

Flexbox TRULY RESPONSIVE UNI-DIRECTIONAL LAYOUT

Support (USE UNLESS <IE10 IS IMPORTANT)

DEFAULT: BLOCK-LEVEL

DEFAULT: SIMPLE STYLING .container { width: 510px; margin: 0 auto; background: lightblue; } .box { background-color: tomato; margin: 20px 0; padding: 20px; color: white; }

.container { width: 510px; margin: 0 auto; background: lightblue; } .box { float: left; background-color: tomato; margin: 20px 0; padding: 20px; color: white; }

.container:after { content: “”; display: block; clear: both; }

Box Size Math (container size) 510px / 6 (number of boxes) = 85px (box width)

.box { float: left; background-color: tomato; margin: 20px 0; padding: 20px; color: white; width: 85px; }

Box Size Math (gosh darnit) ((container size) 510px / 6 (number of boxes)) - 40px (padding) = 45px (box width)

.box { /* … / width: 45px; / or */ width: 85px; box-sizing: border-box; }

This is why we use frameworks

This is why Flex was created

BACK THE TO START <div class=”container”> <div class=”box box1”>1</div> <div class=”box box2”>2</div> <div class=”box box3”>3</div> <div class=”box box4”>4</div> <div class=”box box5”>5</div> <div class=”box box6”>6</div> </div>

.container { display: flex; }

.container { display: flex; } .box { flex: 1; }

Box Size Math (done) …

Flex Layouts

Flex-grow

.container { display: flex; } .two-third { flex: 2; } .one-third { flex: 1; }

Width + Justify-Content

.container { width: 80%; padding: 20px; display: flex; justify-content: space-between; } .two-third { width: 65%; } .one-third { width: 33%; }

.container { justify-content: space-between; // justify-content: space-around; // // justify-content: space-evenly; // // justify-content: center; // justify-content: flex-start; // // justify-content: flex-end; // } Extra whitespace between elements Extra whitespace split to either side of elements Extra whitespace split evenly around elements and row/column Content center with no whitespace Extra whitespace at the end (default) Extra whitespace at the start

Height + Align-Items

.container { width: 80%; height: 60vh; padding: 20px; display: flex; } .two-third { width: 65%; } .one-third { width: 33%; }

.container { align-items: *default align-items: align-items: align-items: align-items: } stretch; // Height stretches to match row flex-start; flex-end; center; baseline; // // // // // Height by content Height by content Height by content Height by content baseline of first

aligned top - aligned bottom - center aligned - aligned by line of text

Directional Flexing

.container { flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; // // // // // // Default … it’s a row Reverses the order of the row It’s a column with a simple change in CSS Reverses the direction of the column; // Column also changes the direction justify and align deal with. }

Learn More • • • • Flexbox by Animated GIF Flexbox Froggy Flexbox Zombies CSS Tricks Complete Guide to Flexbox

Background Blend Mode CAN THE BROWSER REPLACE PHOTOSHOP?

Support (FALL FORWARD WITH EYE TOWARD READABILITY)

.box { height: 15vw; margin-bottom: 50px; width: calc(25% - 10px); } background-size: cover; background-image: url(https://placekitten.com/1000/800); background-color: purple; background-blend-mode: [value];

Normal Multiply Screen Overlay Lighten Darken Color Dodge Hard Light Difference Exclusion Color Luminosity

background-image: url(https://placekitten.com/1000/800), url(https://placekitten.com/500/500);

Normal Multiply Screen Overlay Lighten Darken Color Dodge Hard Light Difference Exclusion Color Luminosity

Grid Layout TWO-DIMENSIONAL LAYOUT AT ITS FINEST

Support

Grid Terminology Grid Line Grid Cell Grid Track Grid Area SOURCE: COMPLETE GUIDE TO GRID CSS-TRICKS

.container { width: 90%; background-color: lightblue; margin: 30px auto; } .box { background-color: tomato; padding: 10px 20px; margin-bottom: 10px; }

Grid Template Construction .container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; }

Grid Template Construction .container { // … grid-template-columns: 100px 1fr 10vw 10%; }

.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 2vw; }

Asymmetry in Flex

Flex solution: HTML <div class=”promos”> <div class=”left-column”> <a href=”#” class=”promo”>Promo Space 1</a> </div> <div class=”right-column”> <a href=”#” class=”promo”>Promo Space 2</a> <div class=”columns”> <a href=”#” class=”promo”>Promo space 3</a> <a href=”#” class=”promo”>Promo space 4</a> </div> </div> </div>

Flex solution: CSS (a lot) .promos { display: flex; justify-content: space-between; } .promo { display: flex; justify-content: center; align-items: center; min-height: 30vh; } .column { width: calc(50vw - .5rem); display: flex; flex-direction: column; } .columns { display: flex; justify-content: space-between; } .columns > .promo { flex: 1; } .columns > .promo:first-child { margin-right: 1rem; } .right-column > .promo { margin-bottom: 1rem; } .left-column .promo { height: 100%; }

Asymmetry in Grid!

Grid solution: HTML <div class=”promos”> <a href=”#” class=”promo”>Promo <a href=”#” class=”promo”>Promo <a href=”#” class=”promo”>Promo <a href=”#” class=”promo”>Promo </div> Space Space space space 1</a> 2</a> 3</a> 4</a>

Grid solution: CSS .promos { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-areas: “main second second” “main third fourth”; grid-auto-rows: minmax(20vh, 1fr); grid-gap: 1rem; } .promo:first-child { grid-area: main; } .promo:nth-child(2) { grid-area: second; } .promo:nth-child(3) { grid-area: third; } .promo:nth-child(4) { grid-area: fourth; }

Learn More • • • • • • Rachel Andrew’s Grid By Example Layout Land CSSGrid.io PracticalCSSGrid.com CSS Tricks Complete Guide to Grid Jen Simmons’ Lab

CSS Shapes MAKING FLOATING IMAGES INTERESTING AGAIN

Support (USE BUT DON’T DEPEND ON)

shape-outside(circle, polygon, url, content-box) SHAPE-INSIDE COMING IN LEVEL 2

.circle { float: left; height: 15vw; width: 15vw; background-color:limegreen; border-radius: 50%; shape-outside: circle(); }

.polygon { float: left; width: 200px; height: 400px; shape-outside: polygon(22% 0, 23% 18%, 79% 25%, 90% 36%, 66% 56%, 75% 80%, 28% 101%, 45% 60%, 45% 40%); } POLYGON CREATOR: HTTP://BENNETTFEELY.COM/CLIPPY/

img { float: left; shape-outside: url(mask.png); shape-margin: 10px; }

.left { float: left; width: 20%; height: 730px; shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } .right { float: right; width: 20%; height: 730px; shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

Explore More

Explore More • Initial Letter • CSS Transforms • Object-Fit • CSS Filters • Clip Path

No Shame in Templates BUT UNDERSTAND WHAT THE TEMPLATE DOES AND HOW TO BREAK OUT

CSS is Powerful LEARN A FEW THINGS AND MAKE INTERESTING DESIGNS

Start Today YOU DON’T HAVE TO WAIT FOR 100% BROWSER ADOPTION

WAIT A SECOND! No More “Fallbacks” WRITE SUPPORT-FIRST CSS AND FALL FORWARD INTO THE NEW

Support our Asymmetry .promos { display: flex; justify-content: space-between; } .promo { width: calc(50% - .5rem); margin-bottom: 1rem; } @supports (display: grid) { .promo { width: 100%; margin-bottom: 0; } /* The rest of our grid code */ }

Homework LEARN ONE NEW LAYOUT AND ONE NEW STYLE PROPERTY THEN TWEET AT ME (@BROB) TO LET ME KNOW WHAT YOU PICKED

I’d love to help you • http://bryanlrobinson.com • Twitter: @brob • Twitch: https://twitch.tv/ bryanlrobinson