Primer CSS Responsive Borders

Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.

Un borde es un componente que se utiliza para crear bordes de varias formas, tamaños y estilos. En Primer CSS, tenemos algunas clases para hacer que el borde responda de acuerdo con el tamaño de la pantalla. En este artículo, discutiremos los bordes receptivos de Primer CSS .

Clases de borde receptivas de Primer CSS:

  • border-(sm|md|lg|xl): esta clase, cuando se aplica a cualquier elemento, agrega un borde en todos los lados de ese elemento si se ve en el punto de interrupción o por encima de él. 
  • border-(sm|md|lg|xl)-0: esta clase, cuando se aplica a cualquier elemento, elimina el borde en todos los lados de ese elemento si se ve en el punto de interrupción o por encima de él.
  • border-(sm|md|lg|xl)-(top|right|bottom|left): esta clase, cuando se aplica a cualquier elemento, agrega un borde a un lado específico cuando se ve en el punto de interrupción o por encima de él.
  • border-(sm|md|lg|xl)-(top|right|bottom|left)-0: esta clase, cuando se aplica a cualquier elemento, elimina el borde de un lado específico cuando se ve en el punto de interrupción o por encima de él.

Sintaxis:

<div class="Responsive-Borders-Classes">
   ...
</div> 

Nota: aquí mostramos la sintaxis con la etiqueta <div> , pero puede agregar un borde a cualquier elemento como un botón, un párrafo, etc. 

Ejemplo 1: hemos creado un contenedor que tiene bordes en todos los lados para una pantalla mediana y no tiene borde en la parte superior para una pantalla grande.

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">
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2> Responsive Border </h2>
      
    <div class="border-md border-lg-top-0" 
         style="width: 300px; height: 250px; 
                margin: 1.5em;">
        This is the sample container element.
    </div>
</body>
  
</html>

Producción:

Primer CSS Responsive Borders

Ejemplo 2: hemos creado un borde receptivo para un contenedor que tendrá un borde solo en la parte inferior para pantallas grandes y bordes en todos los lados para pantallas extragrandes.

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">
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2> Responsive Border </h2>
  
    <div class="border-lg-bottom border-xl" 
         style="width: 300px; height: 250px; 
                margin: 1.5em;">
        This is the sample container element.
    </div>
</body>
  
</html>

Producción:

Primer CSS Responsive Borders

Referencia: https://primer.style/css/utilities/borders#responsive-borders

Publicación traducida automáticamente

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