Bootstrap

Estendendo o Bootstrap

Estendenda o Bootstrap para tirar vantagem dos estilos incluídos e componentes, como bem as variáveis LESS e mixins.

Construído com o LESS

LESS CSS

O Bootstrap foi feito com o LESS desde seu início, uma linguagem de estilos dinâmica criada pelo nosso bom amigo Alexis Sellier. Foi desenvolvido para deixar o CSS mais rápido, mais fácil e mais divertido

Por que LESS?

Um dos criados do Bootstrap escreveu um pequeno post em um blog sobre isto, sumarizado aqui:

  • O compilador do Bootstrap é 6x mais rápido com Less comparado ao Sass
  • Less é escrito em JavaScript, tornando fácil para nós entrar a fundo comparado ao Ruby com Sass
  • Less é mais; nós queremos ter a sensação de que nós escrevemos CSS bem e fazer o Bootstrap acessível a todos

O que é incluso?

Como uma extensão do CSS, LESS inclui variáveis, mixins para pedaços reusáveis de código, operações para simples matemática, aninhamento, ou até mesmo função de cores

Aprenda mais

Visite o website oficial em http://lesscss.org para saber mais

Compilando Bootstrap com Less

Desde quando nosso css é escrito com Less e utiliza varáveis e mixins, é necessário ser compilado para implementação em produção. Aqui está como.

Nota: Se você está enviando um pull request no Github com CSS modificado, você deve recompilar o CSS por qualquer um destes métodos

Ferramentas para compilar

Node com makefile

Instala uma linha de comando LESS ao compilador, JSHint, Recess, e uglify-js globalmente com npm executando o seguinte comando

$ npm install -g less jshint recess uglify-js

Uma vez instalado execute make da origem do seu diretório bootstrap e você está configurado.

Adicionalemnte, se você tiver um watchr instalado, você pode executar make watch para o bootstrap automaticamente reconstruir cada vez que você edita um arquivo na biblioteca do bootstrap(isto não é obrigatório, é só um método auxiliar)

Linha de comando

Instale a linha de comando LESS via Node e execute o seguinte comando:

$ lessc ./less/bootstrap.less > bootstrap.css

Tenha certeza de incluir --compress no comando para você economizar alguns bytes!

Javascript

Faça download do último Less.js e inclua o caminho (e o Bootstrap) no <head>.

<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>

Para recompilar os arquivos .less, simplesmente salve-os e recarregue sua página. Less.js compila e os armazena com armazenamento local

Aplicativo não oficial para Mac

O aplicativo oficial para Mac assiste os diretórios com extensão .less e compila para os arquivos locais cada vez que você salva um arquivo .less assistido. Se você quiser, você pode modificar as preferências da aplicação para automaticamente minificar o diretórios dos arquivos compilados

Mais aplicativos

Crunch

Crunch é um editor ótimo de CSS e um compilador construído sob o Adobe Air

CodeKit

Criado pelos mesmos criados do aplicativo não oficial para Mac, CodeKit é um aplicativo que compila LESS, SASS, Stylus, e CoffeeScript

Simpless

Mac, Linux, e aplicativos Windows para compilar arquivos LESS por drag n drop. Adicionalmente, o código fonte no GitHub.

Use como assets estáticos

Começa rapidamente para qualquer projeto web arrastando os CSS compilados e JS. Estilos customizados devem ser separados para facilmente atualizar e fazer manutenção.

Configurando estrutura de arquivos

Faça o Download do último Bootstrap compilado e coloque no seu projeto. Por exemplo você poderia ter algo do tipo:

  app/
  ├── layouts/
  └── templates/
  public/
  ├── css/
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

Utilize um template de início

Copie o seguinte HTML para começar

<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="public/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Bootstrap -->
    <script src="public/js/bootstrap.min.js"></script>
  </body>
</html>

Separando em um código customizado

Trabalhar no seu CSS e JS customizado, é mais que necessário para fazer o Bootstrap próprio com seus JS e CSS separados

<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="public/css/bootstrap.min.css" rel="stylesheet">
    <!-- Project -->
    <link href="public/css/application.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Bootstrap -->
    <script src="public/js/bootstrap.min.js"></script>
    <!-- Project -->
    <script src="public/js/application.js"></script>
  </body>
</html>