CSSDAY 2024

Transcript

1. Copyright © GELLIFY Group All rights reserved Utopia System A volte i sogni diventano realtá
2. Kevin Shallvari Kevin-Shallvari
3. Kevin Shallvari Sviluppatore Front End @Gellify Kevin-Shallvari
4. Kevin Shallvari Sviluppatore Front End @Gellify Kevin-Shallvari Amo CSS & FP
5. Kevin Shallvari Sviluppatore Front End @Gellify Kevin-Shallvari Amo CSS & FP Amo la musica elettronica
6. Copyright © GELLIFY Group All rights reserved Contenuti: - Il Responsive Design "ai miei tempi”
7. Copyright © GELLIFY Group All rights reserved Contenuti: - Il Responsive Design "ai miei tempi” - Utopia System è il responsive design di domani?
8. Copyright © GELLIFY Group All rights reserved Contenuti: - Il Responsive Design "ai miei tempi” - Utopia System è il responsive design di domani? - E con i designer come facciamo?
10. media queries as a way to conditionally apply CSS rules. They tell the browser that it should ignore or apply certain rules depending on the user’s device. Media queries let us present the same HTML content as distinct CSS layouts. So, instead of maintaining one website for smartphones and an entirely unrelated site for laptops/desktops, we can use the same HTML markup (and “Responsive design” refers to the idea that your website should display equally well in everything, from widescreen monitors to mobile phones.
11. LIFE IS SUFFERING
12. Quali dovrebbero essere le mie media queries?
13. TAILWIND BULMA BOOTSTRAP MATERIAL UI
14. PROBLEMI, PROBLEMI, PROBLEMI..
15. DUPLICAZIONE DEL CODICE
16. ESPERIENZA UTENTE POCO FLUIDA 1025px 1024px
17. POCA INCLUSIVITÁ ESCLUSI
18. NON SEI TU, DESIGNER, É IL RESPONSIVE!!!!!!! CIAO! SONO UN DESIGNER E VI ODIO TUTTI
19. MA SE POTESSIMO USCIRE DA QUESTA GABBIA?
20. Copyright © GELLIFY Group All rights reserved
22. Copyright © GELLIFY Group All rights reserved COS’È UTOPIA?
23. UN DESIGN SYSTEM
24. UN DESIGN SYSTEM
25. TRE COPPIE DI VALORI @MIN @MAX
26. TRE COPPIE DI VALORI @MIN @MAX VIEWPORT 320PX 1500PX
27. TRE COPPIE DI VALORI @MIN @MAX VIEWPORT 320PX 1500PX FONT-SIZE BASE 16PX 24PX
28. TRE COPPIE DI VALORI @MIN @MAX VIEWPORT 320PX 1500PX FONT-SIZE BASE 16PX 24PX MOLTIPLICATORE 1.2 1.333
29. INTERPOLIAMO In matematica, e in particolare in analisi numerica, per interpolazione si intende un metodo per individuare nuovi punti del piano cartesiano a partire da un insieme finito di punti dati. - wikipedia
30. CSS sa fare i conti
31. CSS sa fare i conti calc()
32. CSS sa fare i conti calc() min()
33. CSS sa fare i conti calc() min() max()
34. clamp()
35. Tipografia Fluida Font-Size-Min = 16px -> 1rem Font-Size-Max = 24px -> 1.5rem
36. Tipografia Fluida MIN Font-Size-Min = 16px -> 1rem Font-Size-Max = 24px -> 1.5rem
37. Tipografia Fluida MIN MAX Font-Size-Min = 16px -> 1rem Font-Size-Max = 24px -> 1.5rem
38. Tipografia Fluida MIN MAX DESIDERATO Font-Size-Min = 16px -> 1rem Font-Size-Max = 24px -> 1.5rem
39. UN PO DI MATEMATICA Slope = (MaxFontSize - MinFontSize) / (MaxWidth - MinWidth) yIntersection = (-1 * MinWidth) * Slope + MinFontSize font-size: clamp(MinSize[rem], yIntersection[rem] + Slope * 100vw, MaxSize[rem])
40. EASY
41. GENERA STEPS
42. ATTENZIONE
43. INTERO SISTEMA TIPOGRAFICO
44. NON È SOLO LA TIPOGRAFIA AD ESSERE FLUIDA
47. SPAZI MODULARI
48. COPPIE CUSTOM DI VALORI
49. SPAZI COERENTI FRA DI LORO
50. RITMO VERTICALE/ORIZZONTALE
51. IL RISULTATO?
53. Copyright © GELLIFY Group All rights reserved I BENEFICI
54. ARMONIA E CONSISTENZA PER TUTTI I DEVICE I BENEFICI
55. ARMONIA E CONSISTENZA PER TUTTI I DEVICE I BENEFICI MENO CODICE / MENO DESIGN
56. ARMONIA E CONSISTENZA PER TUTTI I DEVICE I BENEFICI MENO CODICE / MENO DESIGN COLLABORAZIONE PIÚ EFFICACE COI DESIGNER
57. ARMONIA E CONSISTENZA PER TUTTI I DEVICE I BENEFICI MENO CODICE / MENO DESIGN COLLABORAZIONE PIÚ EFFICACE COI DESIGNER
58. MENO ITERAZIONI DI DESIGN
59. UN LINGUAGGIO UNIVERSALE 16PX --size-l 4PX --size-xs
60. UN PLUGIN FIGMA
61. LATI
62. LATI
63. LATI CURVA DI APPRENDIMENTO
64. LATI UN LINGUAGGIO ASTRATTO CURVA DI APPRENDIMENTO
65. LATI UN LINGUAGGIO ASTRATTO CURVA DI APPRENDIMENTO NON RIMPIAZZA UN BRAVO DESIGNER
66. LATI UN LINGUAGGIO ASTRATTO CURVA DI APPRENDIMENTO NON RIMPIAZZA UN BRAVO DESIGNER NON ELIMINA DEL TUTTO LE MEDIA QUERIES
67. « Dell'utopia non è tanto importante il suo raggiungimento, ma ciò che spinge l'uomo alla realizzazione del suo sogno. » Bastard! - Kazushi Hagiwara