Usar a grelha do Bootstrap 4 com SASS

Criado: 6 de Abril, 2019 Frontend

Pode ser útil usares a grelha do Bootstrap com SASS.
Eu na maior parte dos temas que faço não uso classes HTML para estruturar a grelha e assim consigo ter uma melhor percepção de como os elementos se portam responsivamente apenas olhando o código SCSS sem ter de ir à view.

O Bootstrap traz três funções que usamos para a grelha:

  • make-row() – Cria uma linha
  • make-col-ready() – Prepara o elemento para ser uma coluna com o gutter
  • make-col(6) – O elemento ocupa 6 colunas em 12 (metade do espaço), podes passar o segundo parâmetro para indicar o número total de colunas da grelha, ex: make-col(6, 12)

Vamos criar duas colunas com a mesma largura.

<div class="cta">
<div class="cta__body">
<h1>{{ __('Segue-nos', 'gui') }}</h1>
</div>
<div class="cta__img">
<img src="https://google.pt/logo.png">
</div>
</div>
.cta {
@include make-row();
}
.cta__body,
.cta__img {
@include make-col-ready();
}

@include media-breakpoint-up(md) {
.cta__body,
.cta__img {
@include make-col(6)
}
}
@include media-breakpoint-up(lg) {
.cta__body,
.cta__img {
@include make-col(3)
}
}

Neste exemplo as duas colunas cta__body e cta__img ocupam 50% do espaço disponível (6 colunas de um total de 12) quando atingem o tamanho médio e 25% (3 colunas de um total de 12) quando atingem o tamanho largo.
Os valores pré defenidos do Bootstrap para a grelha são:

  • sm: 576px
  • md: 768px
  • lg: 992px
  • xl: 1200px

Implementar Padrões e Regras no CSS

Na minha opinião é mais importante adoptar o mesmo padrão e regras ao estruturar o CSS de um projecto do que implementar determinados padrões. Isto porque muitas vezes procuramos a “melhor” implementação e acabamos por perder o foco e a organização do CSS com essa obcesão.

Eu habituei-me a seguir o padrão mobile first. Começo por incluir CSS orientado à versão mobile do site e vou incluíndo breakpoints por ordem (sm, md, lg e xl) à medida que vou desenhando o resto do site.
O que tenho achado bastante útil para manter o CSS organizado em grandes projectos é reutilizar o máximo de código através de mixins e manter cada bloco num ficheiro único.
E algo importante é distinguir diferentes secções como components de layouts. Algo semelhante a esta estrutura:

  • layout/page
  • layout/header
  • layout/footer
  • component/cta
  • component/author-box
  • component/article-card
  • component/article-list

No exemplo de cima estava a desenhar um CTA (call to action). Este CTA é um bloco e pode ter vários elementos:

  • cta__img: Imagem
  • cta__button: Botão com uma hiperligação
  • cta__dismiss: Um botão que fecha o CTA
  • cta__title: Um título que tem um efeito de apresentar o texto a deslizar

No CSS quando começo a fazer a versão mobile eu escrevo todos seguidos e implemento os breakpoints para eles todos juntos.
Em vez de isto:

cta__body {}

@include media-breakpoint-up(md) {
.cta__body {}
}

cta__img {}

@include media-breakpoint-up(md) {
.cta__img {}
}

Faço assim:

.cta__body,
.cta__img { }
@include media-breakpoint-up(lg) {
.cta__body,
.cta__img { }
}

Se estruturar como o primeiro exemplo acabo por ter vários breakpoints e pela experiência que tenho isso não ajuda a estruturar o CSS nem o torna mais fácil de interpretar.

Um padrão que implemento, e está apresentado neste artigo, é o BEM – Block Element Modifier.
Eu vi por um colega de trabalho como a má implementação de padrões podem levar a código mal estruturado em CSS. Seguindo o exemplo que dei que é preferível implementar sempre o mesmo do que tentar melhorar e atingir a perfeição, este colega acabava por usar este padrão mal só porque queria atingir a tal perfeição que é tão comum nos frontend developers (ex: usava modificadores do BEM como forma de separar componentes e eu tinha dificuldade em perceber se eram de facto elementos ou modificações a elementos).

Se sentes confiança e queres assumir isso, então implementa os padrões que achares mais adequados e melhores mas leva-os até ao fim.
A menos que o teu gestor de projecto seja uma pedra não tens tempo para reverter padrões e decisões que tomas-te só porque descubris-te que afinal “não é a melhor”.

Nota: O conteúdo deste blog é exclusivamente para ajudar e partilhar conhecimentos.
Qualquer erro que seja detetado por ti, por favor, avisa-me. Quanto melhor for o conteúdo, melhor para todos nós.

Partilhar este artigo