Slide 1

Slide 1 text

CSS LAYOUT FROM TABLE TO FLEXBOX

Slide 2

Slide 2 text

CSS LAYOUTS FROM TABLE TO FLEXBOX ‣ Front-end Developer @ Chaordic ‣ Website maintainer @ BrazilJS ‣ Co-organizer @ FloripaJS Devs Meetup ‣ Organizer @ Front in Floripa ‣ Pearl Jam Fan \m/ ABOUT ME

Slide 3

Slide 3 text

CSS LAYOUT ≠

Slide 4

Slide 4 text

WHAT IS CSS LAYOUT? It is the use of CSS to create layouts. The naming came up with the CSS 1.0 and 2.1 to replace the tables. Today the term is also used by W3C for the creation of new speciﬁcations.

Slide 5

Slide 5 text

ROADMAP Table Box Model Grid Systems Flexbox

Slide 6

Slide 6 text

TABLE

Slide 7

Slide 7 text

‣ Appeared at 1995 with working draft (until today) of HTML 3.0 ‣ Gained strength (+attributes) with the approved HTML 3.2 ‣ Contrary to the common thinking, the burn for tabular data and also to create layouts TABLE HISTORY http://www.w3.org/TR/REC-html32#table

Slide 8

Slide 8 text

‣ ‣ ‣ ‣ ‣ TABLE FACTS http://www.w3.org/TR/REC-html32#table I do not want those weird borders. Great! My website now sticks to the left. Vertical center align? Who will need it? What the diff? F uck! Very simple. Oh, wait… #)&*@

Slide 9

Slide 9 text

‣ Style (?), content and markup mixed ‣ Non-incremental render (doesn`t show feedback) ‣ Acessibility ‣ Unreadable code TABLE PROBLEMS http://en.wikipedia.org/wiki/Incremental_rendering

Slide 10

Slide 10 text

BOX MODEL

Slide 11

Slide 11 text

‣ Appeared at 1996 with CSS 1 and the HTML 3.2 ‣ CSS Concept (separate style and markup, besides the reuse rules) ‣ Appearing of block elements:

,

… BOX MODEL HISTORY

Slide 12

Slide 12 text

with css 1 ‣ width, height ‣ display, ﬂoat ‣ margin, padding e border BOX MODEL EVOLUTION I http://www.w3.org/TR/CSS21/

Slide 13

Slide 13 text

with css 2.1 ‣ position ‣ top, bottom, left, right ‣ And after, max-* e min-* for height and width BOX MODEL EVOLUTION II http://www.w3.org/TR/css3-ui/

Slide 14

Slide 14 text

2002 - TABLELESS http://www.w3.org/2002/03/csslayout-howto http://alistapart.com/article/practicalcss http://tableless.com.br box model tabular data layouts with css ( )

Slide 15

Slide 15 text

with css 3 ‣ box-sizing BOX MODEL EVOLUTION III http://www.w3.org/TR/css3-ui/

Slide 16

Slide 16 text

content padding border margin

Slide 17

Slide 17 text

content padding border margin box-sizing: border-box; width and height are not aﬀected by padding or border

Slide 18

Slide 18 text

http://reference.sitepoint.com/css/ie5boxmodel

Slide 19

Slide 19 text

‣ Align objects vertically ‣ Positioning boxes side-by-side (ﬂoat, inline or inline-block!?) ‣ Clearﬁx method, clear: both… ‣ Automatic height ‣ Boxes with the same height ‣ … and more (really!) BOX MODEL PROBLEMS

Slide 20

Slide 20 text

GRID SYSTEMS

Slide 21

Slide 21 text

‣ He was born to solve layout problems and create a standard of columns ‣ Started at 2007 with Blueprint ‣ Usually divided into columns (12, 16 or 24) ‣ It is an abstraction of the box model, because it just have CSS 2.1 behind ‣ The “Boom” happened at 2009, with 960.gs GRID SYSTEMS?

Slide 22

Slide 22 text

BEFORE THE GRID… 1 2 3 :( Question 1: Make with css, the image above:

Slide 23

Slide 23 text

WITH THE GRID… 1 2 3

Slide 24

Slide 24 text

‣ Column ‣ Fluid / Fixed ‣ Semantic / Non-Semantic ‣ Responsive / Fixed / Adaptative ‣ … and more! GRID TYPES http://www.vanseodesign.com/web-design/grid-types/ http://www.thegridsystem.org/ http://www.sitepoint.com/understanding-css-grid-systems/

Slide 25

Slide 25 text

FLUID ≠ RESPONSIVE

Slide 26

Slide 26 text

SEMANTIC

...

Slide 27

Slide 27 text

Non-semantic statements only make sense if we use pure css

Slide 28

Slide 28 text

SEMANTIC

...

.products-list container()    .product-item column(12) @media tablet column(8) page.html default.styl example using semantic.gs

Slide 29

Slide 29 text

EXAMPLES

Slide 30

Slide 30 text

blueprintcss.org

Slide 31

Slide 31 text

960.gs

Slide 32

Slide 32 text

semantic.gs

Slide 33

Slide 33 text

getbootstrap.com

Slide 34

Slide 34 text

foundation.zurb.com

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

MANY OPTIONS, BUT… I made mine =]

Slide 37

Slide 37 text

diogomoretti.github.io/grider

Slide 38

Slide 38 text

‣ 100% Fluid ‣ 100% Semantic ‣ Responsive ‣ Written in Stylus ‣ Use $placeholder ‣ Fully conﬁgurable ‣ box-sizing: border-box by default GRIDER

Slide 39

Slide 39 text

GRIDER @import “path/to/grider" .sidebar @extends $grider-3 .another-box @extends $grider-3 .content @extends $grider-9 .sidebar, .another-box { .. } .content { .. } default.styl default.css

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

CSS LAYOUT SPECS http://goo.gl/52sGOm CSS Grid Layout Module Level 1 Speciﬁcation Release Today Status CSS Flexible Box Layout Module Level 1 2009 2014 Last Call  WD CSS Grid Layout Module Level 1 2011 2015 WD CSS Template Layout Module 2005 2015 WD Note CSS Multi-Column Layout Module 1999 2011 RC

Slide 42

Slide 42 text

FLEXBOX

Slide 43

Slide 43 text

http://caniuse.com/#feat=flexbox 11+ 28+ 29+ 6.1+ 17+ -webkit- all major mobile browsers

Slide 44

Slide 44 text

FLEXBOX DEFINITION The main idea is to give the "container" the ability to change the width and height of your children in order to ﬁll the blank spaces better and also to prevent overﬂow.

Slide 45

Slide 45 text

FLEXBOX - THE BOX 1 2 main size cross size CROSS AXIS MAIN AXIS main start main end cross start cross end

Slide 46

Slide 46 text

FLEXBOX TERMINOLOGY 1 2 3 Flex Container Flex Items

Slide 47

Slide 47 text

FLEXBOX PROPERTIES ‣ display ‣ flex-direction ‣ flex-wrap ‣ flex-flow ‣ justify-content ‣ align-items ‣ … ‣ order ‣ flex-grow ‣ flex-shrink ‣ flex-basis ‣ align-self Flex Container Flex Item

Slide 48

Slide 48 text

GET STARTED

flex container flex items

Slide 49

Slide 49 text

WITHOUT FLEXBOX 1 2 3

Slide 50

Slide 50 text

GET STARTED .container { display: flex; }

Slide 51

Slide 51 text

WITH FLEXBOX 1 2 3

Slide 52

Slide 52 text

FLEX-CONTAINER PROPERTIES

Slide 53

Slide 53 text

ﬂex-direction 1 2 3 row default 3 2 1 row-reverse

Slide 54

Slide 54 text

ﬂex-direction 1 2 column 3 3 2 column-reverse 1

Slide 55

Slide 55 text

ﬂex-wrap nowrap default 1 2 3 4 5 6 wrap 1 2 3 4 5 6 wrap-reverse 5 6 4 3 1 2

Slide 56

Slide 56 text

ﬂex-ﬂow flex-direction + flex-wrap row wrap 1 2 3 4 5 6 row nowrap 1 2 3 4 5 6 default

Slide 57

Slide 57 text

ALIGNMENT align-items justify-content cross-axis main-axis

Slide 58

Slide 58 text

justify-content 1 ﬂex-start default 2 3 1 ﬂex-end 2 3

Slide 59

Slide 59 text

justify-content 1 center 2 3

Slide 60

Slide 60 text

justify-content 1 space-between 2 3 1 space-around 2 3

Slide 61

Slide 61 text

align-items 1 stretch 2 3 default 1 ﬂex-start 2 3

Slide 62

Slide 62 text

align-items 1 ﬂex-end 2 3 1 center 2 3

Slide 63

Slide 63 text

align-items 1 baseline 2 3

Slide 64

Slide 64 text

align-content 1 stretch 2 3 4 5 6 7 8 9 default

Slide 65

Slide 65 text

align-content 1 ﬂex-start 2 3 4 5 6 7 8

Slide 66

Slide 66 text

align-content 1 ﬂex-end 2 3 4 5 6 7 8

Slide 67

Slide 67 text

align-content 1 center 2 3 4 5 6 7 8

Slide 68

Slide 68 text

align-content 1 space-between 2 3 4 5 6 7 8

Slide 69

Slide 69 text

align-content 1 space-around 2 3 4 5 6 7 8

Slide 70

Slide 70 text

FLEX-ITEMS PROPERTIES 1 2 3

Slide 71

Slide 71 text

order 3 {number} 1 2 .item3 { order: -1; }

Slide 72

Slide 72 text

ﬂex-grow 1 {number} 2 3 .item2 { flex-grow: 2; }

Slide 73

Slide 73 text

ﬂex-shrink 1 {number} .item2 { flex-shrink: 2; } 3 2

Slide 74

Slide 74 text

ﬂex-basis 1 {size} .item1 { flex-basis: 20px; } 3 2

Slide 75

Slide 75 text

ﬂex 1 .item { flex: 0 1 auto; } flex-grow + flex-shrink + flex-basis 2 3

Slide 76

Slide 76 text

align-self 1 2 3 .item1{align-self: flex-start} .item2{align-self: stretch} .item3{align-self: flex-end} default: auto

Slide 77

Slide 77 text

.item {margin: auto} .container {display: flex}

Slide 78

Slide 78 text

RESOURCES ‣ https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox- properties ‣ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ flex- wrap ‣ http://cssflexbox.com ‣ http://philipwalton.github.io/solved-by-flexbox/ Learn ‣ https://github.com/philipwalton/flexbugs Bugs