Instalación y usos de CSS puro

Pure CSS es un marco de CSS. Es una colección de herramientas gratuitas y de código abierto para crear sitios web y aplicaciones web adaptables. Pure CSS es desarrollado por Yahoo y se usa para crear sitios web más rápidos, hermosos y receptivos. Se puede utilizar como una alternativa a Bootstrap.
 

Instalación de Pure CSS: Podemos añadir Pure CSS a nuestra página web de dos formas.

  1. Uso de la instalación de NPM
  2. Usando el enlace CDN

Usando NPM Install: puede agregar Pure CSS a su proyecto a través de npm. Esta es nuestra forma recomendada de integrar Pure CSS en el proceso de construcción y la string de herramientas de su proyecto.

npm install purecss --save

Usando el enlace CDN: puede agregar Pure CSS a su página a través del enlace CDN gratuito de desempaquetado. Simplemente agregue el siguiente elemento <link> en el <head> de su página, antes de las hojas de estilo de su proyecto.

<enlace rel=”hoja de estilo” href=”https://unpkg.com/purecss@2.0.5/build/pure-min.css” integridad=”sha384-LTIDeidl25h2dPxrB2Ekgc9c7sEC3CWGM6HeFmuDNUjX76Ert4Z4IY714dhZHPLd” crossorigin=”anónimo”>

El siguiente ejemplo mostrará el uso de Pure CSS:

Ejemplo 1: En este ejemplo, usaremos el enlace CDN de CSS puro para diseñar un formulario básico.

HTML

<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Import Pure CSS files -->
    <link rel="stylesheet" href=
        "https://unpkg.com/purecss@2.0.5/build/pure-min.css"
        integrity=
"sha384-LTIDeidl25h2dPxrB2Ekgc9c7sEC3CWGM6HeFmuDNUjX76Ert4Z4IY714dhZHPLd"
        crossorigin="anonymous">
  
    <!-- Let browser know website is
        optimized for mobile -->
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
</head>
  
<body>
    <h2 color="">GeeksforGeeks</h2>
    <strong>Pure CSS Example Code</strong>
  
    <!-- Add class "pure-form" -->
    <form class="pure-form">
        <fieldset>
            <legend>Login to use GeeksforGeeks IDE</legend>
            <input type="email" placeholder="Email" />
            <input type="password" placeholder="Password" />
            <br><br>
  
            <label for="default-remember">
                <input type="checkbox" id="default-remember" />
                Remember me
            </label>
              
            <button type="submit" class="pure-button pure-button-primary">
                Log in
            </button>
        </fieldset>
    </form>
</body>
  
</html>

Producción:

Ejemplo 2: En este ejemplo, mostraremos CSS Grid usando Pure CSS.

HTML

<!DOCTYPE html>
<html>
  
<head>
  
    <!--Import Pure CSS files-->
    <link rel="stylesheet" href=
        "https://unpkg.com/purecss@2.0.5/build/pure-min.css"
        integrity=
"sha384-LTIDeidl25h2dPxrB2Ekgc9c7sEC3CWGM6HeFmuDNUjX76Ert4Z4IY714dhZHPLd"
        crossorigin="anonymous">
  
    <!-- Let browser know website is
         optimized for mobile -->
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
</head>
  
<body>
    <h2 color="">GeeksforGeeks</h2>
    <strong>Pure CSS Example Code</strong>
  
    <!-- Add class "pure-grid" -->
    <div class="pure-g">
        <div class="pure-u-1-3">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210909011130/download312-200x200.png" />
        </div>
        <div class="pure-u-1-3">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210909011207/QNHrwL2q-200x200.jpg" />
        </div>
        <div class="pure-u-1-3">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210909011130/download312-200x200.png" />
        </div>
    </div>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por skyridetim 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 *