Construa uma interface do usuário baseada em cartão com a Fundação

Jan 23, 2026

Como

Baseado em cartão layouts de site assumiram a web. Feito popular por Pinterest, Twitter, Facebook e Google, cartões tornaram-se um padrão de design para muitos casos de uso diferente.

Não é difícil ver o porquê. Cartões funcionam perfeitamente dentro web design responsivo . Como unidades autônomas, elas podem ser movidas, embaralhadas e misturadas com diferentes tipos de conteúdo. Eles também respondem facilmente em diferentes tamanhos de tela, desde colunas únicas em dispositivos móveis para multi-coluna em dispositivos maiores.

Etapas para o layout do site perfeito

A equipe de Zurb usou layouts baseados em cartão em seu trabalho de design por anos. Sua estrutura de frontend, Foundation, sempre procurou equipar web designers com as ferramentas que precisam para projetar e criar sites responsivos, incluindo uma ampla gama de componentes modulares e flexíveis. A versão 6.3 foi adicionada a esta coleção de blocos de construção traz uma nova implementação fora da tela, acordeões / guias responsivas e um poderoso componente de cartão novo.

Neste tutorial, estaremos aprendendo a criar uma interface do usuário baseada em cartões responsiva que aproveita a grade baseada em flexbox da Fundação para abrir uma série de possibilidades inteiras.

01. Configure um ambiente de desenvolvimento

O primeiro passo é configurar um ambiente de desenvolvimento. Para este tutorial, estaremos usando um ambiente de desenvolvimento baseado em nó, então você precisa instalar o Node.js. Os detalhes para fazer isso dependem do seu ambiente, então verifique aqui para descobrir o que fazer.

Depois de ter o nó instalado, instale a Fundação CLI usando NPM install -g fundaation-cl , o que facilitará a configuração de um novo projeto de fundação.

02. Inicie um novo projeto

Vamos criar um novo projeto baseado no modelo de ZUB. Execute o comando Fundação New Net-Magazine-Tutorial , selecione 'um site (fundação para sites)', 'Net-Magazine-Tutorial' e depois Modelo de Zurb. Isso configurará um modelo de projeto com base na fundação, completada com sistema de construção e servidor de desenvolvimento.

O modelo vem com uma página de amostra em SRC / páginas / index.html . Para simplificar, vamos remover essa amostra e substituí-la por um vazio & lt; cabeçalho e gt; & lt; / header & gt; Para começar a partir do arranhão, construindo a UI baseada em cartão. Corre iniciar o npm. Na linha de comando para executar o servidor de desenvolvimento, e você deve ver uma página HTML nua pronta para cartões.

03. Crie um cartão

Agora é hora de criar nosso primeiro cartão. Por enquanto, vamos apenas colocá-lo diretamente dentro de uma seção com a aula contêiner . Ao criar um cartão usando a Fundação, há três classes principais para estar ciente de: .cartão , secção e .Card-divider. . Para usuários mais avançados, cada um deles corresponde a um SCSS Mixin ( Recipiente de cartão , Seção de cartão e Divisor de cartão ).

A simple card with the Foundation Yeti on it, header and footer created using the card-divider class — Um cartão simples com a fundação Yeti, cabeçalho e rodapé criado usando a classe Divider Card

Mas, para este tutorial, usaremos as classes padrão para simplificar. O .cartão aula é o recipiente; Cada cartão viverá dentro de um .cartão . Isso define coisas como bordas, sombras e coloração padrão.

O secção classe define um bloco de conteúdo expansível, onde você pode colocar conteúdo, enquanto o .Card-divider. Classe define um bloco não expandindo, como um rodapé, cabeçalho ou divisor. Vamos usar todas essas classes para criar nosso primeiro cartão básico.

 & lt; cabeçalho e gt;
  & lt; div class = "colunas de linha" & gt;
    Cartões H3 & GT são os melhores & lt; / h3 & gt;
  & lt; / div & gt;
& lt; / header & gt;
& lt; seção class = "cartões-contêiner" & gt;
  & lt; div classe = "cartão" & gt;
    & lt; div classe = "cartão-divisor" & gt;
      & lt; h4 & gt; yeti header & lt; / h4 & gt;
    & lt; / div & gt;
    & lt; div classe = "Card-seção" & gt;
      & lt; img src = "https://foundation.zurb.com/sites/docs/assets/img/yeti.svg" & gt; & lt; / img & gt;
    & lt; / div & gt;
    & lt; div classe = "cartão-divisor" & gt;
      & lt; p & gt; yeti rodapé & lt; / p & gt;
    & lt; / div & gt;
  & lt; / div & gt;
& lt; / seção & gt;

04. Adicionar estilos de componentes

Se fizermos isso, nosso cartão será enorme, expandindo para preencher a tela inteira. Vamos lidar com o dimensionamento geral em breve, mas por enquanto vamos usar isso como uma desculpa para aprender a adicionar estilos de componentes no modelo de ZUB.

Adicione um arquivo _card.scss. para SRC / Ativos / SCSs / Componentes / Especificando A. Largura máxima: 300px pra .cartão e incluir o arquivo em nosso CSS principal adicionando @Import componentes / cartão; para SRC / Ativos / SCSs / App.scss .

05. Faça seus cartões reutilizáveis

Para criar um layout repetível com vários cartões, vamos querer que nossas cartas sejam componentes reutilizáveis que possamos conectar uma e outra vez. O modelo de ZURUL que estamos usando para este tutorial usa um idioma de modelos chamado guidão, que inclui a capacidade de criar parciais ou blocos reutilizáveis de código.

Para mover nossa implementação de cartão em um parcial, simplesmente corte e cole .cartão componente nós embutimos em um arquivo em src / parcials. , dizer SRC / Partials / Basic-card.html . Você pode incluir esse conteúdo simplesmente adicionando a linha {{& gt; Cartão Básico}} no seu arquivo de índice.

06. Comece a construir seu layout

Nós cobriremos diferentes tipos de cartão em um pouco, mas primeiro vamos usar nosso cartão básico reutilizável para começar a criar um layout maior e responsivo para nossos cartões. Para fazer isso, vamos usar um conceito da Fundação chamada The Block Grid.

Fundação contém alguns tipos diferentes de grades, mas todos começam do conceito de linhas e colunas. Uma linha cria um bloco horizontal que pode conter várias colunas verticais. Estes blocos de construção básicos compõem o núcleo de quase todos os layouts.

With a simple block grid, we already have a beautiful, scalable layout for as many cards as we want to include — Com uma rede de bloco simples, já temos um layout bonito e escalável para quantas cartas quisermos incluir

As grades de bloco são uma maneira abreviada para criar colunas de tamanho igualmente e permitir que a flexibilidade e a liberdade para adicionar uma quantidade indefinida de conteúdo e dê-la bem em colunas iguais. Você simplesmente adiciona uma classe à linha e adiciona quantos componentes de coluna quiser. A fundação os estabelecerá para você de forma limpa e limpa.

Como esperamos ter um número muito grande e mutável de cartas, isso é ideal para nossos propósitos. Vamos configurar isso rapidamente em uma grade de quatro colunas e adicionar algumas dúzias de cartões. Por enquanto, nos preocuparemos apenas com telas grandes, então simplesmente aplicaremos o .large-up-4 classe para a linha.

 & lt; seção class = "cartões-contêiner" & gt;
& lt; div classe = "Row Grande-up-4" & gt;
{{#repeat 24}}
& lt; div class = "coluna" & gt;
{{& gt; Cartão Básico}}
& lt; / div & gt;
{{/repita}}
& lt; / div & gt;
& lt; / seção & gt;

07. Faça responsivo

Em seguida, vamos considerar o que queremos acontecer em tamanhos de tela diferentes. Fundação vem com pequenos, médios e grandes pontos de interrupção embutidos, para que possamos simplesmente aplicar uma classe diferente de grade para cada ponto de interrupção para mudar as coisas.

Vamos colocar um cartão por linha nas telas móveis e três por linha no tablet, adicionando as classes .small-up-1 e .medium-up-3 na fila. Se fizermos isso, e removermos o spotGap largura máxima propriedade que colocamos _card.scss. . Nós já temos um layout lindamente responsivo que fica bem em todos os tamanhos de tela.

08. Tente alguns novos tipos de cartão

Combine different styles of card to build your layout — Combine diferentes estilos de cartão para construir seu layout

Agora vamos diversificar nosso conjunto de cartas, outro tipo é uma foto de borda pura. Seções do cartão e divisores de cartão contêm preenchimento por padrão, mas para ter conteúdo de borda para borda, podemos simplesmente colocar a imagem diretamente dentro do cartão. Vamos adicionar isso como um foto-card.html. parcial dentro src / parcials. .

 & lt; div classe = "cartão" & gt;
& lt; img src = "http://foundation.zurb.com/assets/img/foundation-Emails/inky-all-devices.svg" / & gt;
& lt; / div & gt;

09. Introduzir Flexbox.

Há centenas de maneiras possíveis que podemos colocar cartões - por alguma inspiração, você pode conferir a fundação Repositório de cardpack. . Mas vamos seguir em frente a como gerenciamos layout quando temos cartões de tamanho diferente. Se você inserir a foto-cartão parcial no layout alternando com o cartão básico como fizemos antes, acabamos com um pouco de uma experiência irregular porque nossas alturas são diferentes. Isso pode ser bom, ou podemos querer ajustar nosso layout para compensar.

The Foundation card pack gives you a great set of pre-built Flexbox cards to level up your card game — O pacote de cartão Foundation oferece um ótimo conjunto de cartões de flexbox pré-construídos para nivelar seu jogo de cartas

Para este tutorial, vamos compensar usando nossa nova técnica de layout CSS favorita - Flexbox. Fundação vem com um modo Flexbox para sua grade. Para ativá-lo, você simplesmente precisa abrir SRC / Ativos / SCSs / App.scss , comentário para fora @include fundação-grade; e @include fundação-float-classes; e descomente. @include Foundation-Flex-Grid; e @include fundação-flex-flex; .

10. Faça suas cartas da mesma altura

Com as classes Flexbox habilitadas, é simples que nossos cartões sejam a mesma altura. Primeiro, podemos fazer com que nossas colunas flexem pais adicionando o .flex-contenter. aula. Este é um atalho de prototipagem para adicionar o Exibir: flex; propriedade para eles. Uma vez que fazemos isso, todos os cartões vão se tornar a mesma altura, mas desde os elementos flexionais flexíveis encolhem por padrão, algumas de nossas cartas ficam meio estreitas.

Podemos consertar esse problema simplesmente dizendo a esses elementos. Isso é feito para direcioná-los com CSS e dando-lhes Flex-Crescer: 1; ou para simplicidade enquanto prototipagem, apenas adicionando a classe .flex-child-cresion . Uma vez que tudo isso tenha sido feito todas as nossas cartas preencha as colunas e será bem a mesma altura.

Este artigo foi originalmente destaque em Revista Net. edição 293. Compre aqui ou Inscreva-se na NET AQUI .

Gostou disso? Tente esse...

10 razões que você deve estar usando design atômico
Criar e animar polígonos svg
Truques CSS para revolucionar seus layouts

Construa uma interface do usuário baseada em cartão com a Fundação

01. Configure um ambiente de desenvolvimento

02. Inicie um novo projeto

03. Crie um cartão

04. Adicionar estilos de componentes

05. Faça seus cartões reutilizáveis

06. Comece a construir seu layout

07. Faça responsivo

08. Tente alguns novos tipos de cartão

09. Introduzir Flexbox.

10. Faça suas cartas da mesma altura

Como - Artigos mais populares

Cinema 4D Tutoriais: 13 dos melhores

Como acelerar e otimizar os sites do WordPress

Comece com a Adobe Dimension CC

Criar efeitos de colagem no navegador com CSS

Criar acabamentos especiais de impressão no InDesign

Como criar obras de arte estilizadas

Como o Snapping funciona em aplicativos 3D

Uma introdução ao teste de frontend

Categorias