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

Deja una respuesta

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