[Sass] Bootstrap The-Right-Way

[gpedro]

"Boostrap vai além de um simples framework de css que você inclui no teu site. Você pode criar teu próprio css com os mixins dele, assim possibilitando uma melhor semântica do código, proporcionando sites muito mais leves e rápidos e definições na folha de estilo que você realmente usa. Não há necessidade usar o Bootstrap apenas para utilizar a grid e mais dois ou três componentes." - yo.

Ensinar como usar Bootstrap da maneira correta com somente o que você irá realmente utilizar e de uma forma mais semântica.
http://www.psd2html.com/experts/topic/how-to-create-a-bootstrap-grid-using-sass-mixins.html

Entenderam?

[hugooliveirad]

Algumas pessoas já falaram sobre o uncss, e como ele diminui o tamanho de css não utilizado no seu site. Vale a pena citá-lo também.

Essa é uma boa dica pra quem tem sites com Bootstrap.

Boa pauta!

[felipefialho]

@gpedro. Veja esse post que fiz faz alguns meses: http://www.felipefialho.com/blog/2014/utilizando-o-bootstrap-de-forma-consistente/

Seria isso?

[gpedro]

quase isso @lfeh, só que a coisa mais na prática.

[willianjusten]

Seria ensinando como criar componentes a partir dos mixins que o Bootstrap dá, certo?

[gpedro]

isso @willianjusten. basicamente isso.

[woliveiras]

Show de bola esse tópico! Eu tenho um post agendado para a semana que vem falando um pouco sobre Bootstrap com Less, mas com a abordagem que eu estou utilizando. Será muito bom aprender esse esquema de componentes!

[gpedro]

Exemplo:

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">mafagafos</div>
  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">ratatat</div>
  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">pikachu</div>
  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">dinossauro</div>
</div>

• css gigante do bootstrap que você não usa nem 1/4.

---

THE RIGHT WAY

.pets {
   @include make-row();

   .pet {
      @include make-xs-column(12);
      @include make-sm-column(12);
      @include make-md-column(6);
      @include make-lg-column(6);
   }
}

<div class="pets">
  <div class="pet">mafagafos</div>
  <div class="pet">ratatat</div>
  <div class="pet">pikachu</div>
  <div class="pet">dinossauro</div>
</div>

benefícios:

• performance: só tem coisa no css q vc tá usando
• html melhor estruturado
• pode trazer melhor acessibilidade.

[felipefialho]

@gpedro, eu faço dessa forma, hehe.

[gpedro]

@lfeh você é m1to, mas tem gente que não conhece que o TWBS tem mais potencial que imaginam. Ainda mais com esses mixins bolados!

[felipefialho]

Cara, já vi um blog brazuca abordando muito bem isso. To procurando aqui, mas não estou achando =(

[jpcmf]

@gpedro valeu pela dica! isso caiu como um luva para o projeto q estou fzendo usando twbs 👍

[gpedro]

@fricks

[felipefialho]

Pode crê, o @gpedro acabou dando uma aula na sugestão, haha.

Se eu achar o post, coloco aqui.

[gpedro]

@lfeh http://blog.rafamello.com/bootstrap-inteligente esse daqui né?

[felipefialho]

Tem eu no Disqus, é esse mesmo. :p

[jpcmf]

@lfeh Salvou o dia! 👯