Dicas Rápidas

Versão Customizada do Bootstrap (reduzida)

Customize o Bootstrap, incluindo apenas os recursos que você irá utilizar desse poderoso framework, tornando o seu site ainda mais rápido e eficiente.

É bem simples, acesse o link abaixo:

http://getbootstrap.com/customize/

Nesta página você deverá selecionar os componentes que você deseja utilizar.

As opções para customizar incluem:

  • Less files
  • CSS
  • jQuery plugins
  • Componentes
  • Componentes do JavaScript

Praticamente tudo..

Além de permitir que você também personalize as cores e tipografia de alguns dos elementos do framework.

Feito a sua customização, você irá encontrar no final da página o botão “Compile e Download”.

Está pronto, agora é só incluir os scripts e css no seu projeto.

Por que vale a pena?

Em alguns projetos, tive apenas a necessidade de utilizar o sistema de grid “colunas” do bootstrap, nesta situação, a versão customizada incluindo apenas o grid, ficou pesando apenas 13 kbs (obs: depois eu reduzi para 3kbs, copiando apenas as classes necessárias do arquivo).

Se eu inclui-se todo o CSS do framework no meu projeto, em sua versão reduzida “minify”, seriam incriveis 120 kbs.

E o pior, existe alguns “programadores” que mesmo nesta situação de utilizar apenas o sistema de colunas, irão incluir também o JS, que são mais 37 kbs.

Faça as contas, 13 kbs X 157 kbs, hoje a velocidade na web é tudo, então vamos ser mais conscientes?

Hoje a maior parte do trafego dos sites são de acessos oriundos de smartphones, que por sua vez utilizam 3G e franquia de dados.

Dica extra: E isso vale para o jQuery também, nada de incluir a biblioteca inteira no projeto para colocar apenas uma mascará de telefone no formulário de contato!

 

 

Resumo
Nome do Artigo
Versão customizada do Bootstrap
Descrição
Como criar uma versão customizada do Bootstrap
Autor
Editor
Roger Mauricio Takemiya
Logo do Editor

Post Recentes

Bloquear .env e .git no nginx: as regras que ainda deixam o arquivo vazar

Negar /.env no nginx parece resolvido até alguém pedir /wp-content/uploads/.env ou backup.sql. As regras que testei e os furos que…

12 horas atrás

Canonical errado no Yoast: corrigindo pelo filtro wpseo_canonical

O Search Console marca suas páginas 2, 3 e 4 como alternativas da página 1? Ajuste a tag canônica do…

16 horas atrás

Layout XML do Magento 2: remover bloco de módulo de terceiro

Um módulo de terceiro plantou um banner no topo da loja e você não quer desinstalar nada: tire o bloco…

1 dia atrás

Restaurar dump do Magento 2 em outro servidor: trocar a base_url no SQL

Importou o banco de produção e o site pula para o domínio antigo? Rode o UPDATE em core_config_data, limpe o…

2 dias atrás

Criar exceção customizada em PHP: quando estender Exception compensa

Seu catch trata pedido inexistente e banco fora do ar do mesmo jeito. Veja como criar exceção customizada em PHP…

3 dias atrás

DataProvider Magento 2: form do admin abre com campos vazios ao editar

O form do admin salva mas abre em branco na edição: veja o getData() indexado pelo id da entidade e…

4 dias atrás