Tweet
Tweet

Slide 1

Slide 1 text

Modern Layout CSS Flexbox, CSS Regions & CSS Shapes 19 March 2014

Slide 2

Slide 2 text

Hello! I’m Razvan Caliman @razvancaliman

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

CSS Regions CSS Shapes CSS Custom Filters CSS that has never seen the light of day polyfills, prototypes, demos & tools Stuff I work on:

Slide 5

Slide 5 text

Let’s talk about layout

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

“web pages” we call them

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

“web corkboards” we actually mean

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

semantics WTF a pain to maintain “spacer.gif” anyone?

Slide 13

Slide 13 text

position: absolute; ..come on!

Slide 14

Slide 14 text

float: left; “good enough” solution what about: •  “top”, “bottom” or “center” •  practical grids •  vertical alignment •  portability

Slide 15

Slide 15 text

CSS Flexbox position, flex, order

Slide 16

Slide 16 text

Prefixes best thing ever * * if working in a perfect, sterile, purely rational world

Slide 17

Slide 17 text

Prefixes worst thing ever

Slide 18

Slide 18 text

Flexbox evolution display: box 2009 display: flexbox 2011 display: flex today

Slide 19

Slide 19 text

“44 years ago we put a man on the Moon, but we still can’t vertically center things in CSS” circa August 2013 Anonymous

Slide 20

Slide 20 text

display: flex flex-container flex-item flex-item regular element

Slide 21

Slide 21 text

flex-direction how to arrange flex-items row row-reverse column column-reverse default

Slide 22

Slide 22 text

flex-direction: row; main-axis cross-axis

Slide 23

Slide 23 text

flex-direction: column; cross-axis main-axis

Slide 24

Slide 24 text

justify-content how to align along the main axis flex-start flex-end center space-between

Slide 25

Slide 25 text

align-items flex-start flex-end how to align flex-items along the cross-axis

Slide 26

Slide 26 text

align-items center stretch how to align flex-items along the cross-axis

Slide 27

Slide 27 text

Mind the axes otherwise it gets confusing

Slide 28

Slide 28 text

justify-content: flex-start; align-items: center; flex-direction: row; flex-direction: column;

Slide 29

Slide 29 text

justify-content: flex-start; align-items: center; flex-direction: row; flex-direction: column; cross-axis cross-axis main-axis main-axis

Slide 30

Slide 30 text

order: ; shift visual order of flex-items. DOM order stays the same. order: -1

Slide 31

Slide 31 text

Flex creating fluid layout

Slide 32

Slide 32 text

flex: 1 0 100px; how much can a flex-item grow and shrink along the main-axis, and its initial size. shorthand notation means: flex: flex-grow flex-shrink flex-basis;

Slide 33

Slide 33 text

flex-grow - by what proportion can a flex-item grow flex-shrink - by what proportion can a flex-item shrink flex-basis - initial size of flex-item, before grow or shrink

Slide 34

Slide 34 text

flex-grow: 1; 300px available space w w w w + 300/3 w + 300/3 w + 300/3 each flex-item gets an even share of the available space

Slide 35

Slide 35 text

300px available space w w w w + 300/4 * 2 w + 300/4 w + 300/4 flex-grow: 2; first flex-item gets twice as much space as others flex-grow: 1 flex-grow: 1;

Slide 36

Slide 36 text

flex: 1 0 100px; -  grow by one proportion of the shared available space (flex-grow: 1) -  do not shrink (flex-shrink: 0) -  get an initial size of a hundred pixels (flex-basis: 100px), which means min-width here, because it must not shrink

Slide 37

Slide 37 text

Careful! flex: 1 0 100px; when flex basis is other than zero (0), flex-grow does not distribute all unused space as you might expect. The flex-basis is subtracted before space is distributed.

Slide 38

Slide 38 text

Browser support 2011 2009 latest syntax

Slide 39

Slide 39 text

cross-browser support .container { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -webkit-box-orient: horizontal; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; } 2009 Android Safari 3 - 6 IE 10 2011 latest syntax Chrome Chrome Android Firefox Safari 7, iOS 7 Opera credit: Zoe Gillenwater (zomigi.com)

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

.container { … } .flexbox .container { display: -webkit-flex; display: flex; }

Slide 42

Slide 42 text

CSS Regions flow content between boxes

Slide 43

Slide 43 text

CSS Regions A

Slide 44

Slide 44 text

Google removed CSS Regions

Slide 45

Slide 45 text

Apple keeps CSS Regions

Slide 46

Slide 46 text

chrome://flags CSS Regions are disabled by default in Chrome.

Slide 47

Slide 47 text

1.  go to chrome://flags 2.  find “Experimental Web Platform features” and click enable 3.  restart Chrome How to enable CSS Regions

Slide 48

Slide 48 text

-webkit- CSS Regions are prefixed

Slide 49

Slide 49 text

flow-into: myFlow; collects content into a named flow flow-from: myFlow; renders content from a named flow 2-step process

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

regions are only visual containers, they don’t reorder the DOM.

Slide 52

Slide 52 text

•  event handlers on content still work •  original styles for content still apply good meh •  tricky to add event handlers to a region •  limited styling of content in a specific region

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

•  any block-level item can become a region •  ::before, ::after •  upcoming block-generating specs like CSS Grids, overflow: fragment Myth Regions require empty placeholder
s

Slide 56

Slide 56 text

•  regions work with every layout model •  regions can auto-size to their content •  not a replacement for CSS Multi-column Myth Regions are not responsive

Slide 57

Slide 57 text

•  regions are not a layout model, such as Flexbox or Multi-col •  regions are a fragmentation model •  building blocks Myth Regions are a bad layout model

Slide 58

Slide 58 text

CSS Regions Object Model JavaScript API for flows and regions document.getNamedFlows()[‘myFlow’] myFlow.getRegions() myFlow.getContent() myFlow.overset

Slide 59

Slide 59 text

Responsive Menu with CSS Regions http://cdpn.io/tdHEg

Slide 60

Slide 60 text

Adaptive UI with CSS Regions

Slide 61

Slide 61 text

Browser support IE 10 behind chrome://flags older implementation enabled by default

Slide 62

Slide 62 text

Polyfill github.com/FremyCompany/css-regions-polyfill 9+ post-Presto

Slide 63

Slide 63 text

CSS Shapes wrap content inside and around custom shapes

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

shape-inside wrap content inside of a custom shape

Slide 66

Slide 66 text

shape-outside wrap content around a custom shape

Slide 67

Slide 67 text

1.  go to chrome://flags 2.  find “Experimental Web Platform features” and click enable 3.  restart Chrome How to enable CSS Shapes

Slide 68

Slide 68 text

Browser support behind chrome://flags

Slide 69

Slide 69 text

Resources for CSS Shapes Creating Non-Rectangular Layouts with CSS Shapes CSS Shapes on html.adobe.com Alice in Wonderland demo with CSS Shapes

Slide 70

Slide 70 text

@razvancaliman CSS Flexbox position, align, flex and order elements CSS Regions control flow of content CSS Shapes wrap content inside/around shapes

Slide 71

Slide 71 text

Experiment! @razvancaliman