Código fonte do Bootstrap 4 agora é Sass!

Código fonte do Bootstrap 4 agora é Sass!

O Bootstrap, um dos frameworks de front-end mais populares entre os web designers, lançou recentemente a versão 4. Agora escrito em Sass, sofreu revolucionárias mudanças para dar-lhe um ambiente altamente personalizável e com melhores experiências aos usuários. Foi uma jornada longa, com o primeiro lançamento Bootstrap Alpha de 2015 até 18 de janeiro de 2018; para obter uma versão estável do Bootstrap 4. Vejamos algumas das suas novidades.

1 – Mudança de LESS para Sass

Os fãs de Sass ficarão satisfeitos por saber que o Bootstrap é agora oficialmente um projeto Sass (\o/), isso é ótimo porque a Sass tende a ser mais favorável pelos desenvolvedores front-end. Ele também compila mais rápido graças à Libsass.

Se você baixar a fonte Bootstrap, encontrará uma pasta chamada “Sass” na qual você verá todos os partials necessários. “_variables.scss ” contém todas as variáveis e configurações que você precisa, gradientes, transições, sombras, classes de grade e outros, foram escritos sob a opção de variáveis Sass, e por fim o “bootstrap.scss ” que contém todas as diretivas de @import, permitindo que você personalize sua instalação do Bootstrap, incluindo ou excluindo os componentes que desejar.

2 – Atualizações do Sass Map

Os $spacers e $sizes Sass maps são atualizados para mais personalizações. Eles funcionarão da mesma forma que os mapas a cores. Agora você pode adicionar, remover ou substituir todos os seus pares de valores-chave para gerar famílias de CSS relacionados. Os mapas do Sass possuem sinalizadores padrão que podem ser sobrepostos ou substituídos.

3 – Documentação adicionada

A nova documentação é adicionada para usar as variáveis CSS. O Bootstrap 4 fornece cerca de 24 variáveis CSS. Estas ajudam a facilitar o acesso a cores de temas, breakpoints e etc.

4 – Novos Exemplos

O Bootstrap 4 possui uma versão completa modificada e com novos exemplos, exemplos desatualizados foram removidos e alguns foram refeitos, acesse o seguinte link para visualizar-los: http://getbootstrap.com/docs/4.0/examples/.

5 – Sistema de grade melhorado com base em “Rems”

O uso da grade Bootstrap ainda segue a mesma sintaxe HTML, mas a arquitetura de sublinhado mudou um pouco.

Você provavelmente está muito familiarizado com tudo isso, mas vale a pena notar novamente. A principal diferença é a maneira como o espaçamento é feito.

Um containeragora tem largura máxima definida em rems. Uma rowagora tem margem esquerda e direita padrão -.9375rem, enquanto as columnspossuem padding esquerdo e direito padrão de 0.9375rem. Esses valores eram anteriormente 15pxno Bootstrap 3. Esses novos valores rem são quase iguais ao anterior.

Veja o Pen Bootstrap 4 Grid Rem Demo por Nicholas Cerminara ( @ncerminara ) no CodePen .

6 – Mudança nos breakpoints do grid

Vejamos abaixo o grid antigo e o novo:

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Sistema de Grid Antigo (Bootstrap v3.3)

Podemos observar que a versão anterior do Bootstrap conta com apenas 3 breakpoints, porém veremos no próximo quadro que isso foi melhorado na versão 4.

Sistema de Grid Novo (Bootstrap v4)

Podemos observar ainda que esses novos breakpoints possibilitam um melhor desenvolvimento para mobile o que é altamente importante nos dias atuais, tendo em vista que o menor (Small) agora é maior ou igual a 576px e anteriormente era 768px, o que dificultava o desenvolvimento mobile. Vale salientar que outros frameworks CSS já implementavam um sistema parecido, por exemplo o Materialize CSS que é maior que 600px.

7 – Flexbox Opcional no Grid

O Internet Explorer 9 não suporta Flexbox, mas nem por isso os criadores do Bootstrap deixaram de adicionar isso à versão 4. É apenas opcional.

Existe uma variável booleana no arquivo _variables.scss chamado $enable-flex. Se você definir isso como verdadeiro e recompilar, uma série de coisas acontecem.

Habilitando o Flexbox do Sistema de Grid

Todos os componentes da grade passam imediatamente a utilizar o Flexbox e você nem precisa ajustar sua sintaxe HTML. Simplesmente funciona. Não está claro neste momento, se eles vão expandir isso para permitir uma “grade” mais complexa, mas não importa porque você ganha uma tonelada de benefícios adicionais. Um desses benefícios são alturas correspondentes de colunas com Flexbox.

É isso aí pessoal, o que acharam das novidades do Bootstrap 4?

Essas são apenas algumas, vejam a página oficial para ficar por dentro e testar todas as novidades. Ah e se quiser aprender o Sass e trabalhar direto com o código fonte do Bootstrap não perca tempo aproveite o cupom de desconto do nosso Curso Completo de Sass no final do post.

Recomendo o nosso projeto Videos de TI, onde você encontrará vários cursos da área de programação, inclusive cursos de Sass e do Framework CSS Materialize.

Um forte abraço, e até o próximo post. 😉

CUPOM DE DESCONTO CURSO DE SASS

Para ter acesso ao nosso cupom de desconto basta acessar o link a seguir: https://www.udemy.com/sass-curso-completo/.

Código fonte do Bootstrap 4 agora é Sass!