Cargando



Maquetacion con clases CSS de 960 Grid System

El framework CSS 960 Grid System, no es más que una estandarización de estilos que dispone las clases necesarias para implementar columnas en una página web, de diversos tamaños, con las que maquetar nuestros contenidos fácil y ordenadamente.


feb 18 2014 16:22
Profesional
feb 19 2014 12:01
El framework CSS 960 Grid System, no es más que una estandarización de estilos que dispone las clases necesarias para implementar columnas en una página web, de diversos tamaños, con las que maquetar nuestros contenidos fácil y ordenadamente.
960 Grid System lleva este nombre porque es un sistema de rejilla para hacer páginas con 960 píxeles de ancho. Las columnas que podremos colocar en la rejilla tendrán distintas anchuras, pero siempre el ancho total de la página será de 960 píxeles.

Con estas clases predefinidas de css, podemos utilizar 12 o 16 columnas para crear nuestros layouts, cada una de las columnas tiene un margen izquierdo y derecho de 10px, para crear 20px de separación entre columnas. Sabiendo esto, decimos que si utilizo 12 columnas, cada columna será de 60px cada una y sí utilizo 16 columnas, el ancho de cada una será de 40px.

Para tener una gui añadimos una imagen de como se distribuyen las columnas.
Es muy sencillo maquetar de esta manera y al observar la imagen nos damos una idea de como hacerlo. Para los fines de este tutorial, vamos a crear un layout para estructurar una web y organizar informacion.
Iniciamos nuestro ejemplo creando a un archivo 960test.html y añadimos las siguiente css entre las etiquetas <head> </head>

[color=#000000]
<link rel="STYLESHEET" type="text/css" href="ruta/css/960.css">
<link rel="STYLESHEET" type="text/css" href="ruta/css/reset.css">
<link rel="STYLESHEET" type="text/css" href="ruta/css/text.css">
[/color]

Estos archivos son los que tienen las clases del framework 960 grid, si necesitamos nuevas css, las aplicaremos en un archivo aparte nunca modificaremos el framework para mantenerlo estándar.

A continuación una maquetación sencilla para explicar mejor la utilización de 960 Grid


web.jpg.png




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Automoviles </title>
<link href="styles/960.css" rel="stylesheet" type="text/css" />
<link href="styles/reset.css" rel="stylesheet" type="text/css" />
<link href="styles/text.css" rel="stylesheet" type="text/css" />
<link href="styles/miestilo.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="top">
<div class="container_12">
<div class="grid_3 prefix_9">
<ul>
<li>Ingresar</li>
<li id="rss">RSS</li>
</ul>
</div><!--grid_3-->
<div class="clear"></div>
</div><!--container_12-->
</div><!--top-->
<div class="container_12" id="bodyMain">
<div class="grid_12" id="header">

</div>
<div class="clear"></div>
<div class="grid_12" id="menu">
<ul>
<li>Portada</li>
<li>Noticias</li>
<li>Miembros</li>
<li>Promociones</li>
<li>Cont&aacute;ctanos</li>
</ul>
</div><!--menu-->
<div class="grid_12" id="contentMain">
<div class="grid_8 alpha">
<div class="articulo">
<h1>Alg&uacute;n T&iacute;tulo</h1>
<p>
Donec malesuada dictum orci. Pellentesque felis arcu, malesuada eget, convallis sed, suscipit eget, tellus. Nullam lectus. Nam elementum feugiat mi. Nulla quis leo ut dui varius blandit. Cras viverra eros vitae odio.
</p>
</div><!--articulo-->
<div class="grid_4 alpha">
<div class="articulo">
<h3>Alg&uacute;n T&iacute;tulo</h3>
<p>
Donec malesuada dictum orci. Pellentesque felis arcu, malesuada eget, convallis sed, suscipit eget, tellus. Nullam lectus. Nam elementum feugiat mi. Nulla quis leo ut dui varius blandit. Cras viverra eros vitae odio.
</p>
<p>
Donec malesuada dictum orci. Pellentesque felis arcu, malesuada eget, convallis sed, suscipit eget, tellus. Nullam lectus. Nam elementum feugiat mi. Nulla quis leo ut dui varius blandit. Cras viverra eros vitae odio.


</div>
<div class="grid_4 omega">
<h3>Alg&uacute;n T&iacute;tulo</h3>
<img src="images/imagen1.jpg" alt="auto nuevo" class="border-azul" />
<p>
Donec malesuada dictum orci. Pellentesque felis arcu, malesuada eget, convallis sed, suscipit eget, tellus. Nullam lectus. Nam elementum feugiat mi. Nulla quis leo ut dui varius blandit. Cras viverra eros vitae odio. Fusce ut urna eu libero luctus malesuada. Nulla quam arcu, adipiscing quis, hendrerit ac, malesuada ut, ante.
</p>
</div>
</div>
<div class="grid_4 omega">
<h1>Alg&uacute;n T&iacute;tulo</h1>
<img src="images/imagen2.jpg" alt="Promociones" class="border-azul" />
<p>Donec malesuada dictum orci. Pellentesque felis arcu, malesuada eget, convallis sed, suscipit eget, tellus. Nullam lectus. Nam elementum feugiat mi. Nulla quis leo ut dui varius blandit. Cras viverra eros vitae odio.
</p>
</div>
<div class="clear"></div>
</div><!--contentMain-->
<div class="clear"></div>
<div class="grid_12 prefix_4" id="footer">
<p>Automoviles.com Copyright 2014 | Publicidad | Legales | Contacto</p>
</div><!--footer-->
</div><!--bodyMain-->
</body>
</html>

A continuacion para culminar el ejemplo añadimos un archivo miestilos.css

@charset "iso-8859-2";
/* CSS Document */
div.spacer{
height: 1em;
}
#top{
width:100%;
background:#29231e;
position:relative;
top:0;
left:0;
}
#top ul{
margin:10px 0 10px 0;
color:#FFFFFF;
}
#top ul li{
display:inline;
}
#bodyMain{
background:url(../images/nubes-background.jpg) top center no-repeat;
}
#rss{
background:url(../images/rss-logo.gif) no-repeat right;
padding:5px 30px 5px 0;
}
a#logo{
background:url(../images/vos-voz.gif) no-repeat;
width:470px;
height:92px;
float:left;
margin-top:150px;
}
img#ciudad-logo{
float:left;
}
#header{
border-bottom:5px solid #29231e;
background:url(../images/header.jpg) no-repeat;
height:173px;
}
#contentMain{
background:#FFFFFF;
padding-top:10px;
border-bottom:5px #A1DEF0 solid;
}
#contentMain h1, #contentMain h3{
color:#4991a5;
}
#menu{
background:#e7f7fb;
}
#menu ul{
padding-top:10px;
margin-bottom:10px;
}
#menu ul li{
display:inline;
font:20px bold Arial, Helvetica, sans-serif;
}
.articulo{
margin-left:15px;
}
img.border-azul{
border:5px solid #e7f7fb;
margin-bottom:10px;
}
#footer{
font-size:11px;
}

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X