Primer Introducción a 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 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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *