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