Getting to grips with CSS grid

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Hello! I am Jo Franchetti I’m a web developer advocate for Samsung Internet You can find me at @thisisjofrank and @samsunginternet Also on medium https://medium.com/@jofranchetti

Slide 3

Slide 3 text

CSS Grid is the future of web layout But let’s talk briefly about how we did things in the past

Slide 4

Slide 4 text

Example: Making a grid of elements

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

With a table https://codepen.io/thisisjofrank/pen/ypXqzJ

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

With inline-block https://codepen.io/thisisjofrank/pen/MroXKL

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

With float https://codepen.io/thisisjofrank/pen/vpZjxY

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Flexbox! https://codepen.io/thisisjofrank/pen/goxRQy

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

CSS grid A layout system for CSS optimised for two dimensional alignment

Slide 19

Slide 19 text

CSS grid properties apply to either: ● the parent (grid container) ● the children (grid elements/grid cells) Grid lines are the horizontal and vertical lines that form the basis of the grid structure Grid tracks are the rows or columns of your grid Grid gap is the space between the children

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Grid container

Slide 22

Slide 22 text

Grid cell (or element)

Slide 23

Slide 23 text

Grid track

Slide 24

Slide 24 text

Grid track

Slide 25

Slide 25 text

Grid lines

Slide 26

Slide 26 text

Grid gap

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-gap: 20px; } https://grid-cats.glitch.me/

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

.cards { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }

Slide 32

Slide 32 text

.cards { grid-template-columns: repeat(6, 1fr); }

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

1 2 3 4 5 6 7

Slide 35

Slide 35 text

grid-area: 1/1/3/5;

Slide 36

Slide 36 text

CSS grid and the Holy Grail https://grid-grail.glitch.me/ https://glitch.com/edit/#!/grid-grail

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

.container { display: grid; grid-template-columns: 200px 1fr 200px; grid-template-rows: auto 1fr auto; min-height: 100vh; }

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

grid-column: span 3; grid-column: span 3;

Slide 41

Slide 41 text

Warnings!

Slide 42

Slide 42 text

■ Changing the order that elements appear in on the page is bad for accessibility (https://codepen.io/thisisjofrank/pen/jYJGgB, https://codepen.io/rachelandrew/pen/beBeKJ,) ■ Other tools are still relevant (eg flexbox to center things!) ■ Browser support is not 100%, but we can use @supports and fallbacks!

Slide 43

Slide 43 text

// flex:, // float:, // whatever styles you need here @supports (display: grid) { // code that will only run if CSS Grid is supported by the browser }

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Other cool CSS Grid bits

Slide 46

Slide 46 text

Pseudo-elements (::before & ::after) are treated as grid items They’ll flow with the grid content, they’ll take up the space of a grid cell

Slide 47

Slide 47 text

Use grid-template-areas: to name areas of your grid https://codepen.io/thisisjofrank/pen/WzPJwd

Slide 48

Slide 48 text

display:contents Keep your semantic markup AND let child elements align with the grid

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

https://codepen.io/thisisjofrank/pen/wmEvqE https://caniuse.com/#search=contents

Slide 51

Slide 51 text

Define track sizing with max-content & min-content https://codepen.io/thisisjofrank/pen/mpopZj

Slide 52

Slide 52 text

Learn grid by gardening! http://cssgridgarden.com/

Slide 53

Slide 53 text

Also https://cssgrid.io/

Slide 54

Slide 54 text

Thank you! Any questions? You can find me at @thisisjofrank and @samsunginernet Also at https://medium.com/@jofranchetti

Slide 55

Slide 55 text

Quotations are commonly printed as a means of inspiration and to invoke philosophical thoughts from the reader.

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Quotations are commonly printed as a means of inspiration and to invoke philosophical thoughts from the reader.

Slide 58

Slide 58 text

White Is the color of milk and fresh snow, the color produced by the combination of all the colors of the visible spectrum. You can also split your content Black Is the color of coal, ebony, and of outer space. It is the darkest color, the result of the absence of or complete absorption of light.

Slide 59

Slide 59 text

In two or three columns Yellow Is the color of gold, butter and ripe lemons. In the spectrum of visible light, yellow is found between green and orange. Blue Is the colour of the clear sky and the deep sea. It is located between violet and green on the optical spectrum. Red Is the color of blood, and because of this it has historically been associated with sacrifice, danger and courage.

Slide 60

Slide 60 text

A picture is worth a thousand words A complex idea can be conveyed with just a single still image, namely making it possible to absorb large amounts of data quickly.

Slide 61

Slide 61 text

Want big impact? Use big image.

Slide 62

Slide 62 text

Gray Use charts to explain your ideas White Black

Slide 63

Slide 63 text

And tables to compare data A B C Yellow 10 20 7 Blue 30 15 10 Orange 5 24 16

Slide 64

Slide 64 text

Maps our office

Slide 65

Slide 65 text

89,526,124$ That’s a lot of money 100% Total success! 185,244 users And a lot of users

Slide 66

Slide 66 text

Our process is easy Last Second First

Slide 67

Slide 67 text

Let’s review some concepts Yellow Is the color of gold, butter and ripe lemons. In the spectrum of visible light, yellow is found between green and orange. Blue Is the colour of the clear sky and the deep sea. It is located between violet and green on the optical spectrum. Red Is the color of blood, and because of this it has historically been associated with sacrifice, danger and courage. Yellow Is the color of gold, butter and ripe lemons. In the spectrum of visible light, yellow is found between green and orange. Blue Is the colour of the clear sky and the deep sea. It is located between violet and green on the optical spectrum. Red Is the color of blood, and because of this it has historically been associated with sacrifice, danger and courage.

Slide 68

Slide 68 text

You can copy&paste graphs from Google Sheets

Slide 69

Slide 69 text

Android project Show and explain your web, app or software projects using these gadget templates. Place your screenshot here

Slide 70

Slide 70 text

Android project real photo Show and explain your web, app or software projects using these gadget templates.

Slide 71

Slide 71 text

Place your screenshot here iPhone project Show and explain your web, app or software projects using these gadget templates.

Slide 72

Slide 72 text

iPhone project real photo Show and explain your web, app or software projects using these gadget templates.

Slide 73

Slide 73 text

Place your screenshot here Tablet project Show and explain your web, app or software projects using these gadget templates.

Slide 74

Slide 74 text

Place your screenshot here Desktop project Show and explain your web, app or software projects using these gadget templates.

Slide 75

Slide 75 text

Credits Special thanks to all the people who made and released these awesome resources for free: ■ Presentation template by SlidesCarnival ■ Photographs by Death to the Stock Photo (license) ■ Diverse device hand photos by Facebook Design Resources

Slide 76

Slide 76 text

Presentation design This presentation uses the following typographies and colors: ■ Titles: Arvo ■ Body copy: Muli You can download the fonts on this page: https://www.google.com/fonts#UsePlace:use/Collection:Arvo:400,700,400italic,700it alic|Muli:400,400italic Click on the “arrow button” that appears on the top right Dark gray #4d778a Medium gray #7198a9 Light gray #cedbe0 Salmon #faa99c Sand #edc67b Lime #b0d85b Sky #37a9dd You don’t need to keep this slide in your presentation. It’s only here to serve you as a design guide if you need to create new slides or download the fonts to edit the presentation in PowerPoint®

Slide 77

Slide 77 text

SlidesCarnival icons are editable shapes. This means that you can: ● Resize them without losing quality. ● Change line color, width and style. Isn’t that nice? :) Examples:

Slide 78

Slide 78 text

Now you can use any emoji as an icon! And of course it resizes without losing quality and you can change the color. How? Follow Google instructions https://twitter.com/googledocs/status/730087240156643328 ✋ ❤ and many more...

Slide 79

Slide 79 text

Instructions for use EDIT IN GOOGLE SLIDES Click on the button under the presentation preview that says "Use as Google Slides Theme". You will get a copy of this document on your Google Drive and will be able to edit, add or delete slides. You have to be signed in to your Google account. EDIT IN POWERPOINT® Click on the button under the presentation preview that says "Download as PowerPoint template". You will get a .pptx file that you can edit in PowerPoint. Remember to download and install the fonts used in this presentation (you’ll find the links to the font files needed in the Presentation design slide) More info on how to use this template at www.slidescarnival.com/help-use-presentation-template This template is free to use under Creative Commons Attribution license. You can keep the Credits slide or mention SlidesCarnival and other resources used in a slide footer.