Ferramentas para otimizar sua produção com o Bootstrap

Esse é um post rápido apenas para compartilhar alguns links de ferramentas interessantes para aumentar a produtividade de qualquer desenvolvedor que utiliza o Bootstrap.

O Bootstrap é um framework criado pelos desenvolvedores do Twitter e amplamente utilizado por desenvolvedores e agências em todo o mundo. Como um framework, seu papel é agilizar a produção de layouts com componentes CSS pré declarados que podem ser alterados. Pra quem não conhece o Bootstrap, o melhor a se fazer é visitar o website do framework e dar uma olhada na documentação. Pra quem não entende inglês, a Globo traduziu a documentação do Framework (ele é utilizado projetos online da empresa), porém esta documentação está ultrapassa visto que a versão oficial se encontra na versão 3.1 vs a 2.3 da globo.


Aqui vão algumas ferramentas que podem (ou não) auxilar o seu desenvolvimento com o framework.

Dica: algumas ferramentas visuais são boas para dar novas noções do Framework, mas evite utilizar código prontos de ferramentas de terceiro caso você não entenda como aquilo funciona.

BBG – Bootstrap Button Generator

Essa ferramenta auxilia a criação de botões e da um preview em tempo real para teste. É ótimo pra quem quer adicionar botões estilizados sem fugir do padrão CSS do Bootstrap. Compatível com a ultima versão do Framework.


BBG - Bootstrap Button Generator

Kickstrap

Essa ferramenta se denomina como um pacote completo para desenvolvimento web, que utiliza o bootstrap como tema CSS e outras bibliotecas JavaScript para fornecer um ambiente completo para desenvolvimento Front-End. Lembra o Webapp, gerador do Yeoman para projetos Web. Essa ferramenta aumenta e muito nível de produtividade com o Bootstrap se utilizado corretamente.


Kickstrap_websocialdev

Divshot

O Divshot é um editor front-end visual de códigos e trabalha com os mais famosos Frameworks, entre eles o Bootstrap e seu concorrente direto, o Foundation da Zurb. O serviço é online, com cadastros pagos e FREE.


Divshot - Web Social Dev Post

Bootflat

O Bootflat é uma variação do Bootstrap default. Basicamente, é um tema flat para o Bootstrap, uma alternativa ao tema original do Framework. O Bootflat é FREE.


Bootflat - Web Social Dev Post


Bootstrap Live Editor

É uma IDE online, muito simples, exclusiva para edição de paginas com estilo bootstrap. Possui uma serie de ferramentas para auxiliar o desenvolvimento direto no browser. Ferramenta 

FREE.

Bootstrap Live Editor - Web Social Dev Post

Pingendo

O Pingendo é um software nativo para Windows que serve tanto para prototipar wireframes para Bootstrap quanto para desenvolver de fato um layout. Possui edição gráfica e via código. Ferramenta FREE.


Pingendo - Web Social Dev Post


BootSwatchr

Esse serviço possibilita a simples edição do tema padrão do Bootstrap. Nele você consegue alterar toda a configuração visual do tema padrão para adaptar o mesmo ao seu atual projeto. Util para quem está começando a utilizar o padrão SASS, pois a edição online é através desta linguagem. Serviço 

FREE.


BootsWatchr - Web Social Dev Post

Lavish

Gerador de paleta de cores para o tema padrão do Bootstrap a partir de uma imagem. Basta fazer upload da imagem e a ferramenta gera um arquivo CSS (lavish-bootstrap.css) e um SCSS (variables.scss), bastando substituir ou linkar o arquivo em questão.


Lavish - Web Social Dev Post

Bootply

O Bootply é mais uma ferramenta para editar o código do Bootstrap online. Ferramenta super completa, conta com os temas exemplos do Bootstrap, tem visualização gráfica e código, preview automático, você pode escolher com qual versão do Framework deseja trabalhar. Ferramenta 

FREE.


Bootply - Web Social Dev Post


LayoutIt

Mais um editor online para o Bootstrap, mas este conta apenas com a visualização do desenvolvimento gráfico. Disponível para versão 2 e 3 do Framework. Ferramente 

FREE.


LayoutIt - Web Social Dev - Post

Easel

Essa é uma das ferramentas mais modernas para edição visual de temas no Bootstrap, porém é uma ferramenta paga, mas da para testar a ferramente de graça no site do serviço. Recentemente essa ferramenta foi adquirida pelo GitHub.

Ferramenta paga.


Easel - Web Social Dev - Post


Bootswatch

Esse serviço reune diversos temas para o Bootstrap, muito interessante para inspiração e para ter ideias de customização do framework.


Bootswatch - Web Social Dev - Post

Conclusão

Essas foram algumas ferramentas que testei no momento e que realmente ajudam a elevar seu nível de produtividade com o Bootstrap. Existe centenas de ferramentas como essas e até melhores, disponíveis na internet. Em caso de duvidas, utilize os comentários! 🙂

  • Flávio Brognara

    Boa !! Ajudou e muito !!

  • Olimar Ferraz

    Mto bom. Uma biblioteca de templates que acho muito boa é a wrapbootstrap.com. São temas pagos, mas mesmo sem comprá-los é uma ótima fonte de inspiração.

    • Olá Olimar, vou dar uma olhada, o Theme Forest também é uma ótima inspiração!