Layouts in the World of Mobile Devices

Rakuten Tech Conference 2017

Aysha Anggraini

Rakuten Viki

2

Layouts of the Past

● Floats

● Inline-blocks

● Table display

● Absolute & relative positionings

● Javascript

Previous Tools to Wrestle with Layouts

3

How is it a problem?Previous tools are not meant to be used for layouts

Layouts of the Past

Pellentesque habitant morbi tristique senectus et netus et

malesuada fames ac turpis egestas. Vestibulum tortor quam,

feugiat vitae, ultricies eget, tempor sit amet, ante.

A common use case for floats

Name Age

Cersei Lannister 35

Tables - often abused for equal height columns

4

Working with hacks has consequences

Previous Tools are HacksLayouts of the Past

● Heavily reliant on the source order of HTML

■ Row wrappers to pull & push margins

■ No good way to order elements <div class="row">

<div class="col s12 l8">

<div class="about"></div>

</div>

<div class="col s12 l4">

<div

class="episodes"></div>

</div>

</div>

About

Trailers

Trailers About

On mobile

On Desktop

5

● Elements have no relationship with one another

■ Floats and equal height columns don’t work well

■ Items do not align as expected

● Complicated CSS and Markups

Column 1

Column 2

Column 3

Column 4

6

FlexboxLayout mode for working with elements arranged in one

dimension. This works best for equal height columns &

vertical centering of elements. It is not for working with

page layouts.

7

Laying out elements in a single dimensions — rows or columns

Candidates for Flexbox

Layouts of the Present

8

Centering elements

Candidates for Flexbox

Layouts of the Present

Column 1

9

Ordering Elements

Candidates for Flexbox

Layouts of the Present

Column 2 Column 4Column 3 Column 1

Can be done through order properties

10

Flexbox is not enough

11

CSS GridLayout mode for working with elements arranged in two

dimension. A true layout system for laying content on

the web.

12

Laying out elements in a two dimensions — rows and columns

The Magic of CSS Grid

Layouts of the Future

● Simpler to use

■ No more relying on markup’s source order

■ Maintainable code

13

<div class="row">

<div class="col s12 l8">

<div class="about"></div>

</div>

<div class="col s12 l4">

<div class="episodes"></div>

</div>

</div>

VS.<div class="wrapper">

<div class="about"></div>

<div class="episodes"></div>

</div>

Floats CSS Grid

14

<div class="wrapper">

<div class="about"></div>

<div class="episodes"></div>

</div>

.wrapper {

display: grid;

grid-template-columns: repeat(2, 1fr);

grid-gap: 20px;

}

.about {

grid-column: 1 / 2;

}

HTML CSS

15

Position items with grid-column and grid-row

CSS Grid

Layouts of the Future

.wrapper {

display: grid;

grid-template-columns: 25% 25% 25% 25%;

grid-gap: 10px;

}

Column 1 Column 4

Column 5 Column 6

Column 2 Column 3

Column 7

16

Position items with grid-column and grid-row

CSS Grid

Layouts of the Future

Column 1

Column 2

Column 3

Column 4

Column 5

Column 6 Column 7

.column-2 {

grid-column: 2 / span 2;

grid-row: 1 / span 2;

}

.column-4 {

grid-row: 2 / span 2;

}

.column-7 {

grid-column: 3 / span 2;

}

17

The FR Unit

CSS Grid

Layouts of the Future

.wrapper {

display: grid;

grid-template-columns: 25% 25% 25% 25%;

grid-gap: 10px;

}

Can be change to:

1fr 1fr 1fr 1fr or

repeat(4, 1fr)

Column 1 Column 4

Column 5 Column 6

Column 2 Column 3

Column 7

18

The FR Unit

CSS Grid

Layouts of the Future

1/4 1/41/4 1/4

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

2/3 1/3

grid-template-columns: 2fr 1fr;

19

The FR Unit

CSS Grid

Layouts of the Future

.wrapper {

display: grid;

grid-template-columns: 25% 25% 25% 25%;

grid-gap: 10px;

}

20

21

The FR Unit

CSS Grid

Layouts of the Future

.wrapper {

display: grid;

grid-template-columns: repeat(4, 1fr);

grid-gap: 10px;

}

FR units can be mixed!

25% 25% 1fr 1fr or

500px repeat(2, 1fr)

22

Get creative with grid-template-areas

CSS Grid

Layouts of the Future

Hero

small1 small2

small3 small4 small5 small6 small7

med1

grid-template-areas:

"small1 small2 hero hero hero"

"med1 med1 hero hero hero"

"med1 med1 hero hero hero"

"small3 small4 small5 small6 small7";

23

Flexbox CSS Grid

24

Hero

small1 small2

small3 small4 small5 small6 small7

med1

Grid item can be

displayed as a flex

container

25

Hero

small1 small2

small3 small4 small5 small6 small7

med1

Grid item as flexAlign content inside the items:

.hero { align-items: flex-end }

26

http://cssgridgarden.com/

CSS Grid Garden

27

https://gridbyexample.com/

Grid by Example

28

https://codepen.io/collection/nvggZM/

CSS Grid Experiments

29

30

@supportsAlso known as feature queries. Modernizr in CSS. Add

stylesheet rules based on whether your browser supports

one or more CSS feature.

31

// fallback code for older browsers

@supports (display: grid) {

// code for newer browsers

// with overrides of the code above

}

32

.wrapper {

max-width: 1440px;

display: grid;

grid-gap: 3px;

grid-template-columns: repeat(2, 1fr);

grid-template-columns: repeat(3, 1fr);

}

.hero-item {

width: 70%;

grid-column: 1 / span 3;

}

Will be ignored by

unsupported

browsers

33

.wrapper {

max-width: 1440px;

display: grid;

grid-gap: 3px;

grid-template-columns: repeat(2, 1fr);

grid-template-columns: repeat(3, 1fr);

}

.hero-item {

width: 70%;

grid-column: 1 / span 3;

}

Will have side effects

on supported

browsers

@supports (display: grid) {

.wrapper > * {

width: auto;

}

}Reset the width if grid is

supported

34

Do I have to code the same layout twice?Only if you expect the layout to be the same in all browsers

35

Code

accessible

HTML

Code layout

that works on

all browsers

Progressively

enhance layout

for modern

browsers

36

https://codepen.io/rrenula/full/VMWMWx/

Thumbnail presentation with CSS Grid with

fallback for older browsers

37

https://hacks.mozilla.org/2016/08/using-feature-queries-in-css

Using Feature Queries in CSS

38

aysha.me

@renettarenula

codepen.io/rrenula

Thanks