Construye una UI basada en la tarjeta con la Fundación

Sep 16, 2025

Cómo

[dieciséis]

Basado en tarjetas Diseños de sitios web Han tomado la web. Hecho popular por Pinterest, Twitter, Facebook y Google, las tarjetas se han convertido en un patrón de diseño de ir a muchos casos de uso diferentes.

No es difícil ver por qué. Tarjetas funcionan perfectamente dentro diseño web adaptable . Como unidades autónomas, se pueden mover, arrastrarse y mezclarse con diferentes tipos de contenido. También responden fácilmente en diferentes tamaños de pantalla, desde columnas únicas en dispositivos móviles a multi-columna en dispositivos más grandes.

Pasos para el diseño del sitio web perfecto

El equipo de Zurb ha usado diseños basados en tarjetas en su trabajo de diseño durante años. Su Frontend Framework, Foundation, siempre ha buscado equipar a los diseñadores web con las herramientas que necesitan para diseñar y construir rápidamente sitios web receptivos incluyendo una amplia gama de componentes modulares y flexibles. La versión 6.3 agregada a esta colección de bloques de construcción trae una nueva implementación de la nueva implementación, acordeces / pestañas receptivos y un nuevo componente de tarjeta nuevo.

En este tutorial, aprenderemos cómo crear una UI basada en la tarjeta sensible que aproveche la cuadrícula basada en FlexBox de la Fundación para abrir una gran cantidad de posibilidades.

01. Configurar un entorno de desarrollo.

El primer paso es establecer un entorno de desarrollo. Para este tutorial, utilizaremos un entorno de desarrollo basado en nodos, por lo que debe instalar NOde.js.js. Los detalles para hacer esto dependen de su entorno, así que verifique aquí para averiguar qué hacer.

Una vez que haya instalado ningún nodo, instale la CLI de la Fundación usando NPM install -g FOUNDATION-CLI , que facilitará la instalación de un nuevo proyecto de fundación.

02. Inicia un nuevo proyecto.

Vamos a crear un nuevo proyecto basado en la plantilla de Zurb. Ejeclar el comando Fundación New Net-Magazine-Tutorial , seleccione 'Un sitio web (Fundación para sitios)', 'Net-Magazine-Tutorial' y luego plantilla de Zurb. Esto establecerá una plantilla de proyecto basada en la Fundación, completa con sistema de compilación y servidor de desarrollo.

La plantilla viene con una página de muestra en src / páginas / index.html . Para simplificar, eliminaremos esa muestra y lo reemplazaremos con un vacío. & lt; encabezado y gt; & lt; / encabezado y gt; Para comenzar desde cero, construyendo nuestra UI basada en la tarjeta. Correr Inicio de NPM Desde la línea de comandos para ejecutar el servidor de desarrollo, y debe ver una página HTML desnuda lista para tarjetas.

03. Crea una tarjeta

Ahora es el momento de crear nuestra primera tarjeta. Por ahora, seleccionemoslo directamente dentro de una sección con la clase. .Cards-contenedor . Al crear una tarjeta usando la Fundación, hay tres clases principales para ser conscientes de: .tarjeta De Sección. y .card-divider . Para usuarios más avanzados, cada uno de estos corresponde a una mezcla SCSS ( contenedor de cartas De sección de tarjetas y cartulina ).

A simple card with the Foundation Yeti on it, header and footer created using the card-divider class

Pero, para este tutorial utilizaremos las clases predeterminadas para la simplicidad. los .tarjeta clase es el contenedor; Cada tarjeta vivirá dentro de un .tarjeta . Esto define las cosas como las fronteras, las sombras y la coloración predeterminada.

los Sección. clase define un bloque de contenido ampliable, donde podría poner contenido, mientras que el .card-divider La clase define un bloque no en expansión, como un pie de página, encabezado o divisor. Usemos todas estas clases para crear nuestra primera tarjeta básica.

 & lt; encabezado y gt;
  & lt; div clase = "columnas de fila" & gt;
    & lt; h3 & gt; las tarjetas son las mejores & lt; / h3 & gt;
  & lt; / DIV & GT;
& lt; / encabezado y gt;
& lt; sección clase = "tarjetas-contenedor" & gt;
  & lt; div clase = "tarjeta" & gt;
    & lt; div clase = "tarjeta-divisor" & gt;
      & lt; H4 & GT; Yeti Header & Lt; / H4 & GT;
    & lt; / DIV & GT;
    & lt; div clase = "sección de la tarjeta" & gt;
      & lt; img src = "https://foundation.zurb.com/sites/docs/assets/img/yeti.svg" & gt; & lt; / img & gt;
    & lt; / DIV & GT;
    & lt; div clase = "tarjeta-divisor" & gt;
      & lt; p & gt; Yeti Footer & Lt; / P & GT;
    & lt; / DIV & GT;
  & lt; / DIV & GT;
& lt; / Sección y GT;

04. Añadir estilos de componentes

Si solo hacemos esto, nuestra tarjeta será enorme, expandiéndose para llenar toda la pantalla. Vamos a lidiar con el tamaño general en breve, pero por ahora usemos esto como una excusa para aprender a agregar estilos de componentes en la plantilla de Zurb.

Añadir un archivo _card.scsss a SRC / Activos / SCSS / Componentes / especificando un Max-Ancho: 300px por .tarjeta e incluir el archivo en nuestro CSS principales agregando @import componentes / tarjeta; a SRC / Activos / SCSS / App.SCSSS .

05. Haz tus tarjetas reutilizables.

Para crear un diseño repetible con varias tarjetas, querremos que nuestras tarjetas sean componentes reutilizables que podamos enchufar una y otra vez. La plantilla de Zurb que estamos usando para este tutorial utiliza un lenguaje de plantilla llamado manillar, que incluye la capacidad de crear parciales, o bloques reutilizables de código.

Para mover la implementación de nuestra tarjeta en un parcial, simplemente corte y pegue el .tarjeta componente que construimos en un archivo en src / parcials , decir SRC / Parcials / Basic-Card.HTML . A continuación, puede incluir ese contenido simplemente agregando la línea {{& gt; tarjeta básica}} en su archivo de índice.

06. Comience a construir su diseño.

Cubriremos diferentes tipos de tarjetas en un momento, pero primero usemos nuestra tarjeta básica reutilizable para comenzar a crear un diseño más grande y sensible para nuestras tarjetas. Para hacerlo, vamos a usar un concepto de la fundación llamada Grid Block.

La base contiene algunos tipos diferentes de cuadrículas, pero todos comienzan desde el concepto de filas y columnas. Una fila crea un bloque horizontal que puede contener múltiples columnas verticales. Estos bloques de construcción básicos conforman el núcleo de casi todos los diseños.

With a simple block grid, we already have a beautiful, scalable layout for as many cards as we want to include

Las redes de bloques son una forma de taquigrafía para crear columnas de tamaño igualmente y permitirse la flexibilidad y la libertad de agregar una cantidad de contenido indefinida y tenerla bien en las columnas iguales. Simplemente agregue una clase a la fila y luego agregue tantos componentes de columna que desee. La Fundación los tendrá para usted para usted de forma pule y limpia.

Como esperamos tener un número muy grande y cambiante de tarjetas, esto es ideal para nuestros propósitos. Vamos a configurarlo rápidamente en una cuadrícula de cuatro columnas y agregue unas cuantas docenas de tarjetas. Por ahora solo nos preocuparemos por las pantallas grandes, por lo que simplemente aplicaremos el .large-up-4 clase a la fila.

 & lt; sección clase = "tarjetas-contenedor" & gt;
& lt; div clase = "fila grande-up-4" & gt;
{{#repeat 24}}
& lt; div clase = "columna" & gt;
{{& gt; tarjeta básica}}
& lt; / DIV & GT;
{{/repetir}}
& lt; / DIV & GT;
& lt; / Sección y GT;

07. Hacerlo respondido

A continuación, consideremos lo que queremos suceder en diferentes tamaños de pantalla. La base viene con pocos interrupciones pequeñas, medianas y grandes incorporadas, por lo que podemos simplemente aplicar una clase de bloques de bloque diferente para cada punto de interrupción para cambiar las cosas.

Vamos a colocar una tarjeta por fila en pantallas móviles, y tres por fila en la tableta, agregando las clases .small-up-1 y .medium-up-3 en la fila. Si hacemos esto, y eliminamos el paro. anchura máxima propiedad que ponemos _card.scsss . Ya tenemos un diseño bellamente sensible que se ve bien en todos los tamaños de pantalla.

08. Prueba algunos nuevos tipos de tarjetas.

Combine different styles of card to build your layout

Ahora vamos a diversificar nuestro conjunto de cartas, otro tipo es una foto de borde a borde puro. Las secciones de tarjetas y los divisores de tarjetas contienen relleno de forma predeterminada, pero para tener contenido de borde a borde, podemos simplemente poner la imagen directamente dentro de la tarjeta. Vamos a agregar esto como un foto-cartas.html parcial en src / parcials .

 & lt; div clase = "tarjeta" & gt;
& lt; img src = "http://foundation.zurb.com/assets/img/foundation-emails/inky-all-devices.svg" / & gt;
& lt; / DIV & GT;

09. Introducir FlexBox

Hay cientos de formas posibles que podemos juntar tarjetas, para una inspiración, puedes consultar la Fundación repositorio de cardpack . Pero sigamos adelante a cómo manejamos el diseño cuando tenemos tarjetas de tamaño diferente. Si inserta la tarjeta foto parcial en el diseño que se alterna con la tarjeta básica como lo hicimos antes, terminamos con un poco de experiencia jaggada porque nuestras alturas son diferentes. Esto puede estar bien, o podemos querer ajustar nuestro diseño para compensar.

The Foundation card pack gives you a great set of pre-built Flexbox cards to level up your card game

Para este tutorial, compensaremos utilizando nuestra nueva técnica de diseño de CSS favorita: FlexBox. La base viene con un modo FlexBox para su cuadrícula. Para habilitarlo, simplemente necesita abrir SRC / Activos / SCSS / App.SCSSS , comentar @Include Foundation-Grid; y @Include Foundation-Float-Classes; y el des comentario @Include Foundation-Flex-Grid; y @Include Foundation-Flex-Classes; .

10. Haz tus tarjetas de la misma altura.

Con las clases de FlexBox habilitadas, es fácil hacer que nuestras tarjetas tengan la misma altura. Primero, podemos hacer que nuestras columnas flexionen a los padres agregando el .flex-contenedor clase. Este es un acceso directo de prototipos para agregar el PANTALLA: FLEX; Propiedad para ellos. Una vez que hagamos esto, todas las cartas se convertirán en la misma altura, pero como los elementos infantiles flexibles se reducen de forma predeterminada, algunas de nuestras tarjetas obtienen un poco estrechas.

Podemos solucionar este problema simplemente diciendo que los elementos crezcan. Esto se hace para dirigirlos con CSS y darles. Flex-crecer: 1; o por simplicidad mientras prototipos, solo agregando la clase .flex-infantil crecer . Una vez que todo esto se haya hecho, todas nuestras tarjetas llenan las columnas y tendrán una gran altura.

Este artículo fue originalmente destacado en revista neta Número 293. Cómpralo aquí o Suscríbete a la red aquí .

¿Me gusto esto? Prueba estos ...

10 razones por las que debería estar usando el diseño atómico
Crea y anima los polígonos SVG.
CSS trucos para revolucionar tus diseños.

Construye una UI basada en la tarjeta con la Fundación

01. Configurar un entorno de desarrollo.

02. Inicia un nuevo proyecto.

03. Crea una tarjeta

04. Añadir estilos de componentes

05. Haz tus tarjetas reutilizables.

06. Comience a construir su diseño.

07. Hacerlo respondido

08. Prueba algunos nuevos tipos de tarjetas.

09. Introducir FlexBox

10. Haz tus tarjetas de la misma altura.

Cómo - Artículos más populares

8 Características de la CSS de última generación (y cómo usarlas)

Cómo crear escaneos 3D con captura de realidad

Cómo configurar un entorno de desarrollo local

10 Reglas para hacer formularios web fáciles de usar

Agregue animaciones de UI a su sitio

Crea una sensación de pintura en tu arte digital

Crea una aplicación que recopila datos del sensor

Documentar sus sistemas de diseño con Fractal

Categorías