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

CNPJ alfanumérico Magento 2: módulo grátis com máscara e validação

Módulo gratuito Roger_CnpjAlfanumerico que aplica máscara e validação do novo CNPJ alfanumérico no checkout e formulários do Magento 2 e…

4 dias atrás

CNPJ alfanumérico no WooCommerce: plugin grátis de máscara e validação

A partir de 06/07/2026 a Receita passa a emitir CNPJ alfanumérico. Conheça o plugin grátis que aplica máscara e validação…

4 dias atrás

Como remover um modulo do Magento 2

Para remover um módulo do Magento 2, siga os passos abaixo: 1. Desabilitar o módulo Primeiro, desabilite o módulo usando…

1 ano atrás

Criar um memorando de crédito (cancelar) invoice no Magento 2

Para cancelar 100% do pedido e criar um crédito para todos os itens através da API REST do Magento 2,…

2 anos atrás

Consultando no banco quantidade disponivel para Venda (estoque)

No Magento 2, a quantidade "reservada" na "Salable Quantity" é gerenciada principalmente pelos módulos MSI (Multi-Source Inventory). A "Salable Quantity"…

2 anos atrás

Admin do Magento 2 não acessa

Como corrigir o erro ao acessar o Admin do Magento 2. Mesmo após fazer o login, permanece na tela de…

2 anos atrás