960.gs otro framework CSS

24 marzo 2008 - Software | CSS

Me entero vía Digital web de la existencia de un nuevo framework CSS llamado 960.gs

Si blueprint hace especial hincapié en el cuidado del interlineado, 960.gs (gs = grid system) parece que se centra en la retícula vertical permitiendo armar una maqueta en base a columnas. Viendo este framework no puedo dejar de mencionar lo que se me antoja su complemento ideal, el reticulator del Dr. Naranja para pintar en Fireworks basándonos en una retícula.

Algún día de estos tengo que armar mi propio framework CSS, porque la verdad es que uno termina hasta el moño de tirar siempre el mismo código para las mismas cosas y las manías, la edad, o ambas cosas, hacen que nunca me guste usar clases ajenas para mis páginas.

Por cierto, que Google Adsense podía haber pensado en estas cosas de las retículas antes de definir sus formatos de anuncios, porque te curras un diseñito super reticulado y luego resulta que metes Adsense y queda como el culo (¡ha dicho culo!). Alguien debería hacer un frameset para 960 teniendo en cuenta los formatos de Adsense pero claro, eso apesta a rendición ante el Gran Hermano y no creo que nadie se anime.

Comentarios

Formularios basados en retículas CSS

30 julio 2007 - Software | XHTML

La idea es definir la anchura de los campos del formulario basándonos en la etiqueta <label>. Esta etiqueta se utiliza para mostrar el nombre de cada campo y puede codificarse de dos maneras:

Una de ellas es aplicándole el parámetro for para relacionar cada label con el input/select/textarea que le corresponda.

<label for="nombre">Nombre:</label><input type="text" name="nombre />

La otra manera, que es la que utilizaremos aquí, es englobar el input/select/textarea dentro de una etiqueta <label>, de modo que ya no es encesario emplear el parámetro for para establecer la relación:

<label>Nombre:<input type="text" name="nombre /></label>

La maqueta basada en retícula supone, antes de nada, establecer la retícula. Para el ejempo usaré pixels, aunque puede hacerse también con porcentajes o con ems.

Vamos a maquetar un formulario de 300px de ancho basado en una retícula de 3 columnas, así que cada columna tendrá 90pixels de ancho y 10px de margen derecho.

Sobre esta retícula, podemos tener campos que ocupen 1, 2 ó 3 columnas, resultados campos de:

• ancho1 (100) = 90px + 10px de margen
• ancho2 (200)= 190 +10px de margen
• ancho3 (300)= 290 +10px de margen

Bueno, ya tenemos las premisas para empezar a construir nuestro CSS.

Primero, al formulario le daremos el ancho de la retícula que nos hemos propuesto: 300px, aunque puede tener más si nos conviene para la estética, añadir padding..: realmente el formulario no influirá en la retícula, lo ponemos así por un cuestión formal.

.formulario 
{padding:0; width:300px;overflow:hidden;}

Ahora, pondremos los labels a flotar para que se vayan apilando uno a continuación del otro. Les daremos un margen derecho de, por ejemplo, 10px para separar las columnas de la retícula del formulario. Además de esto, para que el apilamiento funcione bien, forzaremos la altura de los labels ya que los select y los inputs no pintan igual en IE, de modo que los bloques de labels, al tener distinta altura, no se apilarían bien. Le damos un poco más de lo que pensamos que tendrá de altura un label (un em para el texto, otro em para el input/select y otro em para que exista margen vertical entre cada renglón de campos).

.formulario label
{float:left; margin-right:10px; height:3em}

.ancho1 {width:90px;}

.ancho2 {width:190px;}

.ancho3 {width:290px;}

Sólo falta decirle a los inputs y selects que ocupen todo el ancho de su contenedor, ya que son realmente los labels los que están fijando la anchura de cada campo.

.formulario input, .formulario select, .formulario textarea 
{width:100%;}

Si decoramos los campos con un borde por CSS, debemos reducir un poco el ancho ya que IE sumará al 100% los pixeles del border desbaratándolo todo.

.formulario input, .formulario select, .formulario textarea
{border:1px solid blue; width:99%;}

Ahora sólo nos falta el botón de enviar. Para que haga juego con nuestros labels apilados, lo flotamos a la izquierda y le damos margen superior de 1em para compensar que el botón no lleva el texto de un <label> por encima.

.formulario button
{float:left; margin-top:1em;}

Total, nos quedaría algo así:

CSS

.formulario
{padding:0; width:300px;overflow:hidden;}

.formulario label
{float:left; margin-right:10px; height:3em}

.formulario input, .formulario select, .formulario textarea
{border:1px solid blue; width:99%;}

.ancho1 {width:90px;}

.ancho2 {width:190px;}

.ancho3 {width:290px;}

.formulario button
{float:left; margin-top:1em;}

XHTML

<form class="formulario" action="#">

<label class="ancho1">

Tratamiento:

<select name="tratamiento">

<option value="1">Señor</option>

<option value="2">Señora</option>

<option value="3">Señorita</option>

</label>

<label class="ancho2">Nombre:<input type="text" name="nombre"/>

<label class="ancho3">Apellidos:<input type="text" name="nombre"/>

<label class="ancho1">Edad:

<select name="edad">

<option value="niño">0-15 años</option>

<option value="joven">15-35 años</option>

<option value="maduro">35-60 años</option>

<option value="viejo">60 o más</option>

</select>

</label>

<button type="submit">Enviar</button>

</form>

Y este sería el resultado (añádase algún detalle CSS para dejarlo curioso):

Tratamiento: Señor Señora Señorita Nombre: Apellidos: Edad: 0-15 años 15-35 años 35-60 años 60 o más Enviar

Ésto aún está un poco verde ¡Se admiten sugerencias! [4]

Más espacio para escribir en Textpattern

18 diciembre 2006 - Software | Textpattern

Si hay algo que no me gusta de Textpattern es tener tan poco espacio para escribir el código, sobre todo en la pestaña "formulario" que suele ser donde más se termina complicando la cosa y al final no hay quien se aclare para tocar el código en tan poco espacio con tanto salto de línea.

Si te pasa lo mismo que a mi, puedes probar esta versión retocada de textpattern.css (colocar en tuweb/textpattern/texpattern.css). No está nada pulida (no le he dedicado más de 5 minutos) pero es suficiente para ganar caracteres en los inputs y texareas de la zona central de las pestañas "escribir", "formulario" y "páginas".

Si olvidas hacer copia de seguridad -o te da la misma pereza que a mi -y no te gusta cómo queda, recuerda que siempre puedes volver a recuperar este archivo del paquete de instalación de Textpattern.

Y tú ¿tienes algún truquillo con Textpattern? [2]

CSS: cada maestrillo tiene su librillo

28 julio 2006 - Software | CSS

Lejos de querer sentar cátedra os cuento cómo me lo monto yo y os animo a que me contéis vuestras triquiñuelas para bregar con las CSS.

Intenta utilizar ID sólo para definir grandes zonas de las páginas (#cabecera, #pie, #menu….)

No lo he leído en ningún sitio, pero tengo la sensación de que un ID manda más que un class, con lo que el uso de IDs bloquea un poco la herencia de estilos y en ocasiones hace que espesemos nuestras hojas de estilo. Utiliza pocos IDs para definir grandes zonas y poder así aislar etiquetas HTML como #menu a, #pie a…

Define primero las etiquetas, después los IDs y los class

Si no te volverás loco con la herencia de propiedades.

Dentro de un estilo, define por este orden: posición, después las dimensiones, márgenes y paddings, tipografía, fondos y bordes.

El orden viene dado por poner primero los elementos que más afectan a la composición de bloques y dejar al final los que menos influyen y que, además, suelen ser los que más se retocan: color, bordes, tipografía…

Nunca declares en un mismo estilo un ancho con un padding y/o un borde.

IE añade el padding al ancho (ancho pintado = ancho + paddings laterales) con el alto pasa lo mismo, pero no suele importar. Ffox añade el border al ancho. Si mezclas anchos y paddings/bordes tendrás que recurrir a “hacks” y esto es una lata.

No uses hacks

Las cosas tipo “width:20px; /width:18px; /width:20px;” son un pestiño. A veces es mucho mejor meter un div de más para esquivar un hack y, en general, si te lo piensas dos o tres veces, verás que no necesitas ese div de más para esquivarlos.

Primero escribe el HTML que necesitarás, después el CSS

Si lo haces así, tendrás un HTML más limpio, ligero, semántico y elegante. Un error muy frecuente cuando empezamos con esto del CSS es usar HTML para pintar cosas: con el tiempo verás que apenas necesitas “div presentacionales”: casi todo se puede pintar desde la CSS.

Evita usar imágenes en el HTML más allá del contenido

Si quieres hacer un botón de imprimir con un icono de impresora mejor créale un estilo para añadir la imagen de fondo y deja limpio el HTML, algo tipo <a href="window.print();" class="imprimir">Imprimir</a>

Utiliza colores de fondo

Si tienes una imagen de color rojo de fondo en un div, añade color de fondo rojo, mejorarás la sensación de carga de la página y te asegurarás de que, aunque no se carguen las imágenes, quedarán definidas las diferentes zonas de contenidos que quieres marcar en la página.

Comenta la CSS

Se sincero contigo mismo: si no te vas a acordar mañana de por qué pusiste ese “padding-left” coméntalo, siempre hay tiempo para borrarlo.

Comenta el HTML

Comentar el cierre de los divs con el id o class del div te ahorrará horas de trabajo <div id="menu">...</div><!<del>-/menu</del>->

No te olvides de las impresoras

Los cuatro gatos que se impriman una página maquetada por ti te agradecerán enormemente una CSS para impresora.

Si usaste IDs para las grandes zonas, ahora es momento de tirar de ellas para ocultar todo lo que es prescindible en impresora, como los menús de navegación, los adwords, formularios inútiles en papel… Fuerza a negro todo el texto posible (ojo con los enlaces) y asegúrate de que tus textos superen el tirón de una impresión en blanco y negro.

Define una tipografía y tamaño que sean agradables para leer impresos y, aunque seas forofo de los ems, plantéate usar puntos en lugar de ems para la versión impresa.

Monta las cosas en un navegador decente, y después lo pruébalo en IE

Hacerlo al revés suele dar más problemas.

Y ya está. Si se me ocurren más cosillas, habrás segunda parte (aunque nunca fueron buenas). ¡¡¡¡Me voy de vacaciones!!!

Y tú qué ¿cómo te lo montas con el CSS? [7]

« Anterior