Stop using Bootstrap please!

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Wh a I?

Slide 3

Slide 3 text

David D Pump Creative Technologit Digital Architect at Coorganizer Makheth on: , , I like Cat, Drink, Comic and Videogame... Ojectwa Milano Frontend Twitter Githu Internet

Slide 4

Slide 4 text

Le ' tar Meaow!

Slide 5

Slide 5 text

Prologue urve m !!!

Slide 6

Slide 6 text

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?

Slide 7

Slide 7 text

D o lik uh ?

Slide 8

Slide 8 text

om of o , wil hat m !

Slide 9

Slide 9 text

Wh d I d tha ?

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Chapter 01 Ol Wid We

Slide 12

Slide 12 text

Or no  ol ?

Slide 13

Slide 13 text

It wa onl 5 ear ago

Slide 14

Slide 14 text

There were nightmare out there!

Slide 15

Slide 15 text

Twitter lueprin an  o

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Chapter 02 M an th oottrap

Slide 18

Slide 18 text

Lov !

Slide 19

Slide 19 text

ut I had a lover

Slide 20

Slide 20 text

Mae two...

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Wh not onl e friend?

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Chapter 3 Javacrip

Slide 25

Slide 25 text

oottrap' plugin don't fall ack particularl gracefull when Javacript i dialed “ ” oottrap Documentation

Slide 26

Slide 26 text

eautiful enhancement? What?

Slide 27

Slide 27 text

veron ue Jav crip toda ! le ~1% More than xplorer 9 or 10 TW... ource tatCounter

Slide 28

Slide 28 text

Quer ?

Slide 29

Slide 29 text

Angular, Reac , Vu ?

Slide 30

Slide 30 text

Wher ' th loa ? Javacript Fallack Avoid jQuer or ue inide j framework

Slide 31

Slide 31 text

Chapter 4 C

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Wha aou Unc ?

Slide 35

Slide 35 text

ae o oa ...

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Ok, there i an alpha with exox option... ut it doen't have fallack... And C Grid i getting cloe...

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Medi querie

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Wher ' th loa ? Override Optimization Cutomization

Slide 44

Slide 44 text

Chapter 5 HTML

Slide 45

Slide 45 text

Do ou have a prolem with that?

Slide 46

Slide 46 text

oottrap documentation

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Chapter 6 Preproceor

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

u ...

Slide 53

Slide 53 text

@ 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

Slide 54

Slide 54 text

@m in .author-nameLast { @include make-xs-column(12); @include make-sm-column(6); @include make-md-column(4); @include make-lg-column(3); }

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Wher ' th loa ? Add a reak point Too much DOM

Slide 58

Slide 58 text

Chapter 7 Deig

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

o, eah, there' a reaon wh a lot of weite look like thi. ecaue it work. “ ”

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

Wha aou carouel ?

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

Yeah, ut I can change ever ingle apect of oottrap!

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

Wher ' th loa ? Undertand what pattern don't work for ou Tr to ecape oottrap pattern

Slide 72

Slide 72 text

Chapter 8 Acceiilit

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

Pleae ue ! THI

Slide 76

Slide 76 text

and ! read aout color

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

Chapter 9 or how to avoid fale mth. Remin m wh I u oottrap

Slide 79

Slide 79 text

I ' fa a wh ? Let' a it' fat for developer

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

I ' or of tandar Yea , lik Fla , tal we ite , Geocitie ...

Slide 82

Slide 82 text

Yea , lo of jo prop al hav oottrap a requiremen Do ou reall want to work to x me oottrap implementation?

Slide 83

Slide 83 text

I ' goo tartin poin for intern O , com o ...

Slide 84

Slide 84 text

I it a good idea to learn C without eeing that? Mae ou want them to learn an OOC anti pattern?

Slide 85

Slide 85 text

Chapter 10 Alternative

Slide 86

Slide 86 text

GO Modular!

Slide 87

Slide 87 text

Adopt a methodolog: M ITC

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

Githu i wonder plac

Slide 91

Slide 91 text

I ' dangerou t g alon

Slide 92

Slide 92 text

onu track Recap

Slide 93

Slide 93 text

Javacript Oh god no C Nope HTML Nope Preproceor If ou have Deign Quetionale Acceiilit With plugin

Slide 94

Slide 94 text

TLDR Prototpe, internal tool/admin, uncle' weite Y! Production weite NOP!

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

Inight an iliograph

Slide 99

Slide 99 text

Article: You don't need oottrap oottrap ankruptc top emedding oottrap clae oottrap an intervantion OOC i an antipattern 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