Primer CSS Blankslate

Posted on by Rudeus Greyrat

Primer CSS es un framework CSS gratuito y de código abierto. Se basa en los sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Creado con el sistema de diseño de GitHub, es altamente reutilizable y flexible.

Primer CSS Blankslate se utiliza como marcador de posición cuando falta contenido y se notifica al usuario sobre la causa. Las pizarras en blanco se utilizan para toda la página o para una sola sección. Cuando un usuario no está permitido en alguna sección. las pizarras en blanco ayudan a reconocer al usuario sobre la causa y la acción a tomar.

Primer CSS Blankslate Classes:

  • hoja en blanco : es la clase contenedora externa que contiene el contenido de la hoja en blanco.
  • blankslate-heading : Es la clase de encabezado para blankslate.
  • blankslate-icon: Se utiliza para añadir iconos a la pizarra en blanco.
  • blankslate-image : Se utiliza para agregar imágenes a la pizarra en blanco.
  • blankslate-action : la clase se agrega a la acción como un botón o enlaces.
  • blankslate-narrow : Estrecha la pizarra para no ocupar todo el ancho del contenedor en el que se coloca.
  • blankslate-large: Tiene un tamaño de fuente más grande dentro de la pizarra en blanco.
  • blankslate-spacious : Aumenta el relleno vertical.
  • cuadro : se utiliza para agregar un borde a la pizarra en blanco.
  • capped : Hace que el border-radius sea cero.

Primer CSS Tipos de pizarra en blanco:

  • Hoja en blanco básica: contiene una hoja en blanco de envoltura con un encabezado de hoja en blanco.
  • Con Oticons : Contiene un wrapper en blanco con un encabezamiento en blanco con iconos.
  • Con Gráfico, Botón y Enlace: La pizarra en blanco contiene imágenes y acciones como botones y enlaces.
  • Pizarra en blanco estrecha : la pizarra en blanco es de tamaño estrecho y no ocupa todo el ancho del contenedor.
  • Pizarra en blanco grande : el tamaño de fuente del texto dentro de la pizarra en blanco es más grande en comparación con la pizarra en blanco normal.
  • Espaciosa pizarra en blanco : el relleno vertical del texto dentro de la pizarra en blanco es más grande en comparación con la pizarra en blanco normal.
  • Pizarra en blanco bordeada : la pizarra en blanco tiene un borde alrededor.
  • Pizarra en blanco tapada : la pizarra en blanco tiene un radio de borde cero en sus esquinas.

Sintaxis : Cree una hoja en blanco de la siguiente manera:

<div class="blankslate">
  <h3 class="blankslate-heading">
    Welcome to GeeksforGeeks
  </h3>
  <p>A computer science portal for geeks.</p>
</div>

Ejemplo 1 : En el siguiente ejemplo, tenemos una pizarra en blanco básica.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0" />
    <title>GeeksforGeeks | Primer CSS</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
</head>
<body>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">GeeksforGeeks</h1>
            </div>
            <strong>Primer CSS Blankslate</strong>
            <br />
            <br />
        </center>
        <div class="blankslate">
            <h3 class="blankslate-heading">
                Welcome to GeeksforGeeks
            </h3>
            <p>A computer science portal for geeks.</p>
        </div>
    </div>
</body>
</html>

Producción:

 

Ejemplo 2 : En el siguiente ejemplo, tenemos una pizarra en blanco con imagen y acción.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0" />
    <title>GeeksforGeeks | Primer CSS</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
</head>
<body>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">GeeksforGeeks</h1>
            </div>
            <strong>Primer CSS Blankslate</strong>
            <br />
            <br />
        </center>
        <div class="blankslate">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                class="blankslate-image" />
            <h3 class="blankslate-heading">
                Welcome to GeeksforGeeks
            </h3>
            <p>A computer science portal for geeks.</p>
            <div class="blankslate-action">
                <button class="btn btn-primary" 
                    type="button">
                    Ok
                </button>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

 

Ejemplo 3: En el siguiente ejemplo, tenemos una hoja en blanco angosta, una hoja en blanco grande y una hoja en blanco espaciosa.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0" />
    <title>GeeksforGeeks | Primer CSS</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
</head>
<body>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">GeeksforGeeks</h1>
            </div>
            <strong>Primer CSS Blankslate</strong>
            <br />
            <br />
        </center>
        <div class="blankslate blankslate-narrow">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                class="blankslate-image" />
            <h3 class="blankslate-heading">
                Welcome to GeeksforGeeks
            </h3>
            <p>A computer science portal for geeks.</p>
            <p>It is a narrow blankslate</p>
            <div class="blankslate-action">
                <button class="btn btn-primary" type="button">
                    Ok
                </button>
            </div>
        </div>
        <div class="blankslate blankslate-large">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                class="blankslate-image" />
            <h3 class="blankslate-heading">
                Welcome to GeeksforGeeks
            </h3>
            <p>A computer science portal for geeks.</p>
            <p>It is a large blankslate</p>
            <div class="blankslate-action">
                <button class="btn btn-primary" type="button">
                    Ok
                </button>
            </div>
        </div>
        <div class="blankslate blankslate-spacious">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                class="blankslate-image" />
            <h3 class="blankslate-heading">
                Welcome to GeeksforGeeks
            </h3>
            <p>A computer science portal for geeks.</p>
            <p>It is a spacious blankslate</p>
            <div class="blankslate-action">
                <button class="btn btn-primary" type="button">
                    Ok
                </button>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

 

Ejemplo 4: En el siguiente ejemplo, tenemos pizarra en blanco bordeada y pizarra en blanco tapada.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0" />
    <title>GeeksforGeeks | Primer CSS</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
</head>
<body>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">GeeksforGeeks</h1>
            </div>
            <strong>Primer CSS Blankslate</strong>
            <br />
            <br />
        </center>
        <div class="Box">
            <div class="blankslate">
                <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                    class="blankslate-image" />
                <h3 class="blankslate-heading">
                    Welcome to GeeksforGeeks
                </h3>
                <p>A computer science portal for geeks.</p>
                <p>It is a bordered blankslate</p>
                <div class="blankslate-action">
                    <button class="btn btn-primary" type="button">
                        Ok
                    </button>
                </div>
            </div>
        </div>
        <br />
        <div class="Box rounded-top-0">
            <div class="blankslate">
                <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                    class="blankslate-image" />
                <h3 class="blankslate-heading">
                    Welcome to GeeksforGeeks
                </h3>
                <p>A computer science portal for geeks.</p>
                <p>It is a capped blankslate</p>
                <div class="blankslate-action">
                    <button class="btn btn-primary" type="button">
                        Ok
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

 

Referencia: https://primer.style/css/components/blankslate/

Publicación traducida automáticamente

Artículo escrito por manavsarkar07 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 *