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.
Primer CSS ofrece estados de etiquetas que informan al usuario sobre el estado de un elemento. Generalmente, los estados son las etiquetas que tienen texto en negrita. El estado predeterminado tiene un color gris.
Primer CSS Estados clases utilizadas:
- Estado: esta clase se utiliza para definir una etiqueta de estado.
- Estado–borrador: Esta clase se utiliza para definir una etiqueta de estado borrador de color gris.
- State–open: Esta clase se utiliza para definir una etiqueta de estado abierto de color verde.
- Estado fusionado: esta clase se utiliza para definir una etiqueta de estado fusionado de color púrpura.
- Estado cerrado: esta clase se utiliza para definir una etiqueta de estado cerrado de color rojo.
- State–small: esta clase se utiliza para definir una etiqueta de estado de tamaño pequeño.
Sintaxis:
<span class="State State--draft">
...
</span>
Ejemplo 1: El siguiente ejemplo demuestra el uso de Primer CSS States utilizando las clases State, State–draft, State–open, State–merged y State–closed .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS States</title> <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> <h3>Primer CSS States</h3> <span class="State State--draft mr-2 mt-3"> Default State </span> <span class="State State--open mr-2 mt-3"> Open State </span> <span class="State State--merged mr-2 mt-3"> Merged State </span> <span class="State State--closed mr-2 mt-3"> Close State </span> </center> </body> </html>
Producción:
Primeros estados CSS
Ejemplo 2: El siguiente ejemplo demuestra el uso de Primer CSS States utilizando las clases State, State-small, State-draft, State-open, State-merged y State-closed .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS States</title> <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> <h3>Primer CSS States</h3> <span class="State State--small State--draft mr-2 mt-3"> Default State </span> <span class="State State--small State--open mr-2 mt-3"> Open State </span> <span class="State State--small State--merged mr-2 mt-3"> Merged State </span> <span class="State State--small State--closed mr-2 mt-3"> Close State </span> </center> </body> </html>
Producción:
Primeros estados CSS
Referencia: https://primer.style/css/components/labels#states
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA