Stop using Bootstrap please!
-
Upload
davide-di-pumpo -
Category
Design
-
view
178 -
download
1
Transcript of Stop using Bootstrap please!
![Page 2: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/2.jpg)
Wh� a� I?
![Page 3: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/3.jpg)
David� D� Pump�Creative Technologit
Digital Architect at
Coorganizer
Makheth on: , ,
I like Cat, Drink, Comic and
Videogame...
Ojectwa
Milano Frontend
Twitter Githu Internet
![Page 4: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/4.jpg)
Le�'� tar� Meaow!
![Page 5: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/5.jpg)
Prologue
urve� �m�!!!
![Page 6: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/6.jpg)
Do ou ue oottrap?
Do ou ue it ecaue it' imple?
Do ou ue it ecaue it' fat?
![Page 7: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/7.jpg)
D� o� lik� uh�?
![Page 8: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/8.jpg)
om� of o�, wil� hat� m�!
![Page 9: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/9.jpg)
Wh� d� I d� tha�?
![Page 10: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/10.jpg)
D� o� rememer th� uh�lid� fro� earlier?
![Page 11: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/11.jpg)
Chapter 01
Ol� Wid� We
![Page 12: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/12.jpg)
Or no� � ol�?
![Page 13: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/13.jpg)
It wa onl 5 ear ago
![Page 14: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/14.jpg)
There were nightmare out there!
![Page 15: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/15.jpg)
Twitter lueprin� an� � o�
![Page 16: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/16.jpg)
Doe� Twitter u� Twitter oottrap?
Internall, we ue 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 oottrap
![Page 17: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/17.jpg)
Chapter 02
M� an� th�oottrap
![Page 18: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/18.jpg)
Lov�!
![Page 19: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/19.jpg)
ut I had a lover
![Page 20: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/20.jpg)
Mae two...
![Page 21: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/21.jpg)
ut thi one ended all:
FLXOX
![Page 22: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/22.jpg)
Wh not onl e friend?
![Page 23: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/23.jpg)
And I tarted to quetion melf
![Page 24: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/24.jpg)
Chapter 3
Javacrip�
![Page 25: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/25.jpg)
oottrap' plugin don't fall ack particularl
gracefull when Javacript i dialed“”oottrap Documentation
![Page 26: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/26.jpg)
eautiful enhancement? What?
![Page 27: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/27.jpg)
veron� ue� Jav�crip� toda�!le ~1%
More than xplorer 9 or 10 TW...ource tatCounter
![Page 28: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/28.jpg)
�Quer�?
![Page 29: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/29.jpg)
Angular, Reac�, Vu�?
![Page 30: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/30.jpg)
Wher�'� th� loa�?
Javacript Fallack
Avoid jQuer or ue inide j framework
![Page 31: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/31.jpg)
Chapter 4
C
![Page 32: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/32.jpg)
Heav�?We tart with 142.6KB or 20.8KB gzipped
![Page 33: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/33.jpg)
Uele clae
.col-xs-1?
![Page 34: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/34.jpg)
Wha� aou� Unc�?
![Page 35: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/35.jpg)
ae� o� �oa�...
![Page 36: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/36.jpg)
What aout vertical alignment? Hol Grail laout?
![Page 38: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/38.jpg)
Ok, there i an alpha with �exox option...
ut it doen't have fallack...
And C Grid i getting cloe...
![Page 39: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/39.jpg)
![Page 40: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/40.jpg)
Medi� querie�
![Page 41: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/41.jpg)
4 reakpoint�, ae� o�DVIC?
![Page 42: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/42.jpg)
peci�cit�
.panel > .table-responsive:first-child > .table:first-child border-top-right-radius: 3px; }
![Page 43: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/43.jpg)
Wher�'� th� loa�?
Override
Optimization
Cutomization
![Page 44: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/44.jpg)
Chapter 5
HTML
![Page 45: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/45.jpg)
Do ou have a prolem with that?
![Page 46: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/46.jpg)
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">
oottrap documentation
![Page 47: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/47.jpg)
eparatio� of concern�W3C
Do ou rememer: ?C Zen Garden
![Page 48: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/48.jpg)
Wher�'� th� loa�?
Dif�cultie to reue code
Dif�cultie to temif / redeign
Deug with meaningle clae
peci�t nightmare !important
![Page 49: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/49.jpg)
Chapter 6
Preproceor
![Page 50: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/50.jpg)
Uing oottrap via a preproceor i a lot etter
![Page 51: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/51.jpg)
.author-nameLast { @extend .col-md-4; }
or
.author-nameLast { @include make-md-column(4); }
![Page 52: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/52.jpg)
u�...
![Page 53: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/53.jpg)
@�ten�
xtending i inviile. xtending doen’t necearil
help �le weight, contrar to the aing. xtending
doen’t work acro media querie. xtending i not
�exile. Mixin have aolutel no drawack.
“”Hugo Giraudel
![Page 54: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/54.jpg)
@m�in� .author-nameLast { @include make-xs-column(12); @include make-sm-column(6); @include make-md-column(4); @include make-lg-column(3); }
![Page 55: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/55.jpg)
// Pagination @mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { > 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); } }
![Page 56: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/56.jpg)
![Page 57: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/57.jpg)
Wher�'� th� loa�?
Add a reak point
Too much DOM
![Page 58: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/58.jpg)
Chapter 7
Deig�
![Page 60: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/60.jpg)
o, eah, there' a reaon wh a lot of weite look
like thi. ecaue it work.“”
![Page 61: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/61.jpg)
![Page 62: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/62.jpg)
urger utton can HALV converion rate! ource
![Page 63: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/63.jpg)
![Page 64: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/64.jpg)
![Page 65: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/65.jpg)
![Page 66: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/66.jpg)
![Page 67: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/67.jpg)
Wha� aou� carouel�?
![Page 68: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/68.jpg)
1% clicked a feature. Of thoe, 89% were in the �rt
poition. 1% of click for the mot igni�cant oject on
the home page?
“”ource
![Page 69: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/69.jpg)
Yeah, ut I can change ever ingle apect of
oottrap!
![Page 70: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/70.jpg)
Ok, what aout uing omething le loated?
![Page 71: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/71.jpg)
Wher�'� th� loa�?
Undertand what pattern don't work for ou
Tr to ecape oottrap pattern
![Page 72: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/72.jpg)
Chapter 8
Acceiilit�
![Page 73: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/73.jpg)
![Page 74: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/74.jpg)
erioul, oottrap improved a lot in acceiilit, and alpha 4 i
a lot etter. ut...
![Page 77: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/77.jpg)
Wher�'� th� loa�?
Make it acceile
![Page 78: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/78.jpg)
Chapter 9
or how to avoid fale mth.
Remin� m� wh� I u�oottrap
![Page 79: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/79.jpg)
I�'� fa�a� wh�?
Let' a it' fat for developer
![Page 80: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/80.jpg)
Technica� de�"a concept in programming that re�ect the extra
development work that arie when code that i
ea to implement in the hort run i ued intead
of appling the et overall olution"
Wikipedia
![Page 81: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/81.jpg)
I�'� � or� oftandar�
Yea�, lik� Fla�, tal�we�ite�, Geocitie�...
![Page 82: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/82.jpg)
Yea�, � lo� of jo prop�al� hav�oottrap a� requiremen�
Do ou reall want to work to �x me oottrap
implementation?
![Page 83: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/83.jpg)
I�'� � goo�tartin� poin�for intern�O�, com� o�...
![Page 84: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/84.jpg)
I it a good idea to learn C without eeing that?
Mae ou want them to learn an OOC anti pattern?
![Page 85: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/85.jpg)
Chapter 10
Alternative�
![Page 86: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/86.jpg)
GO Modular!
![Page 88: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/88.jpg)
Chooe a grid:
u�Nea�
uperG�G�
![Page 89: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/89.jpg)
Do ou need component?
utton�T�ograph�
Re�ll�
![Page 90: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/90.jpg)
Githu i� � wonder�� plac�
![Page 91: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/91.jpg)
I�'� dangerou� t� g� alon�
![Page 92: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/92.jpg)
onu track
Recap
![Page 93: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/93.jpg)
Javacript Oh god no
C Nope
HTML Nope
Preproceor If ou have
Deign Quetionale
Acceiilit With plugin
![Page 94: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/94.jpg)
TLDRPrototpe, internal tool/admin, uncle' weite Y!
Production weite NOP!
![Page 95: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/95.jpg)
A la� reao� t�avoi�
oottrap?
![Page 97: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/97.jpg)
![Page 98: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/98.jpg)
Inight� an� iliograph�
![Page 99: Stop using Bootstrap please!](https://reader034.fdocuments.in/reader034/viewer/2022042723/5871aad71a28abda6a8b56f5/html5/thumbnails/99.jpg)
Article: You don't need oottrap
oottrap ankruptc
top emedding oottrap clae
oottrap an intervantion
OOC i an antipattern
Wh we don't ue oottrap
oottrap ou're doing it wrong
Wh don’t ou ue oottrap?
The hamurger menu doen't work
hould I ue a carouel?
oottrap acceiilit iue