Breakpoints CSS

O que é

Um site tem que ficar bom no celular em pé, no tablet e no computador. Breakpoint é a largura de tela em que o layout muda: por exemplo, os produtos ficam um embaixo do outro no celular e passam a ficar 3 por linha no computador. No SW Core você diz isso com um sufixo curto no fim da classe: -p, -m, -g, -gg, -xg. Sem sufixo, a classe vale em qualquer tela.

É só CSS. O jeito de pensar é "do celular para cima": você escreve primeiro como fica no celular (sem sufixo) e depois acrescenta o que muda em telas maiores. O sufixo quer dizer "a partir desta largura", nunca "só nesta". Exemplo: co12 co6-m co3-g = ocupa a linha toda no celular, metade a partir de 768 px, um quarto a partir de 992 px. Os sufixos existem na Grade (as classes l-… e co…). As larguras do Container usam os mesmos números.

Quando usar

• Lista de produtos/serviços que empilha no celular e vira 2, 3 ou 4 por linha em telas maiores.
• Conteúdo + barra lateral que ficam um embaixo do outro no celular e lado a lado no computador.
• Rodapé em colunas no computador e empilhado no celular.
• Mostrar ou esconder algo só no celular ou só no computador (menu, telefone clicável).

Comece aqui

1. 1

   Coloque o SW Core no <head>. Todas as classes com sufixo estão no arquivo principal.

   <link rel="stylesheet" href="swcore/swcore.min.css">

2. 2

   Escreva o comportamento do celular sem sufixo e acrescente o que muda com sufixo. Diminua a largura da janela e veja: 1 por linha → 2 (a partir de 768) → 4 (a partir de 992).

   Corte

   Barba

   Sobrancelha

   Pigmentação

   <div class="l">
     <div class="co12 co6-m co3-g">Corte</div>
     <div class="co12 co6-m co3-g">Barba</div>
     <div class="co12 co6-m co3-g">Sobrancelha</div>
     <div class="co12 co6-m co3-g">Pigmentação</div>
   </div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<div class="l l-2-m l-3-g l-4-gg gap-m">
  <div class="bg-sur bd r-m p-m"><strong class="t-txt">Camiseta</strong><p class="t-p mb-0">R$ 49,90</p></div>
  <div class="bg-sur bd r-m p-m"><strong class="t-txt">Boné</strong><p class="t-p mb-0">R$ 49,90</p></div>
  <!-- … um card por produto -->
</div>

<div class="l l-2-1-m gap-m">
  <article class="bg-sur bd r-m p-g">…</article>   <!-- 2/3 -->
  <aside class="bg-sur bd r-m p-g">…</aside>       <!-- 1/3 -->
</div>

<footer class="l gap-m">
  <div class="co12 co6-m co3-g">Sobre</div>
  <div class="co12 co6-m co3-g">Serviços</div>
  <div class="co12 co6-m co3-g">Contato</div>
  <div class="co12 co6-m co3-g">Redes</div>
</footer>

<a href="tel:+551140028922" sw-btn="suc" class="sw-hide-desktop"><i class="swi-phone"></i> Ligar agora</a>
<span class="sw-hide-mobile t-txt"><i class="swi-phone t-pri"></i> (11) 4002-8922</span>

Precisa de quê

• swcore.min.css — todas as classes desta página.

Cuidados — erros comuns

• O sufixo é sempre "daqui para cima". Não existe "só no celular": escreva o celular sem sufixo e corrija para cima (co12 co6-m).
• Com sufixo, o co só existe em 1 2 3 4 6 12 (as divisões de 12). co8-g, co5-m, co9-p não existem. Para 8+4 no notebook, use co12 co6-m + outra combinação, ou l-2-1-m (2/3 + 1/3).
• O sufixo só funciona nas classes de grade (l-… e co…). Em espaço, texto e cor os mesmos nomes (p-m, t-g) querem dizer tamanho, não tela.
• Hoje l-3-g, l-4-g, l-4-gg e l-6-gg sozinhos ficam errados no tablet (itens espremidos entre 768 px e o degrau deles). Sempre junte um degrau anterior: l-2-m l-4-g, l-3-m l-6-gg.
• Hoje l-2-p e l-2-1-p só viram colunas a partir de 768 px (não de 576). Para 2 colunas já no celular deitado, use co12 co6-p nos filhos.

O que ele não faz

• O degrau -pp (380) e o -xg (1400) existem só para o co…, não para as grades l-….
• Tamanho de texto, espaço e esconder/mostrar não têm versão por degrau (fora sw-hide-mobile/sw-hide-desktop, com corte fixo em 768).