Primer CSS es un marco CSS gratuito de código abierto construido sobre un sistema de diseño de GitHub para admitir el amplio espectro 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 garantiza 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.
Primer etiquetas CSS:
Agregue metadatos o indique el estado de los elementos y elementos de navegación. Las etiquetas son pequeñas palabras que dirán qué tipo de información estamos incluyendo en la página web o qué tipo de entrada estamos proporcionando. La etiqueta de nombre le indicará al usuario que ingrese su nombre en ese campo y hay tres tipos de etiquetas , Etiquetas para indicar metadatos, Estados para mostrar el estado y Contadores para indicar el recuento de una cantidad de elementos. Las etiquetas de problemas son para agregar etiquetas a problemas y requests de extracción.
Clases de Primer Label:
- Etiquetas: esta clase se utiliza para especificar etiquetas.
- Label–primary: esta clase se utiliza para definir una etiqueta primaria que tiene un borde más fuerte.
- Etiqueta secundaria: esta clase se utiliza para definir una etiqueta secundaria que tiene un color de texto sutil.
- Etiqueta-acento: esta clase se utiliza para definir una etiqueta de color azul.
- Label–success : Esta clase se utiliza para definir una etiqueta de color verde.
- Etiqueta–atención: Esta clase se utiliza para definir una etiqueta de color dorado.
- Label–severe: esta clase se utiliza para definir una etiqueta de color marrón.
- Etiqueta–peligro: Esta clase se utiliza para definir una etiqueta de color rojo.
- Etiqueta-patrocinadores: esta clase se utiliza para definir una etiqueta de color púrpura.
- Etiqueta grande: esta clase se usa para definir una etiqueta que tiene algo de relleno adicional.
- Label–inline: esta clase se utiliza para definir una etiqueta en línea.
A continuación se enumeran varias formas de modificar las etiquetas:
- Label-inline: De esta manera, puedes mostrar los elementos en el bloque.
- Emitir etiquetas: de esta manera, puede agregar etiquetas a las requests de emisión y extracción,
- Tamaño de la etiqueta: De esta forma, puedes aumentar el tamaño de la etiqueta.
Sintaxis:
<span class="Label Label--primary"> ... </span>
Nota: Reemplace las clases anteriores según la necesidad.
Ejemplo 1: En este ejemplo, estableceremos la altura y el ancho de una imagen usando estilos en línea.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width = device-width, initial-scale = 1">
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@16.3.0/dist/primer.css">
</head>
<style>
body{
background-color:lightgrey;
text-align:center;
}
</style>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Primer CSS Inline Styles</h3><br><br>
<span class="Label">Default</span>
<span class="Label Label--primary ml-1">Primary</span>
<span class="Label Label--secondary ml-1">Secondary</span>
</body>
</html>
Producción:
Ejemplo 2: en el siguiente código, incluiremos las clases para emitir etiquetas.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width = device-width, initial-scale = 1">
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@16.3.0/dist/primer.css">
</head>
<style>
body{
background-color:lightgrey;
text-align:center;
}
span{
background-color:lightblue;
}
</style>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Primer CSS Issue Label</h3><br><br>
<span class="IssueLabel color-bg-accent-emphasis
color-fg-on-emphasis mr-2">
GeeksforGeeks
</span>
<span class="IssueLabel color-bg-danger-emphasis
color-fg-on-emphasis mr-2">
Practice ????
</span>
<span class="IssueLabel color-bg-success-emphasis
color-fg-on-emphasis mr-2">About</span>
</body>
</html>
Producción:
Ejemplo 3: en el siguiente código, incluiremos las clases para aumentar el tamaño de las etiquetas.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width = device-width, initial-scale = 1">
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@16.3.0/dist/primer.css">
<style>
body{
background-color:lightgrey;
text-align:center;
}
span{
background-color:black;
color:yellow;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Primer CSS Size of Labels</h3><br><br>
<span class="IssueLabel color-bg-accent-emphasis
color-fg-on-emphasis mr-2 p-3">
GeeksforGeeks
</span>
<span class="IssueLabel color-bg-danger-emphasis
color-fg-on-emphasis mr-2 p-4">
Practice ????
</span>
<span class="IssueLabel color-bg-success-emphasis
color-fg-on-emphasis mr-2 p-6">
About
</span>
</body>
</html>
Producción:
Ejemplo 4: en el siguiente código, veremos cómo puede modificar la etiqueta.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Labels </title>
<link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
rel="stylesheet" />
<style>
.Label
{
background-color:black;
color:yellow;
}
</style>
</head>
<body>
<center>
<h1 class="color-fg-success">
GeeksforGeeks
</h1>
<br>
<h3> Primer CSS Labels </h3>
<span class="Label pt-4 pr-4 pl-4 pb-4">Default</span>
<span class="Label Label--primary mr-1
mt-2 pt-4 pr-4 pl-4 pb-4" >
Primary Label
</span>
<span class="Label Label--secondary mr-1
mt-2 pt-4 pr-4 pl-4 pb-4">
Secondary Label
</span>
<br><br>
</center>
</body>
</html>
Producción:
Ejemplo 5: el siguiente código muestra las etiquetas de colores y las etiquetas de estado para los elementos.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Labels </title>
<link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
rel="stylesheet" />
<style>
body
{
background-color:black;
color:white;
}
.Label
{
color:black;
background-color:lightgreen;
}
</style>
</head>
<body>
<center>
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<br>
<h2> Primer CSS Labels </h2>
</br>
<h3>Colored Label</h3><br>
<span class="Label mr-1 Label--accent">Accent</span>
<span class="Label mr-1 Label--success">Success</span>
<span class="Label mr-1 Label--attention">Attention</span>
<span class="Label mr-1 Label--severe">Severe</span>
<span class="Label mr-1 Label--danger">Danger</span>
<span class="Label mr-1 Label--open">Open</span>
<span class="Label mr-1 Label--closed">Closed</span>
<span class="Label mr-1 Label--done">Done</span>
<span class="Label mr-1 Label--sponsors">Sponsors</span>
</br></br>
<h2>Issue Label</h2><br>
<span class="IssueLabel color-bg-accent-emphasis
color-fg-on-emphasis mr-1">
GfG
</span>
<span class="IssueLabel color-bg-danger-emphasis
color-fg-on-emphasis mr-1">
About
</span>
<span class="IssueLabel color-bg-success-emphasis
color-fg-on-emphasis mr-1">
help
</span>
<span class="IssueLabel color-bg-attention-emphasis
color-fg-on-emphasis mr-1">
CS
</span>
</br></br>
<h2>States</h2>
</br>
<span class="State State--draft mr-2">
Draft
</span>
<span class="State State--open mr-2">
Open
</span>
<span class="State State--merged mr-2">
Merged
</span>
</center>
</body>
</html>
Producción:
Referencia: https://primer.style/css/components/labels#states