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 alternativa a Bootstrap .
¿Por qué usamos CSS puro?
- Es una forma más rápida y fácil para el desarrollo web.
- Crea páginas web independientes de la plataforma.
- Crea páginas web receptivas.
- También diseña páginas web receptivas para dispositivos móviles.
- Es un marco gratuito y de código abierto disponible en https://purecss.io/
Componentes Pure CSS: Pure CSS tiene la colección de los siguientes componentes:
¿Cómo usar Pure CSS en la página web?
Podemos agregar Pure CSS a nuestra página web de dos maneras:
- Uso de la instalación de NPM
- Usando el enlace CDN
1. 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
2. Usando el enlace CDN: puede agregar Pure CSS a su página a través del enlace CDN gratuito unpkg. 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”>
Ejemplo: En este ejemplo, estamos usando la clase pure-table de Pure CSS para hacer una tabla. Estas tablas son como las tablas HTML normales, pero con relleno y borde agregados a los elementos de la tabla y con un encabezado enfatizado. Para crear una tabla predeterminada, agregue la clase «pure-table» al elemento <table>.
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>Default Table: </h2> <!-- Add class "pure-table" --> <table class="pure-table"> <thead> <tr> <th>Sr no.</th> <th>Employee Name</th> <th>Age</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John</td> <td>27</td> <td>45000</td> </tr> <tr> <td>2</td> <td>Mike</td> <td>29</td> <td>36000</td> </tr> </tbody> </table> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ghoshsuman0129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA