O que esperar do Bootstrap 4

Nos últimos anos, o Bootstrap se tornou muito popular. Há uma boa chance de você ter encontrado ou criado temas WordPress que incorporam elementos do Bootstrap. Ele evoluiu de uma estrutura pré-responsiva básica para uma estrutura responsiva robusta, rica em recursos e moderna. O Bootstrap 3 já existe há algum tempo, por isso é emocionante aprender sobre o que vem a seguir no Bootstrap 4.

Estado do Bootstrap 4

O Bootstrap 4 está atualmente em desenvolvimento e ainda não está pronto para ser usado em produção. Atualmente está em versão alfa. Esta é uma boa oportunidade para visualizar e se familiarizar com a forma como isso o ajudará em projetos futuros.

A documentação do Bootstrap 4 ainda não está completa, então a experimentação é uma boa maneira de testar alguns dos novos recursos. Assim que estiver oficialmente disponível para uso em produção, você estará bem ciente de todas as grandes novas melhorias.

Construído para navegadores modernos

À medida que avançamos na web, está ficando cada vez mais difícil oferecer suporte a navegadores mais antigos enquanto usamos o que o desenvolvimento web tem a oferecer de melhor e mais recente. Seja ou não música para seus ouvidos, todos podemos concordar que as melhores técnicas de CSS3 são facilitadas ao trabalhar com navegadores modernos. O Bootstrap 4 pode ser a maneira perfeita de fazer uma ruptura com os navegadores mais antigos. Com esta atualização, o suporte ao Internet Explorer 8 é completamente descartado. Lembre-se de que a estrutura ainda oferece suporte ao Internet Explorer 9 e ainda oferece suporte a CSS3 sem muitos problemas.

Reinicialização aprimorada

Você provavelmente já se acostumou ao Normalize.css, que é uma ótima opção de reset. Há uma redefinição nova e aprimorada com coisas específicas do Bootstrap adicionadas a ela, chamadas reboot.css. As especificidades do bootstrap são coisas como o tamanho da caixa: borda, rems como unidade de medida, estilos de link e estilos de formulário. É uma ótima mistura entre Normalize.css e necessidades específicas do Bootstrap, então você certamente terá um ótimo começo.

SASS

Nos dias anteriores do Bootstrap, parecia que MENOS era o preferido. Com as mudanças da indústria e as preferências dos designers se inclinando para o SASS, é o que está em favor do momento. Se você se lembrar da Versão 3, foi quando a opção SASS ficou disponível com a opção port. A partir de agora, não há suporte planejado para LESS.

Personalizações

O Bootstrap 4 facilita a criação de seus designs personalizados, tudo feito de forma organizada. Todas as opções de variáveis ​​são consolidadas em um único arquivo. O SASS pode ser compilado facilmente e não há necessidade de uma folha de estilo separada, como no passado.

Existem algumas novas opções de personalização no Bootstrap 4. Você pode ver o estado atual aqui. Provavelmente evoluirá um pouco à medida que os detalhes continuarem a ser divulgados.

Tenha em mente que estas são personalizações fáceis de configurar no início:

• Padrões do corpo
• Variáveis ​​de cor
• Caixa flexível
• Opções de design CSS3 como transições, cantos arredondados, sombras, etc.
• Medidas de espaçamento
• Estilos de links
• Pontos de interrupção da grade
• Contêineres de grade
• Colunas de grade
• Dimensionamento de tipografia
• Componentes
• Tabelas
• Mais!

Flexbox alguém?

O Flexbox certamente cresceu em popularidade e veremos cada vez mais web designers usando isso. É uma ótima ferramenta para usar, pois fornece opções de layout simples e flexíveis com estilo CSS. Se você gosta da facilidade de alinhamento vertical de conteúdo em um elemento pai, reordenando o conteúdo entre dispositivos e resoluções de tela com a ajuda de consultas de mídia e apreciando uma maneira fácil de ter colunas de altura igual em sua grade, o Flexbox é uma ótima solução .

Antes de executar e converter todos os seus projetos, há uma coisa importante a ser mencionada. Embora o suporte a navegadores tenha aumentado drasticamente, o Internet Explorer 9 ainda não possui suporte ao Flexbox. Em relação à facilidade de uso, o Bootstrap 4 facilita o uso do Flexbox se você não precisar de suporte ao IE9. Essencialmente, tudo o que você precisa fazer é encontrar o arquivo _variables.scss e alterar o $enable-flex de false para true. Se você estiver familiarizado com SASS, isso é uma coisa rápida a fazer.

Atualizações de grade

Se você é fã do Bootstrap há muito tempo, provavelmente é um especialista em como o sistema de grade funciona, juntamente com a convenção de nomenclatura. Com o Bootstrap 4, a sintaxe permanece a mesma, mas há uma diferença nas medidas usadas. O sistema de grade agora é baseado em “rems”. Este é um ajuste se você está acostumado com designs perfeitos de pixel, pois agora as coisas serão mais fluidas.

Ao separar os pixels aos quais nos acostumamos, vamos dar uma olhada no exemplo de algo comum como .container e .row. O contêiner agora tem uma largura máxima definida em rems. Uma linha tem uma margem esquerda e direita negativa padrão de -.9375rem , enquanto as colunas têm preenchimento padrão esquerdo e direito de 0.9375rem . Como você deve se lembrar, esses valores eram anteriormente de 15px no Bootstrap 3. Esses novos valores de rem são comparáveis ​​a isso.

Consultas de mídia aprimoradas

As consultas de mídia nas versões anteriores do Bootstrap eram um pouco gerais e, às vezes, as consultas personalizadas precisavam ser criadas. Aqui está como eles se pareciam:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Agora, uma abordagem mais móvel pode ser adotada com essas consultas de mídia atualizadas:

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }

// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }

// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }

// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }

Se você quiser algo diferente, os pontos de interrupção são configuráveis ​​no SASS se você quiser escolher o seu próprio.

Cartões como substitutos

Familiarizado com painéis, poços e miniaturas? Os cartões agora são os melhores e mais recentes, e oferecem ótimas opções de estilo. Um exemplo são os Grupos de Cartões. Embora a quantidade de texto varie, os cartões têm a mesma altura, sem depender do JavaScript. Isso funciona com o Flexbox e o modo de grade padrão. Ao usar o Flexbox, os cartões são construídos usando as propriedades do Flexbox. A grade padrão usa um truque de CSS para evitar a necessidade de JavaScript. O contêiner usa display: table; e cada “cartão” é display: table-cell; dando-lhe as propriedades da tabela - é daí que vem a altura igual da coluna.

Tipografia

Lembra como a grade agora usa rems? Bem, só faz sentido que a tipografia faça isso também! Ao pensar nisso, lembre-se de que todos os tamanhos de fonte são relativos ao elemento raiz, a tag HTML. Ao alterar o tamanho da fonte (ou qualquer outro estilo) na tag HTML, você pode facilmente estilizar e dimensionar estilos em todo o projeto.

Vamos supor que seu elemento HTML seja estilizado com um font-size: 16px . Digamos que você queira que suas tags h5 tenham esse tamanho, você declararia um tamanho de fonte de 1rem.

h5 {
font-size: 1rem;
}

Agora, pode haver alguma matemática envolvida no futuro. Se você queria que suas tags h1 fossem de 40px, veja como descobrir isso:

h1 {
font-size: 2.5rem; /* 16 * 2.5 = 40px */
}

Ainda não está se sentindo rems? Você ainda pode usar pixels e ems para dimensionamento, se desejar.

Mais estilos de título

Os títulos são ótimos para estabelecer hierarquia. Mas e se você quiser algo mais proeminente do que h1, h2, h3, etc.? Bem, a boa notícia é que você pode adicionar uma classe de cabeçalho de exibição a um cabeçalho padrão que o torna maior. Seria algo como:

<h1 class="display-4">Heading Display 4</h1>

Um display-4 é maior que um display-2 .

Tamanho de arquivo menor

Bootstrap 4 tem uma pegada menor. Na verdade, é cerca de 30% menor que a versão mais recente, Bootstrap 3. Anteriormente, era cerca de ~123kb e agora é ~88kb. É incrível que seja menor e ainda tenha os mesmos ótimos recursos.

Tenha em mente que existe a opção de usar apenas as partes do Bootstrap que você precisa, o que torna os tamanhos dos arquivos ainda menores.

Não há mais Glyphicons?

Glyphicons foram amplamente utilizados em versões anteriores do Bootstrap, por isso é triste vê-los desaparecer. Não se preocupe, este não é o fim dos ícones da web. Em seu lugar, FontAwesome também deve servir a você. Você também pode conferir o Octigons do Github para ótimas opções de ícones.

Mudando para o Bootstrap 4

Embora esteja atualmente em alfa, não há razão para que você não possa trabalhar com ele em um ambiente de teste. O código-fonte está disponível em uma ramificação v4-dev no GitHub. À medida que você experimenta e vê qualquer coisa que precise de atenção, há uma solicitação pull de desenvolvimento e rastreamento que inclui notas sobre as alterações e quaisquer outros novos aprimoramentos.

As coisas estão em alfa, e eventualmente haverá versões beta depois que os recursos e as funcionalidades estiverem prontos para serem testados. Após a versão beta, dois candidatos a lançamento serão usados ​​para testar as coisas em produção. Quando tudo correr bem, a versão final estará pronta!

Acabamos de arranhar a superfície aqui e a conversa do Bootstrap 4 acabou de começar. É emocionante ver o que o futuro reserva e estou animado para vê-lo sair do alfa. Fique de olho nas atualizações e baixe uma cópia para testar os novos componentes do Bootstrap 4.