Bootstrap - Amor e ódio

BOOTSTRAP - AMOR EÓDIO

0

OIHanneli (H mudo)Codeminer 42 - HIRING!Café, Pokémon, Lego, bichos, ciência

O QUE NÃO VAMOS VER AQUI

O QUE VAMOS VER AQUIPor que se fala tanto em BootstrapCoisas legais no BootstrapCoisas não tão legais no BootstrapNeat e outras alternativasGIFs e imagens legais <3

POR QUE AMOR E ÓDIO?

DEVS DE BACKEND

"Dev de backend é aquele cara que vai fazer umapágina muito feia, mas cujo servidor permanece

em pé quase sempre."

FRONT, Desenvolvedor, 2014

Ê LINDEZA

"QUE LINDO, GENTE, DESSA VEZ NÃO DEIXEI OFUNDO BRANCO!"

"Se você não fizer algo decente, vou droppar seu banco"

Vem então o Bootstrap!

"QUE LINDO!!!111!111!"

Fonte: http://www.sitepoint.com/11-reasons-to-use-twitter-bootstrap/

#1 - É MUITO RÁPIDO FAZER O LAYOUTPADRÃO

#2 - LESS E MUITO JAVASCRIPT DE BRINDE

#3 - RESPONSIVO

#4 - DOCUMENTAÇÃO BEM ESTRUTURADA EINTUITIVA

VOU USAR ISSO <3

EEEEEEEEEEPPPAAAAAAAAAAAACCCCCCALLLLLLLMMMAAAAAAAAAAAIIIIIIIIIIII COM ESSE

BOOTSTRAP!!!!!!!!!111111111!!!!!!

Vai rolar um fight...

Sabe onde eu vou enfiar esse seu Bootstrap?

CALMA MIIKA S2

PROBLEMAS DOBOOTSTRAP

#1 - A SEPARAÇÃO ENTRE CONTEÚDO EAPRESENTAÇÃO NÃO É MUITO BOA

#1 - A SEPARAÇÃO ENTRE CONTEÚDO E APRESENTAÇÃO NÃOÉ MUITO BOA

<div class="row"> <div id="article" class="span8">...</div> <div id="aside" class="span4">...</div> </div>

/* LESS */ article { .column(8); } aside { .column(4); }

#2 - MUITOS NOMES DE CLASSES POUCOINTUITIVOS

#2 - MUITOS NOMES (POUCO INTUITIVOS) DE CLASSES

#3 - REDESIGN É CUSTOSO

#3 - REDESIGN É CUSTOSO

ORIGINAL

COM ALGUNS DETALHES ALTERADOS

#3 - REDESIGN É CUSTOSO

.pagination ul {

border-radius: 0px;

box-shadow: none;

}

.pagination ul > li > a,

.pagination ul > li > span {

padding: 8px 16px;

line-height: 1em;

text-decoration: underline;

background-color: none;

border-top: none;

border-bottom: none;

}

.pagination ul > li > a:hover,

.pagination ul > .active > a,

.pagination ul > .active > span {

background-color: transparent;

color: black;

}

.pagination ul > li:first-child > a,

.pagination ul > li:first-child > span {

border-top-left-radius: 0;

border-bottom-left-radius: 0;

}

.pagination ul > li:last-child > a,

.pagination ul > li:last-child > span {

border-top-right-radius: 0;

border-bottom-right-radius: 0;

}

SÓisso

#4 - PROBLEMAS SEMÂNTICOS

#4 - PROBLEMAS SEMÂNTICOS <i class="icon-search"></i>

#4 - PROBLEMAS SEMÂNTICOSWTF O QUE i tem a ver com icon??????

#5 - MUITOS SITES TERÃO A MESMAIDENTIDADE VISUAL QUE O SEU

E AGORA? O QUE POSSO UTILIZAR?

MOTIVOS PARA UTILIZAR O BOURBON/NEAT

(MEUS GIFS BONS ESTÃO ACABANDO)

#1 - COMPASS TYPE MIXINS

#2 - MUITO MAIS SEMÂNTICO - VOCÊDETERMINA OS NOMES

aside { @include span-columns(3); } section { @include span-columns(6); }

Livre de rows e cols!

#3 - DOCUMENTAÇÃO MUITO BOA

NEM TUDO É PERFEITO

MOTIVOS PELOS QUAIS VOCÊ PODE NÃOCURTIR O BOURBON / NEAT

#1 - É PRECISO CONHECER MAIS SOBRE CSS

#2 - ESCREVE-SE MAIS CÓDIGO

#3 - É PRECISO TER CAUTELA COM OSMIXINS.

AINDA HÁ MAIS OPÇÕES - FOUNDATION

CONCLUSÕESNem tudo é perfeito

Escolha o caso mais adequado para você

CONCLUSÕESSei que ninguém perguntou, mas minha opinião é

CONCLUSÕESUsar o que form melhor para você. Considero semântica muito

importante então tendo a priorizá-la.

OBRIGADA!! PERGUNTAS?@hannelita - hannelita@gmail.com

REFERÊNCIAShttp://www.zingdesign.com/5-reasons-not-to-use-twitter-bootstrap/http://halanstevens.com/blog/bootstrap-youre-doing-it-wrong/http://fourword.fourkitchens.com/article/you-dont-need-bootstraphttp://blog.teamtreehouse.com/use-bootstrap-or-foundationhttps://www.liquidlight.co.uk/blog/article/twitter-bootstrap-3-the-good-the-bad-the-ugly/http://lucisferre.net/2013/06/14/bootstrap-foundation-bourbon-neat/