Twitter Bootstrap

Em agosto de 2011 o Twitter, mas especificamente Mark Otto, anunciou (ver [3]) o lançamento do Twitter Bootstrap no github como um software livre (licença Apache). Mas o que é o Twitter Bootstrap? nas palavras do Otto é “uma ferramenta de front-end para desenvolver aplicações web rapidamente. Ele é uma coleção de convenções CSS e HTML”.

O Twitter Bootstrap nasceu nos primórdios do twitter, como uma forma de padronizar as ferramentas de front-end utilizadas no microblog. Até então os engenheiros utilizam as bibliotecas e ferramentas que estavam mais acostumados, contudo isso causava inconsistências e problemas com a escalabilidade e manuntenabilidade do site.

Seu core é somente CSS, contudo ele é construído utilizando o pré-processador less para ganhar mais poder e flexibilidade. De acordo com Mark Otto, temos dois importante benefícios: Primeiro Bootstrap é muito simples de usar, basta coloca-lo em seu código e usar. Segundo, depois de compilado, bootstrap contem nada mais que CSS, não sendo necessário imagens adicionais, flash ou javascripts.

Resolvi escreve este pequeno tutorial introdutório pois vi que não há qualquer referência em português ao mesmo.

Significado da palavra Bootstrap?

De acordo com o dicionário Oxford Online (ver [4]), bootstrap é um laço na parte de trás de uma bota que serve para auxiliar a calça-la, também poder ser utilizado como um adjetivo no sentido de quando uma pessoa pode resolver seus problemas sem ajuda externa. Segundo Bejamin Zimmer (ver [5]) a origem deste uso estaria nas lendas do Barão von Müncchausen, na lenda alemã o protagonista tirava-se de um pantâno puxando seus cabelos, mas na versão Americana o Barão se tirou pelo bootstrap.

Percebemos que o uso da palavra pelos criadores pode ter um duplo sentido, ele poderá ser entendido como um auxiliar para calçar a bota, ou como uma ferramenta que ajuda seu projeto a resolver seus problemas sozinho.

O Twitter Bootstrap é uma ferramenta para facilitar o desenvolvimento de layout sofisticados para Web Sites, ele é construído com o pré-processador Less, o que facilita e muito sua customização.

E o que é Less?

É uma biblioteca JavaScript que estende os poderes do CSS, foi desenvolvida por Alexis Sellier(ver [6]), atualmente (abril/2012), está em sua versão 1.3.0. Vejamos um pouco o que ela disponibiliza (todos os exemplos baseados no site [6]):

Variáveis

Com less é possível criarmos variáveis para o CSS, por exemplo:

Em Less
Resultado
01@cor: #87DF25;
02#header {
03  color: @cor;
04}
05h2 {
06  color: @cor
07}
01#header{ 
02  color: #87DF25 
03}
04h2{
05  color: #87DF25 
06}

Mixins

têm um comportamento parecido com o das funções, aceitando inclusive argumentos, permite que você embuta várias propriedades em outra classe, simplesmente incluído seu nome, por exemplo:

Em Less
Resultado
01.rounded-corners (@radius: 5px) {
02   border-radius: @radius;
03   -webkit-border-radius: @radius;
04   -moz-border-radius: @radius;
05}
06
07#header {
08   .rounded-corners;
09}
10#footer {
11   .rounded-corners(10px);
12}
01#header {
02  border-radius: 5px;
03  -webkit-border-radius: 5px;
04  -moz-border-radius: 5px;
05}
06#footer {
07  border-radius: 10px;
08  -webkit-border-radius: 10px;
09  -moz-border-radius: 10px;
10}

Regras identadas

Esqueça seletores CSS enormes e confusos, com less você simplesmente pode colocar um seletor dentro do outro, bem mais simples:

Em Less
Resultado
01#header {
02  h1 {
03    font-size: 26px;
04    font-weight: bold;
05  }
06  p { font-size: 12px;
07    a { text-decoration: none;
08      &:hover { border-width: 1px }
09    }
10  }
11}
01#header h1 {
02  font-size: 26px;
03  font-weight: bold;
04}
05#header p {
06  font-size: 12px;
07}
08#header p a {
09  text-decoration: none;
10}
11#header p a:hover {
12  border-width: 1px;
13}

Mais sobre less

Há várias coisas a mais para aprender sobre less veja [7] para mais informações.

Utilização do lado do cliente

Use o less como usaria arquivos CSS, só lembre de colocar o rel setado como “stylesheet/less“. Coloque o arquivo com o script less no topo de seu <head>, então você terá algo como isso:

01<head>
02<script src="/caminho/less.js" type="text/javascript"></script>
03<link rel="stylesheet/less" type="text/css" href="/caminho/styles.less">

Lembre-se sempre coloque o script antes das declarações dos arquivos .less

Utilizando o less no servidor

Também é possível utilizar o node para que o less compile um aquivo .less e gere um .css, primeiro instale o nodejs em seu sistema, para sistemas baseados em Debian a seguinte linha deve funcionar:

01abruno.com $ sudo apt-get install nodejs npm

agora basta instalar o less com o npm, assim:

01abruno.com $ npm install less

e finalmente instale o compilador do less, assim:

01abruno.com $ sudo apt-get install lessc

Agora você já poderá testar usar os arquivos .less para gerarem arquivos .css, vamos utilizar o seguinte arquivo como exemplo:

01@size: 4;
02.class{
03	width: 4 *2;
04}

salve-o com o nome de style.less, na linha de comando podemos compila-lo assim:

01abruno.com $ lessc style.less
  .class {
    width: 8;
  }

E para criarmos arquivos .css do arquivo .less, basta fazer lessc style.less > style.css

Mas por quê aprender sobre Less

O Bootstrap pode ser configurado, por alguns parâmetros, que você de alterar direto nos arquivos .less (veja a lista deles em [8]. As personalizações são feitas com variáveis e mixins do less, você deve ser capaz de fazer isso com o explicado aí acima.

Características do Twitter Bootstrap

A página do twitter bootstrap [1], traz algumas de suas características, apresento aqui as que acho que merecem maior destaque:

  • Feito para e por nerds: o pessoal do Twitter adora fazer produtos incríveis para a web, e resolveram nos ajudar com isso, aproveitemos então.
  • Grids de 12 colunas: grids não são unanimidade, mas oferecem muita flexibilidade para você criar seu desgin
  • Biblioteca madura: apesar de pequena no tamanho, a Bootstrap é uma das mais completas ferramentas utilizadas no front-end web.
  • Para todos os níveis de conhecimento: Bootstrap ajudará desde o programador iniciante em desenvolvimento web, até profissionais de design veteranos no ofício.
  • Responsive Design: Bootstrap 2 adapta-se perfeitamente a qualquer dispositivo que esteja visualizando sua página, seja desktop, notebook, tablet ou celular.
  • Plugins JQuery: Bootstrap pode ser utilizado com vários plugins JQueru, que ajudarão ainda mais você na criação de sua página.
  • Desenvolvimento: Bootstrap é OpenSource, utiliza os inovadores HTML5 e CCS3, less e foi feito pelo Twitter, uma das empresas mais inovadores da web atualmente.

Usando o Twitter Bootstrap

A utilização do Bootstrap é automática, quando você o referência ele já está agindo sobre sua página, em teoria você pode ter uma página contendo apenas o Bootstrap como CSS, mas isso não é recomendável, lembre-se que o bootstrap é uma ferramenta, portanto é para auxiliar, mas nunca vai substituir o CSS de layout do seu site, assim como o carro te permite andar bem mais rápido, mas nunca vai substituir suas pernas.

Instalando o Bootstrap

O Bootstrap pode ser “instalado” de três formas, duas delas consiste em baixar o arquivo .css do bootstrap, a outra forma é baixar os arquivos .less. Ou seja, você pode usar o bootstrap como um CSS normal, ou como um arquivo less, da forma como expliquei acima, faça seus testes e escolha a melhor forma possível.

A forma mais simples de “instalação” é acessando a página de customização do Bootstrap ([9]), e escolher quais componentes você quer utilizar, ao final clicar no botão de download e você tem seu arquivo CSS personalizado. Outra forma é na página home do bootstrap ([1]) baixando-se seu arquivo. Neste dois casos o bootstrap deverá estar no CSS dentro do arquivo que você baixou.

A última forma é baixar o bootstrap do projeto no github ([2]), lá dentro do diretorio less você terá os arquivos para configurar conforme sua preferência e usar na sua página.

Obviamente utilizei “instalado” entre aspas porque o bootstrap não é um software, e teoricamente não precisa de instalação.

Funcionamento do Bootstrap

Bom, você se convenceu que o “trem é bão sô!”, instalou o “troço”, mas e ai como é que vai funcionar isso mesmo? Bom, vamos começar pelo início, o que chamamos em Inglês de scaffolding (a tradução correta seria a estrutura de andaimes de um prédio em construção, por isso estou utilizando o termo em Inglês mesmo). O Bootstrap lhe fornece algumas estruturas básicas para seu trabalha, vejamos algumas delas:

Sistema de Grids

O layout no Bootstrap é baseado no sistema de grids. Este sistema é bem simples, mas muito poderoso. Imagine que sua página é constituída de 12 caixas (tag: span) de largura, e imagine que estas caixas ficam separadas em estantes (tag: containers) e prateleiras (row), este é o básico do sistema de grid do bootstrap. É mais ou menos como abaixo (utilizarei imagens e não exemplos funcionais, por causa do WordPress que detona com meu uso de Bootstrap aqui, e não perder tempo arrumando isso, para exemplos recomendo ver [1]).

Grid do Twitter Bootstrap

o código em HTML é o seguinte

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Teste Bootstrap</title>
    <link href="caminho/bootstrap.min.css" rel="stylesheet">
    <style type="text/css" media="screen">
        div[class*='span'] {
                background-color: #666; 
                border: solid 1px #f00; 
                text-align: center;}    
        div.row{
                border: solid 1px #0f0; 
                background-color: #888;}
        div.container-fluid {
                border: solid 1px #00f;
                background-color: #AAA; }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="span1">1</div><div class="span1">1</div>
            <div class="span1">1</div>
            <div class="span1">1</div><div class="span1">1</div>
            <div class="span1">1</div>
            <div class="span1">1</div><div class="span1">1</div>
            <div class="span1">1</div>
            <div class="span1">1</div><div class="span1">1</div>
            <div class="span1">1</div>
        </div>

        <div class="row">
            <div class="span1">1</div><div class="span1">1</div>
            <div class="span1">1</div><div class="span1">1</div>
            <div class="span1">1</div>
            <div class="span1">1</div><div class="span1">1</div>
            <div class="span1">1</div>
            <div class="span1">1</div><div class="span1">1</div>
            <div class="span1">1</div>
        </div>
        <div class="row">
            <div class="span3">3</div><div class="span3">3</div>
            <div class="span3">3</div><div class="span3">3</div>
        </div>
        <div class="row">
            <div class="span5">5</div><div class="span6">6</div>
            <div class="span1">1</div>
        </div>
        <div class="row">
            <div class="span7 offset5">7 c/ deslocamento de 5</div>
        </div>
        <div class="row">
            <div class="span4">4</div><div class="span8">8</div>
        </div>
        <div class="row">
            <div class="span12">12</div>
        </div>
    </div>
</body>
</html>

Uma observação, veja que o começo dos span (as caixa) está alinhado, para que elas não se alinhem foi necessário utilizar o offset. Só que o final isso não é possível utilizando tamanhos de span’s diferentes combinados, e mesmo com span menores (veja a primeira e segunda row, a prateleira), apesar de utilizar somente span1 não tem como alinhá-los automaticamente. Por isso muito cuidado ao misturar vários elementos span. Cuida também para que seu site não fique emulando sites antigos baseados em colunas, não faça todo seu site com div’s como se fossem tabelas, o elemento span pode ser usado com toda tag visual do HTML.

Tanto os containers (as estantes), quanto as row e as span, podem ser marcadas como -fluid, o que dá ao sistema a capacidade de se adaptar à tela, veja que o código que coloquei acima o container foi marcado como container-fluid, fazendo com que a página tente se adaptar ao tamanho do navegador.

O offset é uma outra classe CSS, então para usa-lo basta fazer assim:

01<button class="span2 offset4">

O Bootstrap fornece mais componentes e vários plugins javascript, falarei sobre eles em outro post.

Referência

link principal

[1]http://twitter.github.com/bootstrap/index.html

outros links interessantes

[2]https://github.com/twitter/bootstrap(código no github)
[3]https://dev.twitter.com/blog/bootstrap-twitter (anuncio)
[4]http://oxforddictionaries.com/definition/bootstrap?region=us&q=bootstrap
[5]http://listserv.linguistlist.org/cgi-bin/wa?A2=ind0508B&L=ADS-L&D=0&P=14972
[6]http://lesscss.org/
[7]http://lesscss.org/#docs/
[8]http://twitter.github.com/bootstrap/less.html
[9]http://twitter.github.com/bootstrap/download.html

6 comments:

  1. Pingback: Twitter Bootstrap
    1. Sim Domingos, ele é muito simples e fácil de usar. Facilita demais a criação de grandes arquivos CSS. Obrigado pela visita e comentário, volte sempre. Essa semana devo colocar mais um artigo sobre Twitter Bootstrap aqui no site.

Me envie o seu comentário, isso sempre é bom :)