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 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 un modelo altamente reutilizable.
Primer CSS facilita los diferentes diseños para construir y crear una interfaz de usuario atractiva con la ayuda del sistema de diseño de GitHub que ayuda a mejorar la experiencia general del usuario del sitio web. Hay 2 formas diferentes de utilizar Primer CSS en el proyecto:
- Instalación de Primer CSS a través de NPM
- Al implementar a través de los enlaces CDN
Exploraremos la opción para implementar Primer CSS y lo entenderemos a través del ejemplo.
Instalación de Primer CSS a través de NPM: Antes de proceder a instalar Primer CSS, debemos tener instalado Node Package Manager en el sistema. Para verificar la versión instalada, ejecute los siguientes comandos:
npm -v OR npm --version
Para poder utilizar los componentes, Utilidades, etc, debemos tener el npm versión 3 o superior. En caso de que se haya instalado una versión anterior, use el siguiente comando para actualizar la versión npm:
npm install npm@latest -g
Pasos para instalar Primer CSS:
Paso 1: use el siguiente comando para instalar Primer CSS:
npm install @primer/css --save
Esto ayudará a instalar todos los archivos fuente SCSS necesarios en el directorio node_modules/@primer/css .
Paso 2: Importe la siguiente declaración de importación dentro de la etiqueta <style> en el archivo HTML o podemos crear la hoja de estilo que contendrá la siguiente declaración de importación y vincular la hoja de estilo con la etiqueta <link> en la etiqueta <head> del HTML expediente.
@import "node_modules/@primer/css/dist/primer.css";
Paso 3: agregue las clases de componentes/utilidades específicos, como se indica a continuación:
<button class="BtnGroup-item btn" type="button">Button</button>
Implementación de Primer CSS a través del enlace CDN: El Prime CSS se puede utilizar descargando el CSS integrado de unpkg.com y es necesario alojarlo nosotros mismos o simplemente incluyendo un enlace CDN en el HTML:
<link href="https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" />
Ejemplo: este ejemplo describe la implementación de Primer CSS mediante el uso de etiquetas con botones de opción.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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" /> <title>Primer CSS</title> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h2>Primer CSS Example</h2> <form> <label for=""> Choose the Programming Language with the no. of questions attempted </label> <div class="radio-group" style="margin: 1em;"> <input class="radio-input" id="lang1" type="radio" name="options"> <label class="radio-label" for="lang1"> Java <span class="Counter mr-1 color-bg-danger-emphasis color-fg-on-emphasis"> 3 </span> </label> <input class="radio-input" id="lang2" type="radio" name="options"> <label class="radio-label" for="lang2"> Python <span class="Counter mr-1 Counter--secondary"> 5 </span> </label> <input class="radio-input" id="lang3" type="radio" name="options"> <label class="radio-label" for="lang3"> C++ <span class="Counter mr-1 Counter--primary"> 8 </span> </label> <input class="radio-input" id="lang4" type="radio" name="options"> <label class="radio-label" for="lang4"> C <span class="Counter mr-1 color-bg-success-emphasis color-fg-on-emphasis"> 10 </span> </label> </div> </form> </body> </html>
Producción:
Ejemplo 2: este ejemplo describe la implementación de Prime CSS especificando la ruta en la declaración de importación.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @import "node_modules/@primer/css/dist/primer.css"; </style> <title>Primer CSS</title> </head> <body> <div class="text-left"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3>Primer CSS Button Example</h3> </div> <br> <div class="BtnGroup"> <button class="BtnGroup-item btn" type="button"> <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" d= "M7.47 10.78a.75.75 0 001.06 0l3.75-3.75a.75.75 0 00-1.06-1.06L8.75 8.44V1.75a.75.75 0 00-1.5 0v6.69L4.78 5.97a.75.75 0 00-1.06 1.06l3.75 3.75zM3.75 13a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z"> </path> </svg> Download Button </button> <button class="BtnGroup-item btn" type="button" aria-disabled="true"> <svg class="octicon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16"> <path fill-rule="evenodd" d="M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"> </path> </svg> Disabled Button </button> <button class="BtnGroup-item btn" type="button"> <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" d= "M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527 3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366 2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981 0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619 1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008 6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091 2.187-2.345 2.637-3.023a1.619 1.619 0 000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671 2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z"> </path> </svg> Visibility Button </button> </div> </body> </html>
Producción:
Beneficios de usar Prime CSS:
- Facilita los componentes de estilo BEM y centrados en la utilidad, que es el bloque de construcción básico para el proyecto web.
- Proporciona los componentes de la interfaz de usuario de presentación que tienen los estilos encapsulados en él.
- Tiene diferentes tipos de diseños de diseño, flujos y estructuras alámbricas, que ayudan a hacer prototipos con componentes Primer en Figma.
Publicación traducida automáticamente
Artículo escrito por bijaybhaskar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA