hernandezblasantonio/pw/documentacion/html/css/foundation

ZURB Foundation

Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. - http://foundation.zurb.com

Foundation es un framework de interfaz de usuario responsive. Foundation proporciona una cuadrícula responsive e incluye componentes de interfaz de usuario HTML y CSS, plantillas, y fragmentos de código, incluyendo tipografía, formularios, botones, barras de navegación y otros componentes de interfaz usuario, así como extensiones de Javascript opcionales. Foundation está mantenida por zurb.com y es un proyecto de código abierto. - Wikipedia

Uso

Foundation requiere del uso de jQuery y ya lo integra al proyecto.

  1. Crea el directorio $HOME/www/foundation01 y accede a él:

    alumno@servidor:~ $ mkdir -p $HOME/www/foundation01
alumno@servidor:~ $ cd $HOME/www/foundation01

  2. Accede a https://foundation.zurb.com/sites/download.html/, descarga el archivo en formato zip ofrecido (Complete o Download Everything) y descomprimelo:

    alumno@servidor:~/www/foundation01 $ unzip $HOME/Downloads/foundation-6.4.2-complete.zip

    En este caso se ha descargado a Foundation en su versión 6.4.2 (foundation-6.4.2-complete.zip) en el directorio $HOME/Downloads.

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

    alumno@servidor:~/www/foundation01 $ pwd && tree
/home/alumno/www/foundation01
.
├── css
│   ├── app.css
│   ├── foundation.css
│   └── foundation.min.css
├── index.html
└── js
    ├── app.js
    └── vendor
        ├── foundation.js
        ├── foundation.min.js
        ├── jquery.js
        └── what-input.js

3 directories, 9 files

  3. Inicia a thttpd y accede a él con el navegador web.

Notas

  • Foundation ya ofrece un archivo index.html como plantilla o punto de partida.

    En el archivo index.html puedes borrar todos los elementos dentro de body, excepto los elementos script para obtener una plantilla básica:

    <!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>foundation01</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
    <!-- CONTENIDO -->
    <!-- /CONTENIDO -->
    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

  • 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/app.css.

    Recuerda que tendrás que hacer uso de selectores de CSS.

  • Podrás encontrar ejemplos-plantillas sobre el uso de Foundation en http://foundation.zurb.com/templates.html