Cómo Crear Una Web con Foundation

Github

En ocasiones necesitamos crear una página web con el framework CSS Foundation.

Para hacerlo debemos usar sus clases de CSS de manera correcta.

En este tutorial te enseñaré a Cómo Crear Una Web con Foundation, vamos con ello.

Creación de la Web

Primero creamos un archivo llamado index.html

Importación de Archivos CSS

Cargamos el archivo CSS de Foundation y un archivo CSS personalizado para aplicar nuestros propios estilos:

<!-- Archivos CSS -->
<link rel="stylesheet" href="css/foundation.min.css">
<link rel="stylesheet" href="css/estilos.css">

Menú

Agregamos nuestro logo y el menú de navegación para el proyecto:

 <!-- Logo y menú -->
 <div class="top-bar">
   <div class="top-bar-left">
     <ul class="menu">
       <li class="menu-text">
         <span class="logo">Mi Proyecto</span>
       </li>
     </ul>
   </div>
   <div class="top-bar-right">
     <ul class="dropdown menu" data-dropdown-menu>
       <li>
         <a href="#">Home</a>
       </li>
       <li>
         <a href="#">Nosotros</a>
         <ul class="menu">
           <li>
             <a href="#">Misión</a>
           </li>
           <li>
             <a href="#">Objetivo</a>
           </li>
           <li>
             <a href="#">Visión</a>
           </li>
         </ul>
       </li>
       <li>
         <a href="#">Servicios</a>
       </li>
       <li>
         <a href="#">Contacto</a>
       </li>
     </ul>
   </div>
 </div>

Banner

Cargamos una imagen debajo del menú:

<!-- Banner -->
<div class="banner">
  <img src="img/equipo.jpg">
</div>

Servicios

Aquí mostramos lo servicios de la empresa, tu puedes colocar el contenido que desees:

<!-- Servicios -->
<div class="row column text-center">
  <h2>Servicios</h2>
</div>
<div class="row small-up-2 large-up-3">
  <div class="column">
    <img class="thumbnail" src="img/self-service.png">
    <h5 class="text-center">Servicio 1</h5>
    <p> Nullam massa metus, elementum dignissim dapibus eget, mollis id odio. Phasellus ac arcu a nisi posuere luctus. Suspendisse ornare felis eu odio semper, fringilla rutrum purus scelerisque. </p>
  </div>
  <div class="column">
    <img class="thumbnail" src="img/maintenance.png">
    <h5 class="text-center">Servicio 2</h5>
    <p> Nullam massa metus, elementum dignissim dapibus eget, mollis id odio. Phasellus ac arcu a nisi posuere luctus. Suspendisse ornare felis eu odio semper, fringilla rutrum purus scelerisque. </p>
  </div>
  <div class="column">
    <img class="thumbnail" src="img/catering.png">
    <h5 class="text-center">Servicio 3</h5>
    <p> Nullam massa metus, elementum dignissim dapibus eget, mollis id odio. Phasellus ac arcu a nisi posuere luctus. Suspendisse ornare felis eu odio semper, fringilla rutrum purus scelerisque. </p>
  </div>
</div>

Footer

Al final agregamos nuestro footer o pie de página:

<!-- Footer -->
<footer>
  <div class="menu-text text-center"> Mi Proyecto © <script>
      document.write(new Date().getFullYear())
    </script>
    </li>
  </div>undefined
</footer>

Importación de Archivos JavaScript

Importamos jQuery y el archivo de JavaScript de Foundation:

<!-- Archivos JavaScript -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/foundation.js"></script>

Función jQuery de Foundation

Por último creamos una función de jQuery para que el menú y otros elementos dinámicos funcionen:

<!-- Código jQuery para Foundation -->
<script>
  $(document).foundation();
</script>

Probando la Página Web

Si abrimos el archivo index.html en el navegador, podemos ver que la página se ha creado correctamente con el framework Foundation:

Así de fácil puedes Crear Una Web con Foundation.

Conclusión

En este tutorial has aprendido a Cómo Crear Una Web con Foundation.

Te dará las nociones para que crees una web con el framework Foundation.

Si quieres dominar Foundation, recuerda practicarlo mucho.

Nota(s)

• No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.