Um par de semanas atrás, o famoso Quadro de fundação lançou sua quarta versão. Se você nunca ouviu falar da Foundation, vamos guiá-lo usando essa estrutura responsiva.

Desde que a versão 3 do Foundation foi construída do zero usando o SASS - um pré-processador de CSS que ajuda na criação de CSS mais eficiente - esta nova versão também é otimizada para dispositivos móveis e fornece muitos recursos em sua grade que você não usa. obter de outras estruturas.

Vamos mergulhar na Foundation e ver porque é tão popular…

A grade

A Foundation usa uma grade aninhada de 12 colunas que se adapta a qualquer tela de tamanho, se você já usou grades, tudo isso deve ser muito familiar para você. Todos os divs da Foundation usam o box-sizing: border-box para que as bordas e o preenchimento não afetem a largura e a altura do elemento, tornando a matemática um pouco mais fácil para nós. Mas a coisa surpreendente sobre a grade da Fundação é que você realmente tem 2 grades, uma grade grande para quando a tela é maior do que 768px de largura e uma grade menor que você pode controlar simplesmente. Para esse fim, a Foundation usa as classes # pequena e # grande, assim:

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

Neste código, criamos uma linha na qual existem 3 divs com a mesma largura exata quando o navegador é maior que 768px, mas quando é menor, como você pode ver por essa pequena classe nos divs, o último ocupará metade do tela, enquanto os outros dois ocuparão 25% cada, isso lhe dará um imenso controle de como o nosso site ficará em todas as telas.

A fundação também permite que você compense uma coluna, o que significa que você pode ter uma linha com 2 colunas com apenas 3 colunas de largura, mas você pode compensar a segunda que flutua para a direita e para fazer isso usamos a grande escala. classe de deslocamento ou a classe de deslocamento pequeno:

3, offset 6

Grade de bloco

A grade de blocos é apenas um pequeno extra, é uma maneira de dividir o conteúdo de uma lista dentro da grade. É útil quando você deseja que essa parte específica do seu site permaneça espaçada, independentemente do tamanho do site. navegador. Esse tipo de grade usa as classes small-block-grid e large-block-grid, se você definir apenas o primeiro, a grade manterá o espaçamento desejado, não importando qual seja a viewport, mas se você usar somente o bloco grande Quando a viewport atinge o ponto de interrupção de 768px, os itens da grade serão empilhados em cima uns dos outros, você sempre pode ter mais controle usando as duas classes, da seguinte forma:

Usando isso, as imagens serão espaçadas uniformemente, não importando o tamanho. Quando a viewport é maior que 768px, eles ocuparão apenas uma linha, e quando ela for menor, ocuparão duas linhas com 2 imagens cada.

A navegação principal

Agora que abordamos a grade na Foundation e como ela fornece bastante controle em todos os ambientes, falaremos sobre algo que quase sempre usaremos em nossos sites: uma barra de navegação superior. E, claro, essa navegação também pode ser flexível, com pouco ou nenhum trabalho usando essa estrutura. Para criar uma navegação responsiva simples usando o Foundation, use:

Esse bit de HTML cria uma barra de navegação simples que tem o título do site à esquerda e depois à direita tem quatro itens de menu. Observe também que, quando a viewport for menor que 768px, este menu será substituído por um ícone de lista, tornando este menu responsivo. Se você quiser que esta grade tenha sua posição fixa enquanto você rola a página, você só precisa envolvê-la em um div com uma classe fixa. Para adicionar menus suspensos à sua navegação, basta adicionar algo assim ao local em que você deseja seu menu suspenso:

#">  Submenu Item 1
Submenu Item 1
Submenu Item 3

Há também a capacidade de adicionar um divisor ao seu item de lista, adicionando uma pequena linha vertical cinza, para fazer isso você só precisa colocar um item de lista com a classe de divisor entre os dois itens da lista que você deseja dividir.

Botões

Nenhum framework seria completo sem alguns botões pré-definidos e o Foundation na verdade tem mais de um estilo de botão predefinido, ele tem o padrão que usa uma cor azul e então adiciona os estilos de sucesso, alerta e secundário. Adicionando a classe de raio, você dá a este botão um pouco de raio de borda e, dando-lhe a classe de arredondamento, você torna o botão quase inteiramente redondo. Você também pode adicionar a classe desativada ao botão e existem 4 classes de tamanho para tornar o botão tão grande quanto você precisar.

Botão PadrãoBotão minúsculoPequeno botãoBotão GrandeBotão SecundárioBotão SucessoBotão de alertaBotão RadiusBotão redondoBotão desativado

Para criar um botão suspenso simples, você só precisa adicionar a classe suspensa depois da última aula, assim:

  h1.subheader 
  h1.  Menor 
  Item de lista 
  Item de lista 
  Link 1
Link 2

Como você pode ver, quando se trata de tipografia, a Foundation nos fornece uma ajuda básica e, em seguida, algumas classes adicionais para atender a todas as nossas necessidades.

Outros componentes

Se esta demonstração da estrutura da Foundation tiver aguçado seu apetite para aprender mais e começar a construir com Foundation, você deve realmente dar uma olhada na documentação, pois a Foundation também oferece componentes CSS adicionais, tais como:

• Caixas de Alerta
• Painéis
• Tabelas de Preços
• Barras de Progresso
• Tabelas
• Miniaturas
• Flex Video

E também alguns JavaScript auxiliares como:

• Compensação
• Suspenso
• Joyride
• Magalhães
• Órbita
• Revelar
• Seção
• Dicas de ferramentas

Como você pode ver, há muito Foundation para explorar e eu recomendo fortemente que você olhe para todas as suas propriedades CSS e JavaScript.

Conclusão

Cobrimos apenas o suficiente neste artigo para ver como a Foundation pode ajudar a criar sites mais rápidos e mais responsivos, usando sua grade você obtém muito mais controle sobre a estrutura do seu site do que ao usar uma grade flexível normal e a Foundation também oferece vários ajudantes para criar seu site. Espero que este artigo tenha lhe dado o impulso de aprender e usar o Foundation para seu próximo projeto.

Você já usou Foundation para um projeto? Quais recursos você achou mais úteis? Deixe-nos saber nos comentários.