Fundación - Instalación

En este capítulo, analizaremos cómo instalar y utilizar Foundation en un sitio web.

Descarga la Fundación

Cuando abra el enlace foundation.zurb.com , verá una pantalla como se muestra a continuación:

Haga clic en el Download Foundation 6 , será redirigido a otra página.

Aquí puede ver cuatro botones:

  • Download Everything - Puede descargar esta versión de Foundation, si desea tener todo en el marco, es decir, CSS vainilla y JS.

  • Download Essentials - Descargará la versión simple que incluye la cuadrícula, botones, tipografía, etc.

  • Custom Download - Esto descargará la biblioteca personalizada para Foundation, incluye elementos y define el tamaño de las columnas, tamaño de fuente, color, etc.

  • Install via SCSS - Esto lo redireccionará a la página de documentación para instalar Foundation para sitios.

Puede hacer clic en el Download Everythingpara obtener todo en el marco, es decir, CSS y JS. Como los archivos constan de todas las cosas en el marco, cada vez no es necesario incluir archivos separados para la funcionalidad individual. En el momento de escribir este tutorial, se descargó la última versión (Foundation 6).

Estructura de archivo

Una vez que se descargue Foundation, extraiga el archivo ZIP y verá la siguiente estructura de archivo / directorio:

Como puede ver, hay CSS y JS compilados (foundation. *), Así como CSS y JS compilados y minificados (foundation.min. *).

Estamos utilizando las versiones CDN de la biblioteca a lo largo de este tutorial.

Plantilla HTML

Una plantilla HTML básica que usa Foundation es la que se muestra a continuación:

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>
   </head>

   <body>
      <h1>Hello, world!</h1>
   </body>
</html>

Las siguientes secciones describen el código anterior en detalle.

Tipo de documento HTML5

Foundation consta de ciertos elementos HTML y propiedades CSS que requieren el uso del tipo de documento HTML5. Por lo tanto, el siguiente código para el tipo de documento HTML5 debe incluirse al comienzo de todos sus proyectos con Foundation.

<!DOCTYPE html>
<html>
   ....
</html>

Móvil primero

Ayuda a responder a los dispositivos móviles. Necesitas incluir elviewport meta tag al elemento <head>, para garantizar una representación adecuada y el zoom táctil en dispositivos móviles.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

  • La propiedad width controla el ancho del dispositivo. Establecerlo en el ancho del dispositivo asegurará que se procese en varios dispositivos (móviles, computadoras de escritorio, tabletas ...) correctamente.

  • initial-scale = 1.0 asegura que cuando se cargue, su página web se renderizará a una escala de 1: 1 y no se aplicará ningún zoom de forma inmediata.

Inicialización de componentes

El script jQuery es necesario en Foundation para componentes como modales y menús desplegables.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

  • Guarde el código html dado anteriormente firstexample.html archivo.

  • Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.