Etiquetas

Framework 960 grid System,Sistema fluido,alpha,sufix ,omega, prefix.



   Es un sistema de rejillas  gratuito usado para satisfacer distintas necesidades .
960 grid es una herramienta que nos permite maquetar una pagina web en rápidos pasos y mediadas exactas los único que hay que  hacer para comenzar con su uso es conocer el sistema y sus mediadas.  Entendido esto tenemos medio mundo  web controlado  en maquetas rápidas de trabajar.  960 grid es una herramienta de framework que  proporciona dimensiones de uso común sobre la  base de ancho de 960px.

Al descargar el paquete  obtendrás una plantilla independiente para ser trabajada en particular de cada caso  tendremos la de photoshop,fireworks,gimp,inkscape,corel_draw .entre otros. además de eso  encontraras plugins de aplicacion para photoshop y fireworks,plantillas gratuitas para descargas siempre y cuando este registrado .


  24 columnas con la que podríamos trabajar si queremos . ahora voy a centrarme en la de 12 columnas de 960px.

en el ejemplo de arriba la  primera fila se trabajaria como grid_12 
la segunda como grid_1+grid_11 sumando 12 columnsas .
la tercera grid_2+grid_10.=12
y así sucesivamente 

 
sin olvidar el  cierre da cada columna es con 




   <div class="clear"></div> 

1 columna seria de 60px  como se  muestra  en la imagen de arriba  .
2=140px.
3=220px.
4=300px.
5=380px.
6=460px.
7=540px.
8=620px.
9=700px.
10=780px.
11=860px.
12=940px.

NOTA . Siempre  siempre totalizare a lo ancho 940px contando con cada margen es decir no podrá tener menos  ni mas de esta medida .

 
 


para ver mejor este ejemplo   sobre un  menú con su cierre .






   <div class="container_12">

   <nav class="grid_5 prefix_7">
        <ul>
       <li><a href="#">Contacto</a></li>
       <li><a href="#">Servicio</a></li>
        <li><a href="#">Nosotros</a></li>
       <li><a href="#">Home</a></li>
       <br class="clear"/>


        </ul>



   </nav>   
   <div class="clear"></div>








este menú  flota asía  la derecha       con un espacio en    blanco en la parte izquierda 


 <nav class="grid_5                                                            prefix_7








sabiendo que  5+7 suman 12 y colocando el espacio en blanco 


 en la grilla       prefix_7.








Los espacios en blanco se los doy con. 


 sufix_7    =  espacio de 7 columnas a la derecha  


 prefix_7  = espacio de 7 columnas a la izquierda 
 








mientras que  para  un pie de pagina con 3 columnas  seria un  grid_4 


por que?






por que 4x3  suman 12  . tendría  3 columnas de 4 sumando la mediada permitida .


el código de ejemplo seria este. 











<footer>
 <div class="container_12">
  <article class="grid_4 id="nosotros">
<h2>Sobre nosotros</h2>
<p>Letraset que contienen pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como Aldus PageMaker incluidas las versiones de Lorem Ipsum.</p>
  </article>


  <article class="grid_4 id="trabajos">
<h2>Nuestros trabajos </h2>
<p>Letraset que contienen pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como Aldus PageMaker incluidas las versiones de Lorem Ipsum.</p>
  </article>


  <article class="grid_4 id="contactos ">
   <h2>para mas información. </h2>
<p>Letraset que contienen pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como Ipsum.</p>
<ul>
<li><a href=""><span>faceboock</span></a></li>
<li><a href=""><span>twitter</span></a></li>
<li><a href=""><span>youtube</span></a></li>
<li><a href=""><span>rss</span></a></li>



</ul>
  </article>
            <div class="clear"></div>

 </div>

           <div class="clear"></div>

</footer>








Para quitarle ps de  margenes a la columnas en


                                                                                      derecha


 o izquierda                              con .






grid_4 alpha                               o                                grid_4 omega














que pasa si quiero algo personalizado con columnas menores  por ejemplo .






voy a custom css generator .






































Donde podre modificar 














































 Si quiero un sistema fluido es por este medio  ya que este sistema personaliza-ble se adapta a cualquier medida .


























 en descargar archivo css   generar un cogido como este .










/*
 Variable Grid System.
 Learn more ~ http://www.spry-soft.com/grids/
 Based on 960 Grid System - http://960.gs/

 Licensed under GPL and MIT.
*/

/*
  Forces backgrounds to span full width,
  even if there is horizontal scrolling.
  Increase this if your layout is wider.

  Note: IE6 works fine without this fix.
*/

body {
  min-width: 910px;
}

/* Containers
----------------------------------------------------------------------------------------------------*/
.container_13 {
 margin-left: auto;
 margin-right: auto;
 width: 910px;
}

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/

















copio y pego en mi css trabajando en base a mi personalización .


















espero te sirva .






 Tal vez te interese .



  

























Etiquetas:



















Comentarios











Publicar un comentario