stop using bootstrap please! - davide di pumpo - codemotion milan 2016
TRANSCRIPT
Wh� a� I?
David� D� Pump�Creative Technologit
Digital Architect at
Coorganizer
Makheth on: , ,
I like Cat, Drink, Comic and
Videogame...
Ojectwa
Milano Frontend
Twitter Githu Internet
Le�'� tar� Meaow!
Prologue
urve� �m�!!!
Do ou ue oottrap?
Do ou ue it ecaue it' imple?
Do ou ue it ecaue it' fat?
D� o� lik� uh�?
om� of o�, wil� hat� m�!
Wh� d� I d� tha�?
D� o� rememer th� uh�lid� fro� earlier?
Chapter 01
Ol� Wid� We
Or no� � ol�?
It wa onl 5 ear ago
There were nightmare out there!
Twitter lueprin� an� � o�
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
Chapter 02
M� an� th�oottrap
Lov�!
ut I had a lover
Mae two...
ut thi one ended all:
FLXOX
Wh not onl e friend?
And I tarted to quetion melf
Chapter 3
Javacrip�
oottrap' plugin don't fall ack particularl
gracefull when Javacript i dialed“”oottrap Documentation
eautiful enhancement? What?
veron� ue� Jav�crip� toda�!le ~1%
More than xplorer 9 or 10 TW...ource tatCounter
�Quer�?
Angular, Reac�, Vu�?
Wher�'� th� loa�?
Javacript Fallack
Avoid jQuer or ue inide j framework
Chapter 4
C
Heav�?We tart with 142.6KB or 20.8KB gzipped
Uele clae
.col-xs-1?
Wha� aou� Unc�?
ae� o� �oa�...
What aout vertical alignment? Hol Grail laout?
Ok, there i an alpha with �exox option...
ut it doen't have fallack...
And C Grid i getting cloe...
Medi� querie�
4 reakpoint�, ae� o�DVIC?
peci�cit�
.panel > .table-responsive:first-child > .table:first-child border-top-right-radius: 3px; }
Wher�'� th� loa�?
Override
Optimization
Cutomization
Chapter 5
HTML
Do ou have a prolem with that?
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">
oottrap documentation
eparatio� of concern�W3C
Do ou rememer: ?C Zen Garden
Wher�'� th� loa�?
Dif�cultie to reue code
Dif�cultie to temif / redeign
Deug with meaningle clae
peci�t nightmare !important
Chapter 6
Preproceor
Uing oottrap via a preproceor i a lot etter
.author-nameLast { @extend .col-md-4; }
or
.author-nameLast { @include make-md-column(4); }
u�...
@�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
@m�in� .author-nameLast { @include make-xs-column(12); @include make-sm-column(6); @include make-md-column(4); @include make-lg-column(3); }
// 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); } }
Wher�'� th� loa�?
Add a reak point
Too much DOM
Chapter 7
Deig�
o, eah, there' a reaon wh a lot of weite look
like thi. ecaue it work.“”
urger utton can HALV converion rate! ource
Wha� aou� carouel�?
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
Yeah, ut I can change ever ingle apect of
oottrap!
Ok, what aout uing omething le loated?
Wher�'� th� loa�?
Undertand what pattern don't work for ou
Tr to ecape oottrap pattern
Chapter 8
Acceiilit�
erioul, oottrap improved a lot in acceiilit, and alpha 4 i
a lot etter. ut...
Wher�'� th� loa�?
Make it acceile
Chapter 9
or how to avoid fale mth.
Remin� m� wh� I u�oottrap
I�'� fa�a� wh�?
Let' a it' fat for developer
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
I�'� � or� oftandar�
Yea�, lik� Fla�, tal�we�ite�, Geocitie�...
Yea�, � lo� of jo prop�al� hav�oottrap a� requiremen�
Do ou reall want to work to �x me oottrap
implementation?
I�'� � goo�tartin� poin�for intern�O�, com� o�...
I it a good idea to learn C without eeing that?
Mae ou want them to learn an OOC anti pattern?
Chapter 10
Alternative�
GO Modular!
Chooe a grid:
u�Nea�
uperG�G�
Do ou need component?
utton�T�ograph�
Re�ll�
Githu i� � wonder�� plac�
I�'� dangerou� t� g� alon�
onu track
Recap
Javacript Oh god no
C Nope
HTML Nope
Preproceor If ou have
Deign Quetionale
Acceiilit With plugin
TLDRPrototpe, internal tool/admin, uncle' weite Y!
Production weite NOP!
A la� reao� t�avoi�
oottrap?
Inight� an� iliograph�
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