Styleguiding is not a crime

Il talk tappabuchi con flip e slide. Volo pindarico tra style guide di ieri e di oggi, con riferimenti tanto a Brad Frost quanto a Rodney Mullen.

Off, Bologna front end, 25 settembre 2018.

Transcript

1. OFF – Bologna – 25 settembre 2018
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. @decarola
   ciao@decaro.la
   

   View Slide

7. Perché siamo qui?
   

   View Slide

8. Style guide tipo Pattern lab?
   

   View Slide

9. Style guide tipo GEL?
   

   View Slide

10. Style guide tipo Fractal?
    

    View Slide

11. Style guide tipo Bootstrap?
    

    View Slide

12. Style guide tipo Storybook?
    

    View Slide

13. https://standardsmanual.com/products/nasa-graphics-standards-manual
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. http://styleguides.io/
    

    View Slide

22. • Nessun favoritismo
    • Nessun ordine di importanza
    • Nessuna ambizione di completezza
    

    View Slide

23. Freestyle
    Classic & old school
    

    View Slide

24. https://www.youtube.com/watch?v=WUjjH2v5Pto
    

    View Slide

25. Manazza
    

    View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. Front end
    =======================

    Back end
    

    View Slide

32. Pattern primer
    • Esempio di style guide di (santo) Jeremy
    • https://github.com/adactio/Pattern-Primer
    

    View Slide

33. View Slide

34. View Slide

35. Style tiles
    • Mood board
    • Agli inizi del RWD
    • http://styletil.es
    • By Samantha Warren
    

    View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. In conclusione.
    • Vocabolario prima di tutto.
    • Separa front end da back end (e volendo i componenti dallo stile).
    • Anche fatta a manazza, è comunque meglio di niente.
    

    View Slide

42. Street skating
    Modern & aggressive
    

    View Slide

43. https://www.youtube.com/watch?v=dZIL61ru6YM
    

    View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. Tips & tricks
    http://fractal.clearleft.com/components/detail/banner--notice.html
    

    View Slide

52. View Slide

53. https://www.dropbox.com/s/5mgv7qxdea1fgkw/Studio%20Poster%20ITCSS%203.pdf?dl=0
    

    View Slide

54. View Slide

55. Pro e Contro
    • Pulite, ordinate, manutenibili.
    • Aiutano a quantificare il lavoro.
    • Diventano uno strumento per
    sviluppatori E designer.
    • Linea di comando richiesta.
    
    • Manutenzione inevitabile.
    
    • x = numero di componenti

    y = bravura del designer

    z = stabilità del rapporto

    

    y = x/z #
    

    View Slide

56. Sviluppatore B/E
    • (+) Ha degli esempi chiari su come
    funzionano i vari componenti.
    • (-) Si sente in soggezione se deve modificare
    qualcosa
    

    View Slide

57. _shame.scss
    

    View Slide

58. Designer
    • (+) Ha l’inventario dei componenti a
    disposizione. Più sensibile alle dinamiche di
    sviluppo.
    • (-) Mani legate.
    

    View Slide

59. /* Eccezion fatta per */
    

    View Slide

60. Quindi
    • Rotto il ghiaccio con il terminale, è tutto in discesa.
    • Organizzare bene gli stili è possibile (es. ITCSS).
    • Devs Designers
    

    View Slide

61. MEGARAMP
    Extreme & PRO only
    

    View Slide

62. View Slide

63. View Slide

64. View Slide

65. https://www.youtube.com/watch?v=1Q3PNj3tRW4
    

    View Slide

66. https://www.youtube.com/watch?v=1fmfsZ3Ye-g
    

    View Slide

67. View Slide

68. Storybook
    • Pattern library interattiva
    • React or Vue or Angular
    • https://storybook.js.org
    

    View Slide

69. Styleguidist
    • Pattern library interattiva
    • Creato partendo da React Styleguidist
    • https://github.com/vue-styleguidist/vue-
    styleguidist
    

    View Slide

70. View Slide

71. View Slide

72. cinemainpiazza.info
    

    View Slide

73. –John F. Kennedy
    “Every accomplishment starts with the decision to try”.
    

    View Slide

74. –Anonimo skater
    “Skate before is too late”.
    

    View Slide

75. View Slide

76. Grazie!
    @decarola
    ciao@decaro.la
    Domande & chiacchiere
    

    View Slide