CSS Day slides

1. ABOUT
FLEXBOX
You can't float anymore
CSS day FAENZA- 25 marzo 2016

2. About me
I'm Davide Di Pumpo, I'm an UI developer in .
I love graphic novel, competitive videogames and cats.
Objectway
You can nd me on the internet with the nickname
MakhBeth
- -Twitter GitHub LinkedIn

3. Let's start
MEOW

4. The problem?
How can I make this f*****g layout?

5. The holy grail layout
The Holy Grail refers to a web page layout which has multiple, equal height
columns that are defined with style sheets. It is commonly desired and
implemented, although the ways in which it can be implemented with current
technologies all have drawbacks. Because of this, finding an optimal
implementation has been likened to searching for the elusive Holy Grail.
Source - Wikipedia

6. The code:
<div class="HolyGrail">
<header class="HolyGrail-header">HEADER</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content">
CONTENT
<p>
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi inventor
</p>
</main>
<nav class="HolyGrail-nav">NAV</nav>
<aside class="HolyGrail-ads">ADS</aside>
</div>
<footer class="HolyGrail-footer">FOOTER</footer>
</div>

7. Once upon a time...
...we had:
Tables
Inline blocks
Float

8. Tables
Seriously?
Semantic? NOPE
Responsive? NOPE
Vertical align? YUP *
Order? NOPE *

9. How about
display:table;?
Semantic? YUP
Responsive? YUP*
Vertical align? YUP
Order? NOPE *

10. Come on! What's the problem guy?
Styling the element is a pain.
Try to add a padding to a row
or a max-width to a cell
or a margin...
The order is still a view issue *
* You can use translate for horizontal order...

11. *
.first {
display: table-caption;
}
.second {
display: table-footer-group;
}

12. See on CodePen

13. .HolyGrail {
display: table;
height: 100vh;
}
.HolyGrail-header {
display: table-row;
height: 1px;
}
.HolyGrail-footer {
display: table-row;
height: 1px;
}
.HolyGrail-body {
display: table;
height: 100%;
}

14. .HolyGrail-content,
.HolyGrail-nav,
.HolyGrail-ads {
display: table-cell;
width: 20%;
}
.HolyGrail-content {
width: 60%;
transform: translateX(33.333%);
}
.HolyGrail-nav {
transform: translateX(-300%);
}

15. Inline Block
Semantic? YUP
Responsive? YUP *
Vertical align? ALMOST
Order? NOPE *

16. What's the matter?
Vertical stretch an element is impossible
The order is still a view issue *
* You can use margins for horizontal order...
but...
BUT...

17. White Space

18. See on CodePen

19. .HolyGrail-body {
font-size: 0;
text-align: left;
}
.HolyGrail-nav, .HolyGrail-content, .HolyGrail-ads {
display: inline-block;
vertical-align: top;
font-size: 1rem;
text-align: center;
width: 20%;
}
.HolyGrail-nav {
margin-left: -80%;
}
.HolyGrail-content {
width: 60%;
margin-left: 20%;
}
.HolyGrail-ads {
margin-left: 60%;
}

20. Float
Semantic? YUP
Responsive? YUP
Vertical align? AHAHAHAHAH NOPE
Order? NOPE *

21. Why not?
The order is still a view issue *
* You can use margins...
Impossible to manage vertical alignment
Clear x
Block Formatting Context

22. See on CodePen

23. .HolyGrail-body:after {
display: table;
clear: both;
content: " ";
}
.HolyGrail-nav,
.HolyGrail-content,
.HolyGrail-ads {
width: 20%;
float: left;
}
.HolyGrail-nav {
margin-left: -80%;
}
.HolyGrail-content {
width: 60%;
margin-left: 20%;
}

24. RECAP
about the old good times
Tables have issues
Inline blocks have issues
Floats have issues
It's impossible (without hacks) to manage order
more important...

25. They are all hacks

26. Why Flexbox?
Semantic? YUP
Responsive? YUP
Vertical align? YUP
Order? F*CK YEAH

27. View on CodePen

28. .HolyGrail {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.HolyGrail-body {
display: flex;
flex-grow: 1;
}
.HolyGrail-nav {
order: -1;
}
.HolyGrail-content,
.HolyGrail-nav,
.HolyGrail-ads {
flex: 1 0 20%;
}
.HolyGrail-content {
flex-basis: 60%;
}

29. It's all there?
Nope

30. But rst some important knowledge

31. Di erences between container and item
display: flex;
Flex item Flex item Flex item

32. Direction
------ direction row ------>
Flex item Flex item Flex item
C
o
l
u
m
n
Flex item
Flex item
Flex item

33. Flex Basis, all is relative
flex-basis: 50%; flex-basis: 50%;
flex-basis: 50%;
flex-basis: 50%;

34. Available space, this is the magic
flex item flex item FREE SPACE °_°y
flex grow flex item
flex
shrink
flex item flex item

35. Let's see the rules!
CODEPEN

36. <div class="Cont">
<div class="Ele Ele--a">A</div>
<div class="Ele Ele--b">B</div>
<div class="Ele Ele--c">C</div>
</div>
A
B
C

37. A B C
.Cont {
display: flex;
}

38. A B C
.Cont {
display: flex;
justify-content: space-around;
}

39. A B C
.Cont {
display: flex;
justify-content: space-between;
}

40. A B C
.Cont {
display: flex;
justify-content: flex-end;
}

41. A B C
.Cont {
display: flex;
}
.Ele--a {
flex-grow: 1;
}

42. A
B
C
.Cont {
display: flex;
flex-direction: column-reverse
}

43. C
A
B
.Cont {
display: flex;
flex-direction: column
}
.Ele--c {
order: -1;
}

44. A B C
.Cont {
display: flex;
}
.Ele {
width: 50%;
}

45. A B
C
.Cont {
display: flex;
flex-wrap: wrap;
}
.Ele {
width: 50%;
}

46. A B
C
.Cont {
display: flex;
flex-wrap: wrap-reverse;
}
.Ele {
width: 50%;
}

47. A B C
.Cont {
display: flex;
height: 100px;
}

48. A B C
.Cont {
display: flex;
height: 100px;
align-items: flex-end;
}

49. A
B
C
.Cont {
display: flex;
height: 100px;
}
.Ele--b {
align-self: center;
}

50. Real stuff

51. See on CodePen

52. .FormContainer {
display: flex;
flex-wrap: wrap;
}
.Input {
flex: 1 0 300px;
}

53. With mediaqueries

55. See on CodePen

56. .Container {
display: flex;
flex-wrap: wrap;
}
.Title, .SubTitle {
width: 100%;
}
@media only screen and (min-width: 50rem) {
.Title, .SubTitle {
order: -1;
}
}

57. RECAP
Flexible
Responsive
Ready for today

58. What's now?

59. Can I use?

60. How about old crappy explorer?

61. You can go for a fallback!
.FormContainer {
display: flex;
flex-wrap: wrap;
}
// Clearfix for old browser
.FormContainer:after {
display: table;
clear: both;
content: " ";
}
.Input {
flex: 1 0 300px;
float: left; // old browser support
width: calc(25% - 10px); // old browser support
}

62. Or if you want to:
A poly ll appears!

63. Is flexbox a
silver bullet?

64. No
Sorry, I've lied to you
A little

65. Flexbox is designed basically for:
content driven layout
component
not for grid
Take a look at css grid

66. But Grid CSS is not supported for
now

67. Any idea?
There are a few:
And my favourite one...
Flexboxgrid
Bootstrap - alpha 4

68. Super GiGi

69. RECAP
Can I use? Yes
It's not for everything, but it's the best we have now
There are a lot of tool to help us.

70. Links for you:
CSS Tricks guide to exbox
Learn exbox playing with exbox froggy
All the known exbox bugs
Autopre xer
Modernizr

71. Questions?

72. http://goo.gl/1jsI7u