O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Ditch Your Framework!

376 visualizações

Publicada em

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

Publicada em: Tecnologia

Ditch Your Framework!

  1. 1. Magical layouts with modern CSS
 
 
March24th,WordCampRotterdam2018 @LucP DITCH YOUR FRAMEWORK!
  2. 2. LET'S MAKE YOUR LIVES BETTER... @LucP
  3. 3. 
 BOOTSTRAP
 FOUNDATION
 BULMA
 @LucP
  4. 4. BOOTSTRAP (JS) POWERS ~17% OF THE WEB. SOURCE: HTTPS://W3TECHS.COM/TECHNOLOGIES/DETAILS/JS-BOOTSTRAP/ALL/ALL @LucP
  5. 5. @LucP
  6. 6. 121K STARS ON GITHUB @LucP
  7. 7. @LucP
  8. 8. @LucP
  9. 9. Let's look at some reasons BUT WHY? @LucP
  10. 10. -ALL THE MARKUP - ALL THE CLASSES
 Some personal reasons: @LucP
  11. 11. 1. IT'S NOT MAKING YOU A SMARTER DEVELOPER. @LucP
  12. 12. January 2010 source: Httparchive @LucP
  13. 13. Januari, 2018 source: Httparchive @LucP
  14. 14. THAT'S AN INCREASE OF 500% IN 8 YEARS. @LucP
  15. 15. 470% GROWTH OF AVERAGE INTERNET SPEED. In the US. And broadband prices are going up. @LucP
  16. 16. WE'RE DOING IT WRONG. @LucP
  17. 17. @LucP
  18. 18. @LucP
  19. 19. @LucP ILIKEUNIQUENESS
  20. 20. @LucP
  21. 21. Created by Jeremy Karbowski @LucP
  22. 22. "BUILDING STUFF YOURSELF IS HARD" @LucP
  23. 23. @LucP
  24. 24. ALL HAIL MODERN CSS! @LucP
  25. 25. 1. IT'S NOT MAKING YOU SMARTER 2. EVERYTHING LOOKS THE SAME 3. IT'S HARDER THAN REGULAR CSS @LucP Summing up:
  26. 26. A SINGLE WORKFLOW In three easy steps @LucP
  27. 27. 1. WORK EVERYWHERE 2. BE EASY TO BUILD AND MAINTAIN 3. BE LIGHTWEIGHT It needs to: @LucP
  28. 28. The escalator principle @LucP
  29. 29. @LucP
  30. 30. 1. PATTERN LIBRARY Lay down the basics. @LucP
  31. 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. 32. @LucP
  33. 33. @LucP
  34. 34. @LucP
  35. 35. Example by patternlab.io @LucP
  36. 36. (This even works in IE6) @LucP
  37. 37. 2. MOBILE Layout your website in the simplest and most basic way possible. @LucP
  38. 38. @LucP Mobile first
  39. 39. 1. BASIC CSS ONLY 2. WIDTH: 100% 3. KEEP IT LEGIBLE The golden rules of the mobile phase: @LucP
  40. 40. 60% - 70% "Mobile is my primary tool for going online" (North America, Western Europe) (Asian Countries) 80% - 90% @LucPSource: SmartInsights.com
  41. 41. (BASICALLY COLORING IN) @LucP
  42. 42. @LucP
  43. 43. @LucP
  44. 44. 3. SCALE UP Aka: the place where we get to have fun. @LucP
  45. 45. (Demo time!) @LucP
  46. 46. BOOTSTRAP GRID (44kb) CSS GRID ( 3 lines of code ) @LucP
  47. 47. - EASIER - MORE FLEXIBLE - LESS MARKUP NEEDED - BROWSERSUPPORT: 87% @LucP
  48. 48. BOOTSTRAP ALIGNMENT (Riddled with !important) FLEXBOX ( margin:auto FTW) @LucP
  49. 49. - EASIER - MORE FLEXIBLE - LESS MARKUP NEEDED - BROWSERSUPPORT: 98% @LucP
  50. 50. CAROUSELS & MODALS (Uses JS) ::TARGET ( CSS only) demo: youmightnotneedjavascript.com @LucP
  51. 51. - EASIER - REMOVED EXTRA LOAD - NO JAVASCRIPT NEEDED - BROWSERSUPPORT: 100% @LucP
  52. 52. TABS & ACCORDIONS (Uses JS) ::CHECKED ( CSS only) demo: youmightnotneedjavascript.com @LucP
  53. 53. - KEYBOARD-ACCESSIBLE - REMOVED EXTRA LOAD - NO JAVASCRIPT NEEDED - BROWSERSUPPORT: 100% @LucP
  54. 54. @LucP THANK YOU! Game illustrations: kenney.nl - spacekit 1.0

×