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

Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Mar 20, 2017

Download

Design

Bryan Robinson
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 2: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Wait. Post-Modern?LIKE… ANDY WARHOL?

Page 3: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Wait. Post-Modern?LIKE… ANDY WARHOL? SORTA.

Page 4: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

“Simplifying to the extreme, I define postmodern as an incredulity toward metanarratives.”

– Jean-François Lyotard

Page 5: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

“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

Page 6: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 7: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Pre-HistoryPOINT-TO-POINT CONNECTIONS; BULLETIN BOARDS; RESEARCHERS

Page 8: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

The Classical EraHTTP; HTML; THE BROWSER; SIR TIM BERNERS-LEE

Page 9: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

The Middle AgesOR THE RISE AND FALL OF CSS

Page 10: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

The Modern EraHTML5; CSS3; ADVANCED JS; FRAMEWORKS

Page 11: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

PostmodernityADVANCED LAYOUT; RE-EMERGENCE OF UNIQUE DESIGN

Page 12: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

“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

Page 13: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Our Objectivism

Page 14: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 15: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

“Simplifying to the extreme, I define postmodern as an incredulity toward metanarratives.”

– Jean-François Lyotard

Page 16: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Our Metanarrative

Page 17: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

“CSS Sucks”-EVERY DEVELOPER EVER

Page 18: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

The Rise and Fall of CSSTHE BATTLE OVER STYLE SHEETS AND IMPLEMENTATION

Page 19: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

CSS Starts Strong1994: CSS1 Spec starts

1996: CSS1 Spec complete (IE3

kinda adopts)

2000: IE5 reaches 99% CSS1

adoption

Page 20: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

The middle part, not so much1998: 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/

Page 21: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Why CSS3 is betterTHE SECRET SAUCE IS MODULES

SOURCE: MDN

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3
Page 22: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

• The CSS Saga • The Evolution of CSS

Further Reading

https://www.w3.org/Style/LieBos2e/history/Overview.html
https://blogs.adobe.com/creativecloud/the-evolution-of-css/
Page 23: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

The New HotnessTODAY’S GOAL: ADOPT ONE OF THESE PROPERTIES

Page 24: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Code Examples: postmoderncss.com

http://postmoderncss.com
Page 25: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

CSS GradientsWHY USE IMAGES WHEN CSS CAN DO AMAZING THINGS?

Page 26: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Support (GO FOR IT!)

Page 27: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 28: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 29: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 30: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 31: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 32: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 33: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 34: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

repeating-linear-gradient(to top right, #F46035, #F46035 20px, #7E311C 20px, #7E311C 40px

);

Page 35: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

);

Page 36: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

CSS ShapesMAKING FLOATING IMAGES INTERESTING AGAIN

Page 37: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Support (USE BUT DON’T DEPEND ON)

Page 38: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

<main class="container angled"> <div class="circle"></div> <h1></h1> <p>…</p> <p>…</p> <p>…</p></main>

Page 39: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

shape-outside(circle, polygon, url, content-box)

SHAPE-INSIDE COMING IN LEVEL 2

Page 40: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

.circle { float: left; shape-outside: circle(); margin: 0 3em .5em 0;}

Page 41: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

<main class="container angled"> <div class="polygon"></div> <h1></h1> <p>…</p> <p>…</p> <p>…</p></main>

Page 42: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

.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/

Page 43: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

<main class="container angled"> <img src=“Image.png” alt="" /> <h1></h1> <p>…</p> <p>…</p> <p>…</p></main>

Page 44: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 45: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

<main class="container angled"> <aside class="left"></aside> <aside class="right"></aside> <h1></h1> <p>…</p> <p>…</p> <p>…</p></main>

Page 46: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

.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%)}

Page 47: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

FlexboxTRULY RESPONSIVE UNI-DIRECTIONAL LAYOUT

Page 48: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Support (USE UNLESS <IE10 IS IMPORTANT)

Page 49: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

<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>

DEFAULT: BLOCK-LEVEL

Page 50: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

DEFAULT: SIMPLE STYLING

Page 51: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 52: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 53: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Box Size Math

Page 54: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 55: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

((container size) 510px / 6 (number of boxes)) - 40px (padding)

= 45px (box width)

Box Size Math (gosh darnit)

Page 56: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 57: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

This is why we use frameworks

Page 58: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

This is why Flex was created

Page 59: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

<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>

BACK THE TO START

Page 60: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

.container { display: flex;}

Page 61: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 62: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

…

Box Size Math (done)

Page 63: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

<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>

Page 64: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

<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 class="box box7">7</div></div>

Page 65: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Flex Layouts

Page 66: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Flex-grow

Page 67: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

<div class="container">

<div class="box two-third"> Box 1 </div>

<div class="box one-third"> Box 2 </div> </div>

Page 68: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 69: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Width + Justify-Content

Page 70: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 71: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties
Page 72: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 73: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties
Page 74: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Height + Align-Items

Page 75: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 76: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 77: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties
Page 78: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Directional Flexing

Page 79: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 80: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties
Page 81: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties
Page 82: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Simple Utility - Fluid Grid

Page 83: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

.container { display: flex; justify-content: space-between; padding: 10px; flex-wrap: wrap;}.box { height: 30vw;

width: calc(33% - 10px); margin-bottom: 15px;}

Page 84: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

• Flexbox by Animated GIF • Flexbox Froggy • CSS Tricks Complete Guide to Flexbox

Learn More

https://medium.freecodecamp.com/an-animated-guide-to-flexbox-d280cf6afc35#.8s8ove5nf
http://flexboxfroggy.com/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Page 85: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

New UnitsSIZING HAS NEVER BEEN MORE FUN!

Page 86: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Size Relative to the viewport

Page 87: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

.container { display: flex; justify-content: space-between; width: 80%;}.box { width: 25vw; height: 25vh;}

Page 88: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

((current viewport size) 600px / 100 (percentage)) x 25vw

= 150px (box width)

Viewport Math

Page 89: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

How can I use this for fun and profit?

Page 90: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Responsive Squares!

Page 91: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

.box { width: 20vw; height: 20vw;}

Page 92: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Responsive Typography!

Page 93: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

h1 { font-size: default;}

h2 { font-size: 5vw;}

h3 { font-size: calc(16px + 1vw);}

p { font-size: calc(12px + .75vw); line-height: 1.4em;}

Page 94: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

calc(unit [+, -, ÷, x] unit)

Page 95: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

h3 { font-size: calc(16px + 1vw);}.box { width: calc(33% - 20px); margin: 0 10px;}

Page 96: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Let’s put a few things together

Page 97: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties
Page 98: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Background Blend ModeCAN THE BROWSER REPLACE PHOTOSHOP?

Page 99: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Support (FALL FORWARD WITH EYE TOWARD READABILITY)

Page 100: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties
Page 101: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

.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];

}

Page 102: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

Page 103: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties
Page 104: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Multiply Screen OverlayNormal

Darken Color Dodge Hard LightLighten

Exclusion Color LuminosityDifference

Page 105: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Multiply Screen OverlayNormal

Darken Color Dodge Hard LightLighten

Exclusion Color LuminosityDifference

Page 106: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Multiply Screen OverlayNormal

Darken Color Dodge Hard LightLighten

Exclusion Color LuminosityDifference

Page 107: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Multiply Screen OverlayNormal

Darken Color Dodge Hard LightLighten

Exclusion Color LuminosityDifference

Page 108: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Multiply Screen OverlayNormal

Darken Color Dodge Hard LightLighten

Exclusion Color LuminosityDifference

Page 109: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Multiply Screen OverlayNormal

Darken Color Dodge Hard LightLighten

Exclusion Color LuminosityDifference

Page 110: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Grid LayoutTWO-DIMENSIONAL LAYOUT AT ITS FINEST. ALMOST HERE!

Page 111: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Support (LEARN NOW. THANK ME LATER)

Page 112: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Grid Terminology

Grid Line Grid Cell Grid Track Grid Area

SOURCE: COMPLETE GUIDE TO GRID CSS-TRICKS

https://css-tricks.com/snippets/css/complete-guide-grid/
Page 113: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 114: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr;

Grid Template Construction

Page 115: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

grid-template-columns: 100px 1fr 10vw 10%;

Grid Template Construction

Page 116: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 117: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

grid-column: span 2;grid-column: 1 / 4;grid-column: 2 / 3;grid-column: 1 span 2;

Grid Item Placement

Page 118: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

grid-row: span 2;grid-row: 1 / 4;grid-row: 2 / 3;grid-row: 1 span 2;

Grid Item Placement

Page 119: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

.container { grid-template-columns: 1fr 1fr 1fr 1fr;}.box:nth-child(2) { grid-column: span 2;}

Page 120: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

.box:nth-child(2) { grid-row: 2 / 3; grid-column: 2 / span 2;}

Page 121: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

.box:nth-child(2) { grid-row: 1 / 3; grid-column: 2 / span 2;}

or

.box:nth-child(2) { grid-row: span 2; grid-column: span 2;}

Page 122: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

.container { grid-template-columns: 1fr 1fr 1fr 1fr;}.box:nth-child(2) { grid-row: span 2; grid-column: span 2;}

Page 123: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

.box:nth-child(2) { grid-row: span 2; grid-column: span 2;}.box:nth-child(5) { grid-row: span 5; grid-column: span 2;}

Page 124: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

.container { ... grid-auto-flow: dense;}

Page 125: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties
Page 126: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties
Page 127: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties
Page 128: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

display: grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;grid-gap: calc(.5rem + .5vw);

grid-template-areas: "main main main second third fourth" "main main main fifth fifth fifth" "promo promo promo promo promo promo" "sixth sixth seventh seventh eighth eighth" "sixth sixth seventh seventh ninth tenth”;

Page 129: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

&:nth-child(1) { grid-area: main;}&:nth-child(2) { grid-area: second;}&:nth-child(3) { grid-area: third;}&:nth-child(4) { grid-area: fourth;}&:nth-child(5) { grid-area: fifth;}

&:nth-child(6) { grid-area: sixth;}&:nth-child(7) { grid-area: seventh;}&:nth-child(8) { grid-area: eighth;}&:nth-child(9) { grid-area: ninth;}&:nth-child(10) { grid-area: tenth;}

Page 130: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties
Page 131: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

.about { display: grid;

grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-auto-rows: minmax(20vw, 1fr); grid-template-areas: " first . . second ." " . . third . ." " fourth . . . fifth" " . sixth sixth . fifth" " . sixth sixth . ." " . . . seventh seventh" "eighth eighth . seventh seventh" "eighth eighth . . .";}

Page 132: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

.banner { display: grid; grid-template-rows: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr); }.headline { font-size: calc(1.5rem + 6vw); grid-row: 4 / 5; grid-column: 2 / 6;}.subhead { grid-column: 2 / 6; grid-row: 5 / 6; font-size: calc(1rem + 2vw);}

Page 133: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

• Rachel Andrew's Get Ready for Grid Layout • My Simple Primer • CSS Tricks Complete Guide to Grid • Jen Simmons’ Lab

Learn More

https://abookapart.com/products/get-ready-for-css-grid-layout
http://bryanlrobinson.com/blog/2017/01/12/simple-grid-examples/
https://css-tricks.com/snippets/css/complete-guide-grid/
http://labs.jensimmons.com/
Page 134: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

Explore More

Page 135: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

• Initial Letter

• CSS Transforms

• Object-Fit

• CSS Filters

• Clip Path

Explore More

https://css-tricks.com/almanac/properties/i/initial-letter/
https://css-tricks.com/almanac/properties/t/transform/
https://css-tricks.com/almanac/properties/o/object-fit/
https://css-tricks.com/almanac/properties/f/filter/
https://css-tricks.com/almanac/properties/c/clip/
Page 136: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 137: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

CSS is PowerfulLEARN A FEW THINGS AND MAKE INTERESTING DESIGNS

Page 138: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

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

Page 139: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

HomeworkLEARN ONE NEW LAYOUT AND ONE NEW STYLE PROPERTY

Page 140: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties

• http://bryanlrobinson.com

• Twitter: @brob

• Slack: http://slack.memphistechnology.org/

• Today’s Examples: postmoderncss.com

I’d love to help you

http://bryanlrobinson.com
http://twitter.com/brob
http://slack.memphistechnology.org/
http://postmoderncss.com

Related Documents
CSS GRID L AYOUT - Contao · 2019-10-29 · GRID UND/ODER FLEXBOX Flexbox CSS Grid Layout » eindimensional (horizontal oder vertikal) » zweidimensional (horizontal und vertikal)

CSS GRID L AYOUT - Contao · 2019-10-29 · GRID UND/ODER.....

Category: Documents
Introducing CSS Flexbox Layout - UA Europeuaeurope.com/downloads/IntroducingCSSFlexboxLayout.pdf · 2018-10-02 · Introducing CSS Flexbox Layout Matthew Ellison, UA Europe • Consultant

Introducing CSS Flexbox Layout - UA...

Category: Documents
CSS FLEX BOX MODELlearning-html5.info/WOW_AUG_Feb_2011_CSSFlexBox.pdf · 2012-02-08 · Overview • display:flexbox or display:inline-flexbox in CSS • Layout agnostic • Block

CSS FLEX BOX...

Category: Documents
Using Flexbox Today (CSS Summit 2016)

Using Flexbox Today (CSS Summit 2016)

Category: Internet
CSS Grid Systems

CSS Grid Systems

Category: Technology
LAYING OUT THE FUTURE WITH GRID & FLEXBOX · 2018-03-22 · LAYING OUT THE FUTURE WITH GRID & FLEXBOX @rachelandrew @ Smashing Conf Freiburg. Rachel Andrew CSS Working Group Invited

LAYING OUT THE FUTURE WITH GRID & FLEXBOX · 2018-03-22 ·...

Category: Documents
PZI lab5 Flexbox i CSS grid - FESB eLearning · 2019-11-11 · Flexbox Flexbox je razvijen s ciljem olakšavanja rada s izradom korisničkih sučelja pomoću CSS-a. Omogućava jednostavnije

PZI lab5 Flexbox i CSS grid - FESB eLearning ·...

Category: Documents
Contao in Bayern - Flexbox und Grid Layout 20170511 › newsreader › flexbox-und-grid... · 2018-09-13 · 11.05.2017 Flexbox und Grid Layout 11 CSS Grid Layout Beschreibung vom

Contao in Bayern - Flexbox und Grid Layout 20170511 ›...

Category: Documents
Interaktive Medien 1. Semester Martin Vollenweider · 2019-09-04 · 4 Unterschiede Grid und Flexbox 1. Das CSS Grid Layout ist zweidimensional (horizontal und vertikal; resp. Spalten

Interaktive Medien 1. Semester Martin Vollenweider ·...

Category: Documents
Features Guide - The Mozilla Blog · CSS Flexbox The integration of CSS Flexbox in Firefox makes it easier for developers to build user interfaces that adapt to the size of the browser

Features Guide - The Mozilla Blog · CSS Flexbox The...

Category: Documents
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)

Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)

Category: Technology
Intro to Flexbox - A Magical CSS Property

Intro to Flexbox - A Magical CSS Property

Category: Internet