Tamaño básico de la tarjeta CSS

Posted on by Rudeus Greyrat

Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a SaaS. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.

El uso de tarjetas en un sitio web mejora la experiencia del usuario. Foundation CSS nos brinda una tarjeta de estilo de base que se puede usar de acuerdo con nuestras necesidades. A veces, podemos querer cambiar el tamaño y la forma de la tarjeta. Foundation CSS nos permite cambiar el tamaño de la tarjeta usando varias clases reservadas.

Clases de tamaño de tarjeta Foundation CSS: 

  • tarjeta: crea un contenedor que contiene el contenido de la tarjeta.
  • card-divider: Crea una sección con un fondo más oscuro, dividiéndola del resto del contenido de la tarjeta.
  • card-section: Cree una sección que contenga la información de la tarjeta.
  • small-n: “n” toma un valor entre 1 y 11 y dimensiona la tarjeta en consecuencia. Se especifica en cada tarjeta de forma explícita.
  • medium-n: “n” toma un valor entre 1 y 11 y dimensiona la tarjeta en consecuencia. Se especifica en cada tarjeta de forma explícita.
  • large-n: «n» toma un valor entre 1 y 11 y dimensiona la tarjeta en consecuencia. Se especifica en cada tarjeta de forma explícita.
  • small-up-n: las tarjetas “n” se colocan en una fila para pantallas de menor tamaño.
  • medium-up-n: las tarjetas “n” se colocan en una fila para pantallas medianas.
  • large-up-n: las tarjetas “n” se colocan en una fila para pantallas de gran tamaño.

Sintaxis: 

 Para el tamaño explícito de la tarjeta:

<div class="cell explicit-card-size-class">
    <div class="card">
        ...
    </div>
</div>

Para el tamaño de la tarjeta de respuesta:

<div class="grid-x small-up-n
                   medium-up-n 
                   large-up-n">
    <div class="cell">
        <div class="card">
            ...
        </div>
    </div>
    ...
</div>

Ejemplo 1: cambiar los tamaños de las tarjetas especificando explícitamente los tamaños.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Foundation CSS Card Sizing</title>
    <link rel="stylesheet"
          href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
            crossorigin="anonymous">
    </script>
    <link rel="stylesheet"
          href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
</head>
 
<body class="grid-x align-middle align-center grid-container"
      style="height:95vh;width:95vw;">
 
    <div class="grid-container">
        <h2 style="color: green">GeekforGeeks</h2>
        <h4>Foundation CSS Card Sizing</h4>
        <div class="grid-x grid-margin-x">
 
            <div class="cell medium-3">
                <div class="card">
                    <h5 class="card-divider">Left Card</h5>
                    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210310114057/web-development-image.png">
                    <div class="card-section">
                        <h4>I am a medium sized card</h4>
                         
<p>I am styled explicitly</p>
 
                    </div>
                </div>
            </div>
            <div class="cell large-6">
                <div class="card">
                    <h5 class="card-divider">Middle Card</h5>
                    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210310114057/web-development-image.png">
                    <div class="card-section">
                        <h4>I am a large sized card</h4>
                         
<p>I am styled explicitly</p>
 
                    </div>
                </div>
            </div>
 
            <div class="cell medium-3">
                <div class="card">
                    <h5 class="card-divider">Right Card</h5>
                    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210310114057/web-development-image.png">
                    <div class="card-section">
                        <h4>I am a medium sized card</h4>
                         
<p>I am styled explicitly</p>
 
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</body>
</html>

Producción:

Foundation CSS Card Sizing

Dimensionamiento de tarjetas por medios explícitos

Ejemplo 2: Tamaño de tarjeta sensible, que coloca 2 tarjetas en pantallas pequeñas, 3 tarjetas en pantallas medianas y 4 tarjetas en pantallas grandes.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Foundation CSS Card Sizing</title>
    <link rel="stylesheet"
          href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
          crossorigin="anonymous">
    </script>
    <link rel="stylesheet"
          href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
</head>
 
<body class="grid-x align-middle align-center grid-container"
      style="height:95vh;width:95vw;">
 
    <div class="grid-container">
        <h2 style="color: green">GeekforGeeks</h2>
        <h4>Foundation CSS Card Sizing</h4>
 
        <div class="grid-x grid-margin-x small-up-2 medium-up-3 large-up-4">
            <div class="cell">
                <div class="card">
                    <h5 class="card-divider">Card Title</h5>
                    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210310114057/web-development-image.png">
                    <div class="card-section">
                        <h4>Name of Card</h4>
                         
<p>Responsively Styled</p>
 
 
                    </div>
                </div>
            </div>
            <div class="cell">
                <div class="card">
                    <h5 class="card-divider">Card Title</h5>
                    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210310114057/web-development-image.png">
                    <div class="card-section">
                        <h4>Name of Card</h4>
                         
<p>Responsively Styled</p>
 
                    </div>
                </div>
            </div>
            <div class="cell">
                <div class="card">
                    <h5 class="card-divider">Card Title</h5>
                    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210310114057/web-development-image.png">
                    <div class="card-section">
                        <h4>Name of Card</h4>
                         
<p>Responsively Styled</p>
 
                    </div>
                </div>
            </div>
            <div class="cell">
                <div class="card">
                    <h5 class="card-divider">Card Title</h5>
                    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210310114057/web-development-image.png">
                    <div class="card-section">
                        <h4>Name of Card</h4>
                         
<p>Responsively Styled</p>
 
                    </div>
                </div>
            </div>
            <div class="cell">
                <div class="card">
                    <h5 class="card-divider">Card Title</h5>
                    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210310114057/web-development-image.png">
                    <div class="card-section">
                        <h4>Name of Card</h4>
                         
<p>Responsively Styled</p>
 
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</body>
</html>

Producción:

Foundation CSS Card Sizing

Tamaño básico de la tarjeta CSS

Referencia: https://get.foundation/sites/docs/card.html#sizing

Publicación traducida automáticamente

Artículo escrito por tejsidda34 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *