Blog de diseño

Para realizar el tutorial debes bajar los archivos básicos del sitio NivelSytle. La idea es trabajar por niveles y bloques de contenido. La estructura básica es la siguiente:

	<div class="container">
		<div id="brandign">
			<h1><a href="#">Despliegue blog en porcentaje</a></h1>
		</div>
		<!-- fin brandign -->
		<div class="content">

            <!-- NIVELES -->	

		</div>
		<!-- fin content -->
		<div class="footer" >

			<!-- CONTENIDO FOOTER -->  

		</div>
		<!-- fin footer -->

	</div>
	<!-- fin container -->

Para que tengas el control de todo el nivel debes agregar una clase desde la cual definiras todas las clases del nivel. La estructura de un nivel es la siguiente:

<div class="nivel you-div-name1">
    <div class="container-block">
        <h2>Título del nivel</h2>
        <div class="block a">
            <div class="content-block">

               <!-- CONTENIDO -->

            </div>
            <!-- end content-block -->
        </div>
        <!-- end block a -->

    </div>
    <!-- end container-block-->
</div>
<!-- end nivel your-div-name1 -->

Dentro de cada nivel puedes agregar los bloques de contenido que necesites para desplegar la información. Un bloque no necesariamente es una columna, pues puedes tener un bloque que vaya de lado a lado de toda la página.

<div class="nivel you-div-name1">
    <div class="container-block">
        <h2>Título del nivel</h2>
        <div class="block a">
            <div class="content-block">

               <!-- CONTENIDO -->

            </div>
            <!-- end content-block -->
        </div>
        <!-- end block a -->
        <div class="block b">
            <div class="content-block">

               <!-- CONTENIDO -->

            </div>
            <!-- end content-block -->
        </div>
        <!-- end block b -->
        <div class="block c">
            <div class="content-block">

               <!-- CONTENIDO -->

            </div>
            <!-- end content-block -->
        </div>
        <!-- end block c -->

    </div>
    <!-- end container-block-->
</div>
<!-- end nivel your-div-name1 -->

Para realizar tu estructura personalizada en CSS, debes definir:

1. “.container”, el ancho de tu página:
   1. Puedes usar un ancho exacto ó en porcentaje
   2. Puedes agregarme margin y padding sin que se afecte tu contenido, recuerda que si defines un ancho en porcentaje de 100% para “.container” y agregas padding, la página crecerá al 100% de ancho y luego sumará el padding, así que tu página crecerá más del 100% y aparecerá el scroll inferior en el navegador
2. “.content”, puedes definirlo para brindarle padding o margin a todo el contenido
3. “.nivel”, para determinar la separación entre niveles. Te recomiendo para separar niveles usar el margin inferior.
4. Define tus clases globales, body, h1, h2, p, a, ul, etc.
5. Define la(s) clase(s) para el(los) nivel(es). Ejemplo “.despliegue-blog”, “.noticias-destacada”, puedes escribirlas a medida que realices cada nivel
6. Normas para escribir el CSS de cada nivel aprovechando siempre los mismos nombres de clases:
   1. “.tu-nombre-de-nivel”, el nombre del nivel. Esta clase será la clave para determinar todos los atributos del nivel, NO debes definir valores de padding de izquierda ó derecha (los puedes definir con “.container-block”). Si lo requieres puedes definir padding superior e inferior. En el ejemplo usaremos “.despliegue-blog”.
   2. “.container-block”, contiene los bloques y la usas para darle padding a tu nivel. Si te refieres a esta clase directamente afectará a todos los “.container-block” dentro de los niveles, para referirte a un “.container-block” específico, debe referirte desde su nombre de nivel, por ejemplo: “.despliegue-blog .container-block” de esta forma aseguras que solo afectas al nivel que necesitas.
   3. “.block abc”, la usas para los anchos de los bloques. Para usarla combinas la clase “.block” con las letras del abecedario, “.block.a”, “.block.b”, “.block.c”, etc. En el html se vé la clase “block” un espacio y una letra del abecedario, por ejemplo “block a”. Así que dentro del nivel “.despliegue-blog” puedes referirte a “.despliegue-blog .block.a” para determinar su ancho. notese que la clase en CSS está sin espacio, no debes referirte a la clases directamente “.block.a” sin su nombre de nivel, ya que te vas a referir directamente a todos los “.block.a” de los niveles, a menos que esa sea tu intención. Si vas a realizar un nivel donde los bloques tienen el mismo ancho, puede referirte directamente a “.block”. “.noticias-destacadas .block” para determinar el ancho y todas los “.block” dentro del nivel tendrán el mismo ancho.
   4. “.content-block”, padding ó margin dentro de un bloque. Si todos ó la mayoría de tus bloques tiene el mismo padding te refieres a ellos bajo su clase de nivel, ejemplo “.despliegue-blog .content-block” este padding no afecta el ancho del bloque hacia el exterior sino hacia el interior lo que hace que tus bloques conserven el mismo ancho, estén en porcentaje o en pixels exactos

He creado otra página de ejemplo mostrando un diseño tipo blog.

Siguiendo estos pasos puedes realizar cualquier tipo de platilla sencilla. Aprovechando la herencia también puedes diagramar bloques dentro de bloques, que dejaremos de tema para otro post.

Tags: CSS, framework, layout, NivelStyle

Esta entrada fue posteada el Saturday 6 de December de 2008. a las 11:21 am y fue archivada en CSS, NivelStyle. Puedes seguir cualquier respuesta de este entrada a través del feed RSS 2.0 . puedes Dejar un comentario, o trackback desde tu sitio.