GroundWork CSS Framework HTML5 – 2 -Estructura web

Segunda entrega en forma de video, del Framework HTML5 GroundWork CSS que permite desarrollar aplicaciones web y móvil de forma un poco más sencilla. En esta ocasión, veremos cómo estructurar la aplicación, lo que llamamos montar el Layout.

Tutorial GroundWork

Antes que nada, debemos saber cómo poder cargar este framework en nuestra web.

GroundWork CSS Framework HTML5 puesta en marcha:

Lo más importante es saber cómo hacer que funcione el framework en nuestra página. Debemos añadir las llamadas a los CSS y JS siguientes en cada una de las partes de la web

En el head

<!-- Modernizr -->
<script src="/js/libs/modernizr-2.6.2.min.js"></script>
<!-- framework css -->
<!--[if gt IE 9]><!-->
<link type="text/css" rel="stylesheet" href="/css/groundwork.css">
<!--<![endif]-->
<!--[if lte IE 9]>
<link type="text/css" rel="stylesheet" href="/css/groundwork-core.css">
<link type="text/css" rel="stylesheet" href="/css/groundwork-type.css">
<link type="text/css" rel="stylesheet" href="/css/groundwork-ui.css">
<link type="text/css" rel="stylesheet" href="/css/groundwork-anim.css">
<link type="text/css" rel="stylesheet" href="/css/groundwork-ie.css">
<![endif]-->

En el footer

Andes de cerrar la etiqueta </body> de la página web, debemos llamar a jquery y a groundwork.

<script type="text/javascript" src="/js/libs/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/js/groundwork.all.js"></script>

Con estas llamadas, ya deberíamos poder trabajar con el FrameWork HTML5 sin problemas.

Y ahora si, veamos como estructurar nuestra aplicación.

Estructura aplicación con GroundWork CSS

Os dejamos nuestro segundo vídeo que muestro cómo estructurar una página web responsive para que se muestre de forma correcta en web y en dispositivos móviles.

Espero que con el vídeo tengáis un poco más claro el sistema Grid (rejillas) que tiene el FrameWork HTML5 de GroundWork CSS. Recordamos, que como dice en su página oficial, el framework es totalmente responsive, por lo que debeís estructurar vuestra página pensando en los diferentes dispositivos en los que se podrá ejecutar.


Más información

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

*