Primeros componentes CSS

Primer CSS es un marco CSS gratuito de código abierto que se crea con el sistema de diseño de GitHub para brindar soporte a la amplia gama de sitios web de Github. Crea la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático asegura que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientados a objetos, CSS funcional y arquitectura BEM. Es un modelo altamente reutilizable.

Componentes básicos de CSS:

• Alertas : Se utilizan para señalar un mensaje importante al usuario. Alerta al usuario relacionado con algunos elementos pendientes o nuevas funciones en la página web. Los usuarios son informados previamente a través de alertas antes de que interactúen con la página web.
• Avatares :   los avatares son una forma mucho más sencilla de agregar imágenes de perfil porque vienen con muchas clases integradas que están disponibles para personalizar una imagen destinada a un avatar.
• Blankslate : Se utiliza como marcador de posición cuando hay falta de contenido y 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.
• Superposición de cuadro : se utiliza para crear el efecto de superposición en CSS básico utilizando la clase de superposición de cuadro junto con los elementos <detalles> y <detalles-diálogo>. 
• Cuadro: se puede usar para algo tan simple como un cuadro de esquina redondeada o listas y formularios más complejos. Incluye modificadores opcionales para densidad de relleno y temas de color.
• Nombre de la rama : se utiliza para proporcionar un color de fondo a cualquier texto/enlace. Se utiliza principalmente para proporcionar nombres de sucursales a una sucursal independiente del repositorio/proyecto.
• Migas de pan :  las migas de pan se utilizan para indicar la ubicación de la página actual dentro de una jerarquía de navegación.
• Botones : Los botones nos ayudan a iniciar una acción como enviar un formulario, navegar a otro enlace, etc.
• Menú desplegable : los menús desplegables son menús ligeros que proporcionan navegación y acciones. Es útil en el caso de que los datos deban organizarse y mostrarse con un menú desplegable en el que se pueda hacer clic.
• Formularios : los formularios proporcionan diferentes componentes para las entradas, como texto, casilla de verificación, radio, selecciones y área de texto.
• Encabezado : el componente de encabezado, como sugiere el nombre, nos ayuda a crear un encabezado para nuestro sitio web. 
• Etiquetas : proporcionan algunos metadatos al usuario o indican el estado de un elemento.
• Diseño : se utiliza para cambiar el diseño del documento con la ayuda de clases que proporcionan líneas, bloques, tablas, etc. que pueden personalizar el documento.
• Enlaces : Los enlaces se utilizan para decorar enlaces en la página web. Primer CSS tiene muchas personalizaciones para los enlaces.
• Cargadores : los cargadores informan a los usuarios que la acción aún está en curso y puede tardar un poco en completarse. Esta es una excelente manera de informar a los usuarios que la aplicación no está en modo detenido y que está funcionando en segundo plano.
• Markdown : es un lenguaje de marcado ligero para crear texto formateado.
• Navegación : proporciona la utilidad para crear una barra de navegación o un menú de navegación de una página web, que es uno de los componentes más importantes de un sitio web. Nos permitió crear barras de navegación o menús de navegación de diferentes diseños y diseños. Nos permite crear componentes de navegación más flexibles y personalizables. 
• Paginación : Sirve para crear un conjunto de páginas y podemos saltar a cualquier página si queremos.
• Ventana emergente : las ventanas emergentes se utilizan para llamar la atención de los usuarios sobre algunos elementos específicos del sitio web para sugerir algunos consejos o guiarlos a través de una nueva experiencia.
• Progreso : la barra de progreso es un componente muy útil para mostrar el progreso de un usuario al completar una tarea en particular, como crear una cuenta, alcanzar un objetivo en particular o descargar o cargar el progreso. Se utiliza ampliamente en los sitios web modernos. 
• Seleccionar menú : Se utiliza para hacer diferentes tipos de menús. También nos brinda muchas funcionalidades como ajustar el diseño, seleccionar el menú, agregar un encabezado y pie de página, agregar un divisor, usar un filtro, etc. 
• Subtítulo : Es un contenedor que tiene un borde inferior gris claro. Podemos usar la clase Subhead-heading para crear el encabezado de Subhead. 
• Línea de tiempo : Se utiliza en varios casos. Al igual que en GitHub, se usa en la sección de problemas donde un usuario pide una solución a un problema y otro usuario lo ayuda a resolverlo y todo se representa usando una línea de tiempo. 
• Brindis : es una especie de mensaje de alerta o notificación automática, generalmente utilizada para notificar o mostrar información breve o comentarios urgentes a los usuarios.
• Información sobre herramientas: se utilizan para proporcionar sugerencias textuales interactivas al usuario sobre el elemento cuando se mueve el puntero del mouse.
• Truncar : Se utiliza para acortar el texto cuando alcanza una longitud mayor a la requerida.

Nota: Consulte los enlaces o referencias anteriores para comprender el componente respectivo seguido de ejemplos de código. Algunos ejemplos de muestra se dan a continuación.

Ejemplo 1: El siguiente código demuestra el uso de los componentes Alert, Avatar y Blankslate de Primer CSS.

<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
        rel="stylesheet" />
    <style>
        body {
            margin-left: 20px;
            margin-right: 20px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 class="color-fg-success"> 
            GeeksforGeeks 
        </h1>
          
        <h2> Primer CSS</h2>
          
        <h3>Alert component</h3>
        </br>
          
        <div>
            <div class="flash flash-error">
                This is error flash.
            </div>
            <br />
            <div class="flash flash-success">
                This is success flash.
            </div>
        </div>
        <h3> Avatar component</h3>
        </br>
        <div>
            <img class="avatar avatar-7 mr-2" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" />
        </div>
        </br>
        <h3> Blankslate component</h3>
        <div>
            <div class="blankslate-action">
                <button class="btn btn-primary" type="button">
                    "OK" action button
                </button>
            </div>
        </div>
    </center>
</body>
  
</html>

Producción:

 

Ejemplo 2: El siguiente código demuestra el uso de algunos otros componentes de Primer CSS como Breadcrumbs y Branch name.

<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
        rel="stylesheet" />
</head>
  
<body>
    <center>
        <h1 class="color-fg-success"> 
            GeeksforGeeks 
        </h1>
        <h2> Primer CSS components</h2>
        <h3>Primer CSS Branch Name</h3>
        <a href="#" class="branch-name">
            Master Branch
        </a>
        <a href="#" class="branch-name">
            Sub Branch
        </a>
        </br></br>
        <h3>Primer CSS Breadcrumb</h3>
        <div aria-label="Breadcrumb">
            <ol>
                <li class="breadcrumb-item">
                    <a href="#">Home</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#">GFG tutorials</a>
                </li>
                <li class="breadcrumb-item breadcrumb-item-selected">
                    <a href="#" aria-current="page">Articles</a>
                </li>
            </ol>
        </div>
    </center>
</body>
  
</html>

Producción:

 

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