In this talk we'll explore how and why you should say goodbye to the frontend frameworks you use. Through live coding demo's we'll explore how new css techniques like CSS Grid and Flexbox can help you create more original, better and easier-to-maintain weblayouts in a fraction of the time. Codepen demo's can be found here: Grid: https://codepen.io/lucprincen/pen/eVLQbL Flex: https://codepen.io/lucprincen/pen/zRJMbe :Target: https://codepen.io/lucprincen/pen/PQdxgW :Checked: https://codepen.io/lucprincen/pen/VQRGNN

1. Magical layouts with modern CSS
March24th,WordCampRotterdam2018
@LucP
DITCH YOUR
FRAMEWORK!

2. LET'S MAKE YOUR LIVES BETTER...
@LucP

3.
BOOTSTRAP
FOUNDATION
BULMA
@LucP

4. BOOTSTRAP (JS) POWERS
~17% OF THE WEB.
SOURCE: HTTPS://W3TECHS.COM/TECHNOLOGIES/DETAILS/JS-BOOTSTRAP/ALL/ALL @LucP

5. @LucP

6. 121K STARS ON GITHUB
@LucP

7. @LucP

8. @LucP

9. Let's look at some reasons
BUT WHY?
@LucP

10. -ALL THE MARKUP
- ALL THE CLASSES
Some personal reasons:
@LucP

11. 1. IT'S NOT MAKING YOU A SMARTER
DEVELOPER.
@LucP

12. January 2010
source: Httparchive @LucP

13. Januari, 2018
source: Httparchive @LucP

14. THAT'S AN INCREASE OF
500% IN 8 YEARS.
@LucP

15. 470% GROWTH OF
AVERAGE INTERNET
SPEED.
In the US.
And broadband prices are going up.
@LucP

16. WE'RE DOING IT WRONG.
@LucP

17. @LucP

18. @LucP

19. @LucP
ILIKEUNIQUENESS

20. @LucP

21. Created by Jeremy Karbowski
@LucP

22. "BUILDING STUFF
YOURSELF IS HARD"
@LucP

23. @LucP

24. ALL HAIL MODERN CSS!
@LucP

25. 1. IT'S NOT MAKING
YOU SMARTER
2. EVERYTHING
LOOKS THE SAME
3. IT'S HARDER
THAN REGULAR CSS
@LucP
Summing up:

26. A SINGLE WORKFLOW
In three easy steps
@LucP

27. 1. WORK EVERYWHERE
2. BE EASY TO BUILD AND MAINTAIN
3. BE LIGHTWEIGHT
It needs to:
@LucP

28. The escalator principle
@LucP

29. @LucP

30. 1. PATTERN LIBRARY
Lay down the basics.
@LucP

31. 1. SET UP COLORS AND TYPOGRAPHY FIRST
2. NEVER USE CLASSES OR ID'S
3. USE HTML5 SEMANTIC MARKUP
The golden rules of the pattern phase:
@LucP

32. @LucP

33. @LucP

34. @LucP

35. Example by patternlab.io @LucP

36. (This even works in IE6)
@LucP

37. 2. MOBILE
Layout your website in the simplest and most basic
way possible.
@LucP

38. @LucP
Mobile first

39. 1. BASIC CSS ONLY
2. WIDTH: 100%
3. KEEP IT LEGIBLE
The golden rules of the mobile phase:
@LucP

40. 60% - 70%
"Mobile is my primary tool for going online"
(North America, Western Europe)
(Asian Countries)
80% - 90%
@LucPSource: SmartInsights.com

41. (BASICALLY COLORING IN)
@LucP

42. @LucP

43. @LucP

44. 3. SCALE UP
Aka: the place where we get to have fun.
@LucP

45. (Demo time!)
@LucP

46. BOOTSTRAP GRID
(44kb)
CSS GRID
( 3 lines of code )
@LucP

47. - EASIER
- MORE FLEXIBLE
- LESS MARKUP NEEDED
- BROWSERSUPPORT: 87%
@LucP

48. BOOTSTRAP ALIGNMENT
(Riddled with !important)
FLEXBOX
( margin:auto FTW)
@LucP

49. - EASIER
- MORE FLEXIBLE
- LESS MARKUP NEEDED
- BROWSERSUPPORT: 98%
@LucP

50. CAROUSELS & MODALS
(Uses JS)
::TARGET
( CSS only)
demo: youmightnotneedjavascript.com @LucP

51. - EASIER
- REMOVED EXTRA LOAD
- NO JAVASCRIPT NEEDED
- BROWSERSUPPORT: 100%
@LucP

52. TABS & ACCORDIONS
(Uses JS)
::CHECKED
( CSS only)
demo: youmightnotneedjavascript.com @LucP

53. - KEYBOARD-ACCESSIBLE
- REMOVED EXTRA LOAD
- NO JAVASCRIPT NEEDED
- BROWSERSUPPORT: 100%
@LucP

54. @LucP
THANK YOU!
Game illustrations: kenney.nl - spacekit 1.0