Pure.CSS - Configuración del entorno

Hay dos formas de usar Pure:

  • Local Installation - Puede descargar el archivo pure.css en su máquina local e incluirlo en su código HTML.

  • CDN Based Version - Puede incluir el archivo pure.css en su código HTML directamente desde Content Delivery Network (CDN).

Instalación local

  • Ir https://purecss.io/start/ para descargar la última versión disponible.

  • Coloque el archivo pure-min.css descargado en un directorio de su sitio web, por ejemplo, / css.

Ejemplo

Puede incluir el css archivo en su archivo HTML de la siguiente manera:

<html>
   <head>
      <title>The PURE.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel="stylesheet" href="pure-min.css">
	  
      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;			
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }
      </style>
	  
   </head>
  
  
  <body>
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-1-3"><p>First Column</p></div>
            <div class="pure-u-1-3"><p>Second Column</p></div>
            <div class="pure-u-1-3"><p>Third Column</p></div>
         </div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

Versión basada en CDN

Puede incluir el archivo pure.css en su código HTML directamente desde Content Delivery Network (CDN). yui.yahooapis.com proporciona contenido para la última versión.

Estamos usando la versión CDN de la biblioteca yui.yahooapis.com a lo largo de este tutorial.

Ejemplo

Ahora reescribamos el ejemplo anterior usando pure.css de PureCSS.io CDN.

<html>
   <head>
      <title>The PURE.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
	  
      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;			
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }
      </style>
   </head>
  
   <body>
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-1-3"><p>First Column</p></div>
            <div class = "pure-u-1-3"><p>Second Column</p></div>
            <div class = "pure-u-1-3"><p>Third Column</p></div>
         </div>
      </div>
   </body>
</html>

Producirá el siguiente resultado: