Dicas Rápidas

Versão Customizada do Bootstrap (reduzida)

Customize o , incluindo apenas os recursos que você irá utilizar desse poderoso , 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:

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 é 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

Por que devo sempre manter o Magento 2 atualizado?

Segurança: Atualizações frequentes geralmente incluem patches de segurança para corrigir vulnerabilidades identificadas. Ao manter o Magento atualizado, você reduz significativamente…

1 mês atrás

Adicionar uma mensagem de Alerta ou Aviso do Admin do Magento 2

Como adicionar uma mensagem de Alerta ou Aviso do Admin do Magento 2 Injete o Magento\Framework\Message\ManagerInterface no construtor da sua…

1 mês atrás

Exibir mensagens erro/sucesso da Classe: Magento\Framework\Message\ManagerInterface

Para exibir as mensagens adicionadas na classe Magento\Framework\Message\ManagerInterface em um arquivo .phtml, você pode usar o seguinte código: <?php $objectManager…

1 mês atrás

Exportar as categorias do Magento 2 em um XML

Para criar um script no Magento 2 que exporte as categorias para um arquivo XML com o nome da categoria,…

2 meses atrás

Colocar um video como Background utilizando HTML + CSS

Para definir um vídeo MP4 como plano de fundo em um <div> usando HTML e CSS, você pode seguir estas…

4 meses atrás

Desativar o “lastname” no Magento 2

Como desativar o "lastname" no Magento 2 e Adobe Commerce Desativando a obrigatoriedade do campo Execute a SQL abaixo diretamente…

4 meses atrás