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.
- Uso de la instalación de NPM
- 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