Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Stop using Bootstrap please!

Cb5004db588b465e64062b4b914f7db7?s=47 Davide Di Pumpo
November 26, 2016

Stop using Bootstrap please!

Bootstrap è di sicuro diventato uno dei Framework front-end che tutti conoscono ed hanno utilizzato almeno una volta. Per alcuni Front-end developer è diventato uno standard de facto. Ma è davvero tutto oro quello che luccica? La sua velocità di utilizzo è in realtà assimilabile ad un prestito. Hai chiavi in mano, ma sai quanto andrai a pagare nel tempo? Durante questo talk vedremo quali sono le insidie che si nascondono dietro questo (e similari) framework e come sostituirlo grazie a tecnologie e metodologie moderne.

Cb5004db588b465e64062b4b914f7db7?s=128

Davide Di Pumpo

November 26, 2016
Tweet

Transcript

  1. top uin oottrap PLZ! Novemer 25th 2016

  2. Wh a I?

  3. David D Pump Creative Technologit Digital Architect at Co­organizer Makheth

    on: , , I like Cat, Drink, Comic and Videogame... Ojectwa Milano Frontend Twitter Githu Internet
  4. Le ' tar Meaow!

  5. Prologue urve m !!!

  6. Do ou ue oottrap? Do ou ue it ecaue it'

    imple? Do ou ue it ecaue it' fat?
  7. D o lik uh ?

  8. om of o , wil hat m !

  9. Wh d I d tha ?

  10. D o rememer th uh lid fro earlier?

  11. Chapter 01 Ol Wid We

  12. Or no  ol ?

  13. It wa onl 5 ear ago

  14. There were nightmare out there!

  15. Twitter lueprin an  o

  16. Doe Twitter u Twitter oottrap? Internall, we ue it in

    a lot of application. On Twitter.com, ou can nd it and piece in our dropdown menu, form, and utton. “ ” Mark Otto, creator of oottrap
  17. Chapter 02 M an th oottrap

  18. Lov !

  19. ut I had a lover

  20. Mae two...

  21. ut thi one ended all: FLXOX

  22. Wh not onl e friend?

  23. And I tarted to quetion melf

  24. Chapter 3 Javacrip

  25. oottrap' plugin don't fall ack particularl gracefull when Javacript i

    dialed “ ” oottrap Documentation
  26. eautiful enhancement? What?

  27. veron ue Jav crip toda ! le ~1% More than

    xplorer 9 or 10 TW... ource tatCounter
  28. Quer ?

  29. Angular, Reac , Vu ?

  30. Wher ' th loa ? Javacript Fallack Avoid jQuer or

    ue inide j framework
  31. Chapter 4 C

  32. Heav ? We tart with 142.6KB or 20.8KB gzipped

  33. Uele clae .col-xs-1?

  34. Wha aou Unc ?

  35. ae o oa ...

  36. What aout vertical alignment? Hol Grail laout?

  37. ven display: table; i etter erioul...

  38. Ok, there i an alpha with exox option... ut it

    doen't have fallack... And C Grid i getting cloe...
  39. None
  40. Medi querie

  41. 4 reakpoint , ae o DVIC?

  42. peci cit .panel > .table-responsive:first-child > .table:first- border-top-right-radius: 3px; }

  43. Wher ' th loa ? Override Optimization Cutomization

  44. Chapter 5 HTML

  45. Do ou have a prolem with that?

  46. <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0"> oottrap documentation

  47. eparatio of concern W3C Do ou rememer: ? C Zen

    Garden
  48. Wher ' th loa ? Dif cultie to reue code

    Dif cultie to temif / redeign Deug with meaningle clae peci t nightmare !important
  49. Chapter 6 Preproceor

  50. Uing oottrap via a preproceor i a lot etter

  51. .author-nameLast { @extend .col-md-4; } or .author-nameLast { @include make-md-column(4);

    }
  52. u ...

  53. @ ten xtending i inviile. xtending doen’t necearil help le

    weight, contrar to the aing. xtending doen’t work acro media querie. xtending i not exile. Mixin have aolutel no drawack. “ ” Hugo Giraudel
  54. @m in .author-nameLast { @include make-xs-column(12); @include make-sm-column(6); @include make-md-column(4);

    @include make-lg-column(3); }
  55. // Pagination @mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, > li { >

    a, > span { padding: $padding-vertical $padding-horizontal; font-size: $font-size; line-height: $line-height; } &:first-child { > a, > span { @include border-left-radius($border-radius); } }
  56. None
  57. Wher ' th loa ? Add a reak point Too

    much DOM
  58. Chapter 7 Deig

  59. VRY OOTTRAP WIT VR

  60. o, eah, there' a reaon wh a lot of weite

    look like thi. ecaue it work. “ ”
  61. None
  62. urger utton can HALV converion rate! ource

  63. None
  64. None
  65. None
  66. None
  67. Wha aou carouel ?

  68. 1% clicked a feature. Of thoe, 89% were in the

    rt poition. 1% of click for the mot igni cant oject on the home page? “ ” ource
  69. Yeah, ut I can change ever ingle apect of oottrap!

  70. Ok, what aout uing omething le loated?

  71. Wher ' th loa ? Undertand what pattern don't work

    for ou Tr to ecape oottrap pattern
  72. Chapter 8 Acceiilit

  73. None
  74. erioul, oottrap improved a lot in acceiilit, and alpha 4

    i a lot etter. ut...
  75. Pleae ue ! THI

  76. and ! read aout color

  77. Wher ' th loa ? Make it acceile

  78. Chapter 9 or how to avoid fale mth. Remin m

    wh I u oottrap
  79. I ' fa a wh ? Let' a it' fat

    for developer
  80. Technica de "a concept in programming that re ect the

    extra development work that arie when code that i ea to implement in the hort run i ued intead of appling the et overall olution" Wikipedia
  81. I ' or of tandar Yea , lik Fla ,

    tal we ite , Geocitie ...
  82. Yea , lo of jo prop al hav oottrap a

    requiremen Do ou reall want to work to x me oottrap implementation?
  83. I ' goo tartin poin for intern O , com

    o ...
  84. I it a good idea to learn C without eeing

    that? Mae ou want them to learn an OOC anti pattern?
  85. Chapter 10 Alternative

  86. GO Modular!

  87. Adopt a methodolog: M ITC

  88. Chooe a grid: u Nea uperG G

  89. Do ou need component? utton T ograph Re ll

  90. Githu i wonder plac

  91. I ' dangerou t g alon

  92. onu track Recap

  93. Javacript Oh god no C Nope HTML Nope Preproceor If

    ou have Deign Quetionale Acceiilit With plugin
  94. TLDR Prototpe, internal tool/admin, uncle' weite Y! Production weite NOP!

  95. A la reao t avoi oottrap?

  96. C'h rott er ***** “ ” @dertella

  97. None
  98. Inight an iliograph

  99. Article: You don't need oottrap oottrap ankruptc top emedding oottrap

    clae oottrap an intervantion OOC i an anti­pattern Wh we don't ue oottrap oottrap ou're doing it wrong Wh don’t ou ue oottrap? The hamurger menu doen't work hould I ue a carouel? oottrap acceiilit iue