CSS Layout: From Table to Flexbox

CSS LAYOUT FROM TABLE TO FLEXBOX

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

CSS LAYOUT ≠

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.

ROADMAP Table Box Model Grid Systems Flexbox

‣ 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 <table> burn for tabular data and also to create layouts TABLE HISTORY http://www.w3.org/TR/REC-html32#table

‣ <TABLE border=0> ‣ <BODY bottomMargin=0 leftMargin=0> ‣ <TD valign=top>
‣ <TABLE cellspacing=10 cellpadding=10> ‣ <TD colspan=3 rowspan=1> 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… #)&*@

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

BOX MODEL

‣ 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: <div>, <h1>, <p>… BOX MODEL HISTORY

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

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/

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

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

content padding border margin

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

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

‣ 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

GRID SYSTEMS

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

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

WITH THE GRID… 1 2 3 <div class="container clearfix"> <div
class="span-8">1</div> <div class="span-8">2</div> <div class="span-8 last">3</div> </div>

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

FLUID ≠ RESPONSIVE

SEMANTIC <div class="row"> <div class="col-xs-12 col-sm-12 col-md-9">...</div> <div class="col-xs-12 col-sm-12
col-md-9">...</div> <div class="col-xs-12 col-sm-12 col-md-9">...</div> </div> <ul class="grid grid--full"> <li class="grid__item one-whole s--one-half l--one-quarter"> ... </li> </ul>

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

SEMANTIC <div class=“products-list"> <div class="product-item">...</div> <div class="product-item">...</div> <div class=“product-item">...</div> </div>
.products-list container()    .product-item column(12) @media tablet column(8) page.html default.styl example using semantic.gs

EXAMPLES

blueprintcss.org

960.gs

semantic.gs

getbootstrap.com

foundation.zurb.com

MANY OPTIONS, BUT… I made mine =]

diogomoretti.github.io/grider

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

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

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

FLEXBOX

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

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.

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

FLEXBOX TERMINOLOGY 1 2 3 Flex Container Flex Items

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

GET STARTED <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div>
</div> flex container flex items

WITHOUT FLEXBOX 1 2 3

GET STARTED .container { display: flex; }

WITH FLEXBOX 1 2 3

FLEX-CONTAINER PROPERTIES

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

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

ﬂ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

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

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

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

justify-content 1 center 2 3

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

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

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

align-items 1 baseline 2 3

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

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

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

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

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

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

FLEX-ITEMS PROPERTIES 1 2 3

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

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

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

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

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

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

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

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

ﬂoripajs.org JOIN US!

diogo.nu THANKS!

CSS Layout: From Table to Flexbox

CSS Layout: From Table to Flexbox

More Decks by Diogo Moretti

Other Decks in Technology

Featured

Transcript