stop using bootstrap please! - davide di pumpo - codemotion milan 2016

top uin�oottrap PLZ!

Novemer 25th 2016

Wh� a� I?

David� D� Pump�Creative Technologit

Digital Architect at 

Co­organizer 

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?

ven display: table; i etter

erioul...

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�

VRY OOTTRAP WIT VR

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

Pleae ue  !THI

and  !read aout color

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!

Adopt a methodolog:

MITC

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?

C'h� rott� er *****“”@dertella

Inight� an� iliograph�

Article: You don't need oottrap

oottrap ankruptc

top emedding oottrap clae

oottrap an intervantion

OOC i an anti­pattern

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