Ditch Your Framework! - Magical layouts with modern css
- 1. Magical layouts with modern CSS March3rd,WordCampOslo2018 @LucP DITCH YOUR FRAMEWORK!
- 2. LET'S MAKE YOUR LIVES BETTER... @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
- 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. 1. STYLEGUIDE Lay down the basics. @LucP
- 29. 1. SET UP COLORS AND TYPOGRAPHY FIRST 2. NEVER USE CLASSES OR ID'S 3. USE HTML5 SEMANTIC MARKUP The golden rules of the style guide phase: @LucP
- 30. @LucP
- 31. @LucP
- 32. @LucP
- 33. Example by patternlab.io @LucP
- 34. (This even works in IE6) @LucP
- 35. 2. MOBILE Layout your website in the simplest and most basic way possible. @LucP
- 37. 1. BASIC CSS ONLY 2. WIDTH: 100% 3. KEEP IT LEGIBLE The golden rules of the mobile phase: @LucP
- 38. 60% - 70% "Mobile is my primary tool for going online" (North America, Western Europe) (Asian Countries) 80% - 90% @LucPSource: SmartInsights.com
- 40. @LucP
- 41. @LucP
- 42. 3. SCALE UP Aka: the place where we get to have fun. @LucP
- 44. BOOTSTRAP GRID (44kb) CSS GRID ( 3 lines of code ) @LucP
- 45. - EASIER - MORE FLEXIBLE - LESS MARKUP NEEDED - BROWSERSUPPORT: 87% @LucP
- 46. BOOTSTRAP ALIGNMENT (Riddled with !important) FLEXBOX ( margin:auto FTW) @LucP
- 47. - EASIER - MORE FLEXIBLE - LESS MARKUP NEEDED - BROWSERSUPPORT: 98% @LucP
- 48. CAROUSELS & MODALS (Uses JS) ::TARGET ( CSS only) demo: youmightnotneedjavascript.com @LucP
- 49. - EASIER - REMOVED EXTRA LOAD - NO JAVASCRIPT NEEDED - BROWSERSUPPORT: 100% @LucP
- 50. TABS & ACCORDIONS (Uses JS) ::CHECKED ( CSS only) demo: youmightnotneedjavascript.com @LucP
- 51. - KEYBOARD-ACCESSIBLE - REMOVED EXTRA LOAD - NO JAVASCRIPT NEEDED - BROWSERSUPPORT: 100% @LucP
- 52. 🔥 BONUS FEATURE 🔥 @LucP
- 53. MULTIPLE GOOGLE FONTS ICON FONTS Let's also get rid of @LucP
- 54. GIF: Adobe Typekit Variable fonts FTW @LucP
- 55. - LESS LOAD - ANIMATIONS! - COLOR IN CSS - RESIZE INDEFINITELY - BROWSERSUPPORT: 98% SVG Icons @LucP
- 56. @LucP THANK YOU! Game illustrations: kenney.nl - spacekit 1.0