Código de las cajas de texto

Bueno, tal vez esta entrada no tenga mucho sentido, pero me sirve para entender como funcionan las cajas de texto en mi nuevo blog (es una sorpresa).

El texto para las cajas de texto en el área de contenido es el siguiente:

<div class="contentbox-container">
  <div class="contentbox-full">
    <div class="contentbox-title-shading-small bg-blue04 box-on">&nbsp;</div>
    <div class="contentbox-title-shading-small">Título</div>
    <div class="contentbox-shading bg-blue01">
      <p>Contenido</p>
    </div>
  </div>
 </div>

La primera línea es un <div> que se llama contentbox-container y es el “contenedor” de toda la caja.
La segunda div se llama contentbox-full y define el tipo de caja; en este caso es full, otras opciones son half (left y rigth) y third (left, middle y right).
La tercera div llamada contentbox-title-shading-small, como su nombre lo dice es una caja de título con color de fondo (shading) tamaño pequeño. Los parámetros que usan son el color: bg-blue04 y box-on que sirve para indicar que es una cajita en la misma linea que la div siguiente.
La cuarta div es el título en si, y ahora sin ningún parámetro. Se llama también contentbox-title-shading-small
La quinta div envuelve al contenido, se llama contentbox-shading lo que indica que es una caja de texto, con color de fondo (shading), el color es bg-blue01.

Este es el tipo de caja que ocupa solo la mitad del área de contenidos, veamos el código y sus opciones:

<div class="contentbox-container">
  <div class="contentbox-half-left">
    <div class="contentbox-title-shading-small bg-blue03 box-on">&nbsp;</div>
    <div class="contentbox-title-shading-small">Anuncio</div>
    <div class="contentbox-noshading">
      <p>Contenido</p>
    </div>
  </div>
</div>

Las opciones de las cajas de texto son las mismas, esta en particular se llama contentbox-half-left lo que indica que es de tamaño medio, ubicada en la parte izquierda, para ubicar la caja en el lado derecho, usamos la caja contentbox-half-right. Lo mismo aplica para las cajas de un tercio contentbox-third-left, contentbox-third-middle y contentbox-third-right.

La barra lateral

La barra lateral se ubica dentro de una div llamada sidebar, usa además la clase sidebar-font para indicar el tipo de letra.

Un cuadro típico dentro de la barra lateral es este:

<div class="sidebarbox-border">
  <div class="sidebarbox-title-noshading line-red10">Lorem ipsum</div>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

Los colores

Existen tres tipos de obetos a los que podemos aplicarles colores texto (txt), fondos (bg) y líneas (line).

Además, existen los siguientes colores, con excepción de los dos primeros existen 10 tonos de cada uno, identificados con los números de 01 al 10:

Blanco (white)
Negro (black)
Gris (grey) en incrementos de 5% y 10%
Amarillo (yellow), basado en el Pantone YellowC con incrementos del 10%
Azul (blue) , basado en Pantone 2726C, con incrementos del 10%
Verde (green), basado en el Pantone 369C, con incrementos del 10%
Rojo (red), basado en el Pantone 179C, igualmente en incrementos del 10%.

Para usar un esquema de color, debemos unir el objeto, el color y el índice, por ejemplo para una línea color azul medio usaríamos line-blue05, para texto sería text-blue05.