Cómo Crear Una Web con Foundation

Nube Colectiva

hace 3 meses

En esta página:

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.

Foundation cuenta con diferentes clases de CSS para crear elementos de interfaz de usuario

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>

<span class="logo">Mi Proyecto</span>

</li>

</ul>

</div>

<li>

</li>

<li>

<a href="#">Nosotros</a>

<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>

Banner

Cargamos una imagen debajo del menú:


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

</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>

<h2>Servicios</h2>

</div>

<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>

<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>

<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>

En el repositorio de GitHub de este proyecto encontrarás todos los archivos y el código completo.

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>

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>

$(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:

Puedes crear blogs, tiendas online, emails y otros tipos de proyectos con Foundation

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

Conoce Los 5 Mejores Libros de CSS en Español.

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.