Bootstrap 4 recursos novos e interessantes que você vai adorar

A próxima versão principal do framework Bootstrap está ao virar da esquina. A versão alpha já pode ser baixada do site de desenvolvimento do Bootstrap, e o código fonte também está disponível no Github.

O Twitter Bootstrap é atualmente o framework de interface mais popular que existe. Ele permite que os desenvolvedores Crie websites prontos para dispositivos móveis e responsivos, rapidamente. O Bootstrap possibilita o uso inteligente do trio de frontend padrão HTML5, CSS3 e Javascript. Atualmente é utilizado por mais de 6 milhões de sites na web.

Embora o Bootstrap 4 ainda esteja em fase de desenvolvimento (então não o use em um site ao vivo ainda), os desenvolvedores fizeram um trabalho fabuloso. Neste post vamos dar uma olhada na nova versão que inclui muitos recursos que certamente simplifique e melhore o fluxo de trabalho de desenvolvimento frontend.

1. Sass em vez de menos

Até agora o Bootstrap usou o LESS como seu principal processador CSS, mas para o novo lançamento principal, as regras de estilo serão refatoradas para o Sass, que é muito mais popular entre os desenvolvedores frontend, tem uma base colaborativa enorme, geralmente mais fácil de usar e oferece mais possibilidades. Graças ao poderoso Libassass Sass Complier escrito em C / C++ Bootstrap 4 irá compilar muito mais rápido do que antes.

2. Nova Camada de Grade para Telas Menores

O Bootstrap possui um sofisticado sistema de grade responsivo que permite aos desenvolvedores visar dispositivos com diferentes viewports. Bootstrap 3 tem atualmente 4 classes de grade para colunas, .col-xs-XX para telefones celulares, .col-sm-XX para comprimidos, .col-md-XX para desktops e .col-lg-XX para desktops maiores. O Bootstrap 4 aprimorará o sistema de grade com um quinto, que facilitará aos desenvolvedores segmentar dispositivos menores com largura de visualização de 480px.

A nova classe de grade tomou o nome do menor anterior, e empurrou os nomes atuais dos níveis de grade para cima em um entalhe. No Bootstrap 4, os grandes desktops usarão o .col-xl-XX seletor de classe. É importante saber que, apesar do novo nome, eles não adicionaram uma nova classe para telas extra grandes, mas para telas extras.

3. Introduz Unidades CSS Relativas

O Bootstrap 4 finalmente descarta o suporte para o Internet Explorer 8. Esse é realmente um passo inteligente, pois permite que eles se livrem de polyfills incômodos e convertam em unidades CSS relativas. Em vez de pixels, o novo lançamento principal use REMs e EMs que tornam possível implementar tipografia responsiva nos sites do Bootstrap. Isso também aumentará a legibilidade e tornará os sites mais acessíveis para usuários com deficiência.

Se você quiser experimentar como as unidades relativas funcionam com o novo Bootstrap 4, confira esta demo no Codepen.

4. Novos Cartões Bootstrap

A equipe de desenvolvimento decidiu unificar alguns elementos anteriores da interface de usuário do Bootstrap, então eles decidiram introduzir um novo componente de interface do usuário chamado Cards. Os cartões substituirão os antigos poços, miniaturas e painéis e fornecerão aos usuários um fluxo de trabalho mais simplificado. Não se preocupe, os cartões manterão elementos familiares, como títulos, cabeçalhos e rodapés de poços, miniaturas e painéis.

Como os cartões serão mais flexíveis do que os componentes atuais da interface, eles permitirão um espaço maior para implementações de criativos. Existem alguns pioneiros por aí que já realizaram experimentos no Codepen com Bootstrap Cards. Você pode vê-los ou criar seus próprios cartões.

5. Novo Módulo de Reinicialização

O novo módulo de reinicialização substitui o anterior normalize.css redefinir arquivo. Não se afasta; pelo contrário, constrói mais regras sobre ele. O objetivo do movimento era incluir todos os seletores CSS genéricos e redefinir estilos em um único arquivo SCSS fácil de usar. Você pode dar uma olhada no código-fonte aqui se quiser entender melhor como o novo módulo funciona.

É bom saber que os novos estilos de reinicialização definem com inteligência a propriedade CSS de dimensionamento de caixa como caixa de borda no elemento, que é, portanto, herdado por cada elemento filho na página. A nova regra de estilo torna os layouts responsivos mais gerenciáveis. Se você quiser experimentar a diferença entre os tipos de layout caixa de conteúdo e caixa de borda, dê uma olhada nesta demonstração prática fornecida pelo CSS-Tricks.com (ela não foi criada para o Bootstrap 4, ela apenas mostra como o dimensionamento de caixa geralmente funciona).

6. Suporte Flexbox

O Bootstrap 4 torna possível aproveitar a Flexbox Layout do CSS3, no entanto - como o Internet Explorer 9 não suporta o módulo flexbox - a versão padrão do Bootstrap 4 faz uso do float e exibe propriedades CSS para implementar um layout fluido.

O Flexbox possui um layout fácil de usar que pode ser usado de maneira excelente em design responsivo, pois fornece um contêiner flexível que se expande ou encolhe para preencher o espaço disponível da melhor maneira. Use o recurso de flexbox opcional somente se você não faça precisa fornecer suporte para o IE9.

7. Personalização Variável Agilizada

Todas as variáveis ​​Sass usadas na nova versão do Bootstrap são incluídas em um único arquivo chamado _variables.scss, que simplificará significativamente o processo de desenvolvimento. Você não precisa fazer mais nada além de copiar as configurações desse arquivo para outra chamada _custom.scss para alterar os valores padrão.

Você pode personalize muitas coisas como cores, espaçamento, estilos de link, tipografia, tabelas, pontos de quebra de grade e contêineres, número da coluna e largura da medianiz e muitos outros.

8. Novas Classes Utilitárias para Espaçamento

O Bootstrap 3 já possui muitas classes de utilitários práticos, como as que mudam flutuante ou o clearfix, mas o Bootstrap 4 adiciona ainda mais. o novas classes de espaçamento permitir que os desenvolvedores alterem rapidamente preenchimentos e margens em seus sites.

A sintaxe para as novas classes é bastante simples, por exemplo, adicionando .classe m-a-0 liga uma regra de estilo que define margens para 0 em todos os lados do elemento dado (margin-all-0). Enquanto as margens usam o m- prefixo, os preenchimentos são estilizados com o p- prefixo. Nos documentos de desenvolvimento, você pode dar uma olhada em todas as novas classes de utilitário de espaçamento.

9. Tooltips e Popovers Powered By Tether

Em Bootstrap 4, dicas de ferramentas e popovers fazem uso da biblioteca Supercool Tether, um mecanismo de posicionamento que torna possível manter um elemento absolutamente posicionado ao lado de outro elemento na mesma página. Isso significa dicas de ferramentas e popovers será automaticamente colocado corretamente em sites de Bootstrap 4.

Não se esqueça que, como o Tether é uma biblioteca JavaScript de terceiros, você precisa incluí-lo separadamente no HTML antes de seu arquivo bootstrap.js.

10. Plugins de JavaScript refatorados

A equipe de desenvolvimento refatorou cada plug-in JavaScript para o novo lançamento usando o EcmaScript 6. Com a utilização inteligente das mais recentes especificações e os aprimoramentos mais recentes, eles pretendem melhorar a experiência do frontend.

O novo Bootstrap 4 também passou por outras melhorias no JavaScript, como verificação de tipo de opção, métodos genéricos de desmontagem, e Apoio UMD, tudo isso funcionará em conjunto para tornar a estrutura de frontend mais popular mais simples do que nunca.

Agora leia: 10 alternativas leves para inicialização e fundação