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.
HTML
<!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.
HTML
<!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
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA