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.

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...

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);
}
}

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.“
”

62. urger utton can HALV converion rate! ource

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

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

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