Styleguiding is not a crime

Eaf6bcd3b320c1167f2522470d0e3e26?s=47 decarola
September 25, 2018

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.

Eaf6bcd3b320c1167f2522470d0e3e26?s=128

decarola

September 25, 2018
Tweet

Transcript

  1. OFF – Bologna – 25 settembre 2018

  2. None
  3. None
  4. None
  5. None
  6. @decarola ciao@decaro.la

  7. Perché siamo qui?

  8. Style guide tipo Pattern lab?

  9. Style guide tipo GEL?

  10. Style guide tipo Fractal?

  11. Style guide tipo Bootstrap?

  12. Style guide tipo Storybook?

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

  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. http://styleguides.io/

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

    ambizione di completezza
  23. Freestyle Classic & old school

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

  25. Manazza

  26. None
  27. None
  28. None
  29. None
  30. None
  31. Front end =======================
 Back end

  32. Pattern primer • Esempio di style guide di (santo) Jeremy

    • https://github.com/adactio/Pattern-Primer
  33. None
  34. None
  35. Style tiles • Mood board • Agli inizi del RWD

    • http://styletil.es • By Samantha Warren
  36. None
  37. None
  38. None
  39. None
  40. None
  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.
  42. Street skating Modern & aggressive

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

  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. Tips & tricks http://fractal.clearleft.com/components/detail/banner--notice.html

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

  54. None
  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 #
  56. Sviluppatore B/E • (+) Ha degli esempi chiari su come

    funzionano i vari componenti. • (-) Si sente in soggezione se deve modificare qualcosa
  57. _shame.scss

  58. Designer • (+) Ha l’inventario dei componenti a disposizione. Più

    sensibile alle dinamiche di sviluppo. • (-) Mani legate.
  59. /* Eccezion fatta per */

  60. Quindi • Rotto il ghiaccio con il terminale, è tutto

    in discesa. • Organizzare bene gli stili è possibile (es. ITCSS). • Devs Designers
  61. MEGARAMP Extreme & PRO only

  62. None
  63. None
  64. None
  65. https://www.youtube.com/watch?v=1Q3PNj3tRW4

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

  67. None
  68. Storybook • Pattern library interattiva • React or Vue or

    Angular • https://storybook.js.org
  69. Styleguidist • Pattern library interattiva • Creato partendo da React

    Styleguidist • https://github.com/vue-styleguidist/vue- styleguidist
  70. None
  71. None
  72. cinemainpiazza.info

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

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

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