PureCSS

A set of small, responsive CSS modules that you can use in every web project. Pure is ridiculously tiny. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. - http://purecss.io

Uso

  1. Accede al directorio (crealo de ser necesario) $HOME/www y crea el directorio purecss01:

     alumno@servidor:~ $ cd $HOME/www
     alumno@servidor:~/www $ mkdir purecss01
     alumno@servidor:~/www $ cd purecss01
    
  2. Crea el directorio css y al archivo vácio css/main.css en él:

     alumno@servidor:~/www/purecss01 $ mkdir css
     alumno@servidor:~/www/purecss01 $ touch css/main.css
    
  3. Accede a http://purecss.io/customize/ y bajo la sección de Rollups obten algun URL hacía el archivo con nombre pure-min.css y descargalo dentro del directorio css:

     alumno@servidor:~/www/purecss01 $ wget https://unpkg.com/purecss@0.6.2/build/pure-min.css -P css/
    

    En este caso se ha descargado a PureCSS en su versión 0.6.2 (Responsive Rollup).

  4. Crea el archivo index.html con el siguiente contenido:

     <!DOCTYPE html>
     <html>
     <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>purecss01</title>
       <link rel="stylesheet" href="css/pure-min.css">
       <link rel="stylesheet" href="css/main.css">
     </head>
     <body>
       <!-- CONTENIDO -->
       <!-- /CONTENIDO -->
     </body>
     </html>
    

    Notas:

    • El contenido de tu documento HTML, y que será visualizado por el usuario, quedará dentro de los comentarios CONTENIDO.
    • Si requieres modificar el aspecto visual o estilo de algún elemento HTML lo llevas a cabo en el archivo css/main.css. Recuerda que tendrás que hacer uso de selectores de CSS.

Al terminar en el directorio $HOME/www/purecss01 encontrarás la siguiente estructura:

alumno@servidor:~/www/purecss01 $ pwd && tree
/home/alumno/www/purecss01
├── css
│   ├── main.css
│   └── pure-min.css
└── index.html
1 directory, 3 files