Guías de estilo front-end para sitios existentes

Una auditoría de código CSS en un sitio web antes de continuar construyendo.

Desde que trabajamos con la Paz Vial , todos los años hacemos cambios en el sitio, este año estamos trabajando en grandes cambios, pero tenemos un legado de 3 años de modificaciones al CSS y entremedio adoptamos SASS, hay que hacer orden y limpieza, especialmente documentando los estilos de la marca. Acabo de terminarme la “Guía de bolsillo” Front-end Style Guides de Anna Debenham Es una confirmación de algo que sospechaba hace tiempo. Además da un montón de buenos recursos (mencionaré un par aquí).

Lo primero es hacer una documento HTML que usaremos para poner todos los elementos del sitio dentro y ver cómo se comportan solos.

Inicialmente usamos el mismo markup del resto del sitio, cargamos los mismos .CSS y .JS.

Luego ponemos un documento base, con los típicos contenidos de un sitio, agregamos los elementos complejos que se han creado para el sitio en cuestión. Ideal es generar esta hoja de contenidos con el markup y contenido que ya existe en la página. Pero aquí pongo contenido HTML que usamos como base para generar hojas de estilo.


<h1>Título H1 <a href="#">con link</a></h1>
<p>Un corto párrafo de texto justo debajo del encabezado H1. Debemos agregar más texto y contenido para descubrir hasta donde llega el ancho de la caja del párrafo, es paráctico hacerlo también para los encabezados y bajadas de texto. Debemos enunciar un <a href="#">link o ancla</a> dentro del párrafo e idealmente hacer.</p>
<p>Un segundo párrafo para hacernos una clara idea de los márgenes entre párrafos y con el siguiente encabezado. Hay gente que gusta de dar estilo al elemento <code><section></code> pero prefiero usar este espacio para difinir los elementos que van dentro del párrafo, como <small>small o pequeño</small>, <strong>strong</strong>, <b>b (bold)</b>, <em>em (emphasis)</em>, <i>i (italics o cusrivas)</i>.</p>
<hr>
<p>Entre el párrafo anterior y este hay un elemento <code><hr></code></p>
<h2>Subtítulo H2 <a href="#">con link</a></h2>
<p>Otro párrafo para hablar sobre otros elementos como listas, que a su vez pueden listar otros elementos:<p>
<ul>
	<li><code><q></code>: <q>Ser o no ser...</q></li>
	<li><code><kbd></code>: <kbd>cd format c:</kbd></li>
	<li><code><samp></code>: <samp>Are you sure you want to format C? It will delete all files and folders.</samp></li>
	<li><code><code></code>: <code>line-height:2.25em;</code></li>
	<li><code><code class="language-css"></code>: <code class="language-css">line-height:2.25em;</code></li>
</ul>
<h3>Subtítulo H3 <a href="#">con link</a></h3>
<p>El siguiente párrafo puede tratar asuntos como la combinación de elementos en línea como <strong><em>strong>em destacado con énfasis, pero semánticamente lo encuentro un poco redundante</em></strong> en cambio <b><i>b>i —bold con itálicas—</i></b> o <i><b>i>b —itálicas con bold—</b></i> que se ven iguales, pero tienen significados semántigos distintos.</p>
<p>A continuación un <code><blockquote></code></p>
<blockquote>
	<p>The picture element is intended to give authors a way to control which image resource a user agent presents to a user, based on media query and/or support for a particular image format.</p>
</blockquote>
<h4>Subtítulo H4 <a href="#">con link</a></h4>
<p>¿Por qué no usar lorem Ipsum? Porque diseñar sin contenido es un ejercicio incompleto. Lorem ipsum es como un bastón para alguien que no lo necesita y no corre porque tiene el bastón. Usar Lorem ipsum es un parche, que ni siquiera toma en consideración los caracteres especiales del español.</p>
<h5>Subtítulo H5 <a href="#">con link</a></h5>
<p>Desde hace algún tiempo ya, hemos ido eliminando completamente el uso de <i>Lorem Ipsum</i>, porque termina ocultando problemas de contenido. Muchas veces, entre el cliente y uno mismo nos conformamos con esta muletilla e ignoramos la falta del contenido, muchas veces, haste que ya es demasiado tarde. Ha pasado que ni siquiera existe el contenido que se suponía iba en el lugar llenado con texto simulado.</p>
<h6>Subtítulo H6 <a href="#">con link</a></h6>
<p>Aunque se puede argumentar que este mismo ejercicio es una contradicción de lo anterior. Porque estamos inventando párrafos y texto que no es contenido final, con el sólo propósito de testear los estilos gráficos de una manera genérica.</p>
<h2>Imágenes</h2>
<h3>Imagen sola</h3>
<img src="img/content/el-rey-abejo-lego.jpg" alt="Figura de lego de personaje, El Rey Abejo">
<h3>Imágen en una figura <code><figure></code></h3>
<figure>
	<img src="img/content/el-rey-abejo-dibujo.jpg" alt="Dibujo de personaje con ropa amarilla y un látigo, el Rey Abejo">
	<figcaption>El Rey Abejo demuestra el uso de su látigo bandeado con punta de rubí.</figcaption>
</figure>
<h3>Imagen en línea</h3>
<p>Aquí hay una imagen de la Amanita muscaria, también conocido como matamoscas o falsa oronja. Las imágenes en línea, deben estar alineadas verticalmente a la línea base o <code class="language-css">vertical-aign:baseline;</code> Así queda alineada a la base de la línea de texto donde se encuentra incrustada. Las imágenes en línea <img src="img/content/casa-pitufos.png" alt="Dos hongos amanita muscaria"> sí aceptan valores para <code class="language-css">margin-top</code> y <code class="language-css">margin-bottom</code>, a diferencia de los <span>span</span>.</p>
<h2>Listas</h2>
<h3>Lista ordenada <code><ol></code></h3>
<ol>
	<li>Primer ítem</li>
	<li>Segundo ítem <a href="#">con link</a></li>
	<li>Tercer ítem <em>con énfasis</em></li>
	<li>Cuarto ítem <strong>con fuerte énfasis</strong></li>
	<li>El quinto ítem tiene una sub-lista
		<ol>
			<li>Uno</li>
			<li>Dos</li>
			<li>Tres</li>
			<li>Cuatro</li>
		</ol>
	</li>
</ol>
<h3>Lista sin orden <code><ul></code></h3>
<ul>
	<li>Primer ítem</li>
	<li>Segundo ítem <a href="#">con link</a></li>
	<li>Tercer ítem <em>con énfasis</em></li>
	<li>Cuarto ítem <strong>con fuerte énfasis</strong></li>
	<li>El quinto ítem tiene una sub-lista
		<ul>
			<li>Uno</li>
			<li>Dos</li>
			<li>Tres</li>
			<li>Cuatro</li>
		</ul>
	</li>
</ul>
<h3>Lista con bloques dentro de cada elemento.</h3>
<ul>
	<li><code><li></li></code>La factura electrónica es un documento digital legalmente válido como medio de respaldo de las operaciones comerciales entre contribuyentes y, por lo tanto, reemplaza a las facturas tradicionales de papel. El ser facturador electrónico habilita al contribuyente como emisor y receptor de Documentos Tributarios Electrónicos (DTE) como por ejemplo: factura electrónica, nota de crédito, nota de débito y guía de despacho.</li>
	<li><p><code><li><p></p></li></code>Sus costos dependerán del precio del sistema que le ofrece la empresa proveedora y de su implementación.  Más los costos técnicos y de operación, como por ejemplo: compra de Certificado Digital, Internet,  Computador e Impresora.</p></li>
	<li>
		<p><code><li><p></p><p></p><p></p></li></code></p>
		<p>Pueden emitir facturas, notas de crédito y débito, guía de despacho, factura de compra, de exportación, notas de crédito y débito de exportación, liquidación factura , boletas afectas, ente otros.</p>
		<p>El Sistema no tiene costos, excepto los asociados a los requisitos técnicos y de operación, como por ejemplo: compra de Certificado Digital, Internet, Computador e Impresora.</p>
	</li>
	<li>
		<img src="img/content/huinganal-con-nieve.jpg" alt="Fotografía de cerro nevado con ciclista subiendo y cerro manquehue a la distancia">
		<p><code><li><img></li></code></p>
	</li>
</ul>
<h2>Formularios y sus elementos</h2>
<form id="unoFormo" action="./">
	<p>Los elementos de un form, en general, son por defecto <code class="language-css">display:inline;</code> y <code class="language-css">display:inline-block;</code> por lo que es mejor meterlos dentro de un bloque para que no quede una majamama de elementos.</p>
	<p>Personalmente prefiero las listas y en los estilos defino que los li dentro de un form se comportan parecido a un div.</p>
	<ul>
		<li><label for="nombre1">Etiqueta 1: para texto</label>
		<input type="text" name="nombre1" id="nombre1"></li>
		<li><label for="nombre2">Etiqueta 2: para email</label>
		<input type="email" name="nombre2" id="nombre2"></li>
		<li><label for="nombre3">Etiqueta 3: para número</label>
		<input type="number" name="nombre3" id="nombre3"></li>
		<li><label>Etiqueta 4: con el input adentro <input type="text" name="nombre4" id="nombre4" placeholder="con texto placeholder"></label>
		<li><label for="nombre5">Etiqueta 5: Búsqueda</label>
		<input type="search" name="nombre5" id="nombre5"></li>
		<li><label for="nombre6">Etiqueta Checkbox</label>
		<input type="checkbox" name="nombre6" id="nombre6"></li>
		<li><label><input type="checkbox" name="nombre7" id="nombre7"> Etiqueta Checkbox con caja dentro del <code><label></code></label></li>
		<li><label>Etiqueta Checkbox con caja dentro del <code><label></code>, a la derecha: <input type="checkbox" name="nombre8" id="nombre8"></label></li>
		<li><label for="nombre11"> Etiqueta antes de: </label><input type="radio" id="nombre11" name="nombreRadios"></li>
		<li><input type="radio" id="nombre12" name="nombreRadios"><label for="nombre12">Etiqueta después del radio</label></li>
		<li><label><input type="radio" id="nombre13" name="nombreRadios"> Etiqueta Radio con caja dentro del <code><label></code></label></li>
		<li><label>Etiqueta Radio con caja dentro del <code><label></code>, a la derecha: <input type="radio" id="nombre14" name="nombreRadios"></label></li>
		<li><label for="elSelect">Etiqueta: Seleccione un número</label> <select name="elSelect">
			<option value="0">Seleccione...</option>
			<option value="1">Uno</option>
			<option value="2">Dos</option>
			<option value="3">Tres</option>
		</select></li>
		<li><input type="button" name="nombre8" id="nombre8" value="Input botón">
		<button type="button">Button</button>
		<p>Ojo que un button debe tener <code>type="button"</code> si no se quiere que envíe automáticamente el formulario.</p></li>
		<li>A veces es útil tener estilos para que <a href="#" class="button">link</a> parezca botón <code>a.button</code></li>
		<li><textarea name="nombre7" id="nombre7" cols="30" rows="10"></textarea></li>
	</ul>
</form>
<h2>Tablas</h2>
<p>Las tablas son para mostrar información tabulada, en celdas.</p>
<table cellspacing="0">
	<thead><tr>
		<th>Cepa</th>
		<th>Año plantación</th>
		<th>Has. plantadas</th>
	</tr></thead>
	<tbody>
		<tr>
			<td>Merlot</td>
			<td>2010</td>
			<td>10</td>
		</tr>
		<tr>
			<td>Cabernet Franc</td>
			<td>2009</td>
			<td>7,6</td>
		</tr>
		<tr>
			<td>Cabernet Sauvignon</td>
			<td>2011</td>
			<td>5</td>
		</tr>
		<tr>
			<td>Syrah</td>
			<td>2008</td>
			<td>11,2</td>
		</tr>
		<tr>
			<td>Malbec</td>
			<td>2012</td>
			<td>1</td>
		</tr>
		<tr>
			<td>Carmenere</td>
			<td>2009</td>
			<td>7,4</td>
		</tr>
	</tbody>
	<tfoot>
	<tr>
		<td>Totales:</td>
		<td></td>
		<td>42,2 Has.</td>
	</tr>
	</tfoot>
</table>
<h2>Más elementos o grupos</h2>
<p>Hay muchos más elementos y innumerables combinaciones de estos, la idea es ir agregando aquí los de uso más común, o específicos de cada proyecto. Algunos ejemplos:</p>
<ul>
	<li>Paginación</li>
	<li>Fechas <code><time></code></li>
	<li>Direcciones</li>
	<li>Marcas de edición <code><mark><del><ins></code></li>
</ul>

Veamos cómo queda este texto con la hoja de estilos de este blog.

Título H1 con link

Un corto párrafo de texto justo debajo del encabezado H1. Debemos agregar más texto y contenido para descubrir hasta donde llega el ancho de la caja del párrafo, es paráctico hacerlo también para los encabezados y bajadas de texto. Debemos enunciar un link o ancla dentro del párrafo e idealmente hacer.

Un segundo párrafo para hacernos una clara idea de los márgenes entre párrafos y con el siguiente encabezado. Hay gente que gusta de dar estilo al elemento <section> pero prefiero usar este espacio para difinir los elementos que van dentro del párrafo, como small o pequeño, strong, b (bold), em (emphasis), i (italics o cusrivas).

Entre el párrafo anterior y este hay un elemento <hr>

Subtítulo H2 con link

Otro párrafo para hablar sobre otros elementos como listas, que a su vez pueden listar otros elementos:

  • <q>: Ser o no ser...
  • <kbd>: cd format c:
  • <samp>: Are you sure you want to format C? It will delete all files and folders.
  • <code>: line-height:2.25em;
  • <code class="language-css">: line-height:2.25em;

Subtítulo H3 con link

El siguiente párrafo puede tratar asuntos como la combinación de elementos en línea como strong>em destacado con énfasis, pero semánticamente lo encuentro un poco redundante en cambio b>i —bold con itálicas— o i>b —itálicas con bold— que se ven iguales, pero tienen significados semántigos distintos.

A continuación un <blockquote>

The picture element is intended to give authors a way to control which image resource a user agent presents to a user, based on media query and/or support for a particular image format.

Subtítulo H4 con link

¿Por qué no usar lorem Ipsum? Porque diseñar sin contenido es un ejercicio incompleto. Lorem ipsum es como un bastón para alguien que no lo necesita y no corre porque tiene el bastón. Usar Lorem ipsum es un parche, que ni siquiera toma en consideración los caracteres especiales del español.

Subtítulo H5 con link

Desde hace algún tiempo ya, hemos ido eliminando completamente el uso de Lorem Ipsum, porque termina ocultando problemas de contenido. Muchas veces, entre el cliente y uno mismo nos conformamos con esta muletilla e ignoramos la falta del contenido, muchas veces, haste que ya es demasiado tarde. Ha pasado que ni siquiera existe el contenido que se suponía iba en el lugar llenado con texto simulado.

Subtítulo H6 con link

Aunque se puede argumentar que este mismo ejercicio es una contradicción de lo anterior. Porque estamos inventando párrafos y texto que no es contenido final, con el sólo propósito de testear los estilos gráficos de una manera genérica.

Imágenes

Imagen sola

Figura de lego de personaje, El Rey Abejo

Imágen en una figura <figure>

Dibujo de personaje con ropa amarilla y un látigo, el Rey Abejo
El Rey Abejo demuestra el uso de su látigo bandeado con punta de rubí.

Imagen en línea

Aquí hay una imagen de la Amanita muscaria, también conocido como matamoscas o falsa oronja. Las imágenes en línea, deben estar alineadas verticalmente a la línea base o vertical-aign:baseline; Así queda alineada a la base de la línea de texto donde se encuentra incrustada. Las imágenes en línea Dos hongos amanita muscaria sí aceptan valores para margin-top y margin-bottom, a diferencia de los span.

Listas

Lista ordenada <ol>

  1. Primer ítem
  2. Segundo ítem con link
  3. Tercer ítem con énfasis
  4. Cuarto ítem con fuerte énfasis
  5. El quinto ítem tiene una sub-lista
    1. Uno
    2. Dos
    3. Tres
    4. Cuatro

Lista sin orden <ul>

  • Primer ítem
  • Segundo ítem con link
  • Tercer ítem con énfasis
  • Cuarto ítem con fuerte énfasis
  • El quinto ítem tiene una sub-lista
    • Uno
    • Dos
    • Tres
    • Cuatro

Lista con bloques dentro de cada elemento.

  • <li></li>La factura electrónica es un documento digital legalmente válido como medio de respaldo de las operaciones comerciales entre contribuyentes y, por lo tanto, reemplaza a las facturas tradicionales de papel. El ser facturador electrónico habilita al contribuyente como emisor y receptor de Documentos Tributarios Electrónicos (DTE) como por ejemplo: factura electrónica, nota de crédito, nota de débito y guía de despacho.

  • <li><p></p></li>Sus costos dependerán del precio del sistema que le ofrece la empresa proveedora y de su implementación. Más los costos técnicos y de operación, como por ejemplo: compra de Certificado Digital, Internet, Computador e Impresora.

  • <li><p></p><p></p><p></p></li>

    Pueden emitir facturas, notas de crédito y débito, guía de despacho, factura de compra, de exportación, notas de crédito y débito de exportación, liquidación factura , boletas afectas, ente otros.

    El Sistema no tiene costos, excepto los asociados a los requisitos técnicos y de operación, como por ejemplo: compra de Certificado Digital, Internet, Computador e Impresora.

  • Fotografía de cerro nevado con ciclista subiendo y cerro manquehue a la distancia

    <li><img></li>

Formularios y sus elementos

Los elementos de un form, en general, son por defecto display:inline; y display:inline-block; por lo que es mejor meterlos dentro de un bloque para que no quede una majamama de elementos.

Personalmente prefiero las listas y en los estilos defino que los li dentro de un form se comportan parecido a un div.

  • Ojo que un button debe tener type="button" si no se quiere que envíe automáticamente el formulario.

  • A veces es útil tener estilos para que link parezca botón a.button

Tablas

Las tablas son para mostrar información tabulada, en celdas.

Cepa Año plantación Has. plantadas
Merlot 2010 10
Cabernet Franc 2009 7,6
Cabernet Sauvignon 2011 5
Syrah 2008 11,2
Malbec 2012 1
Carmenere 2009 7,4
Totales: 42,2 Has.

Más elementos o grupos

Hay muchos más elementos y innumerables combinaciones de estos, la idea es ir agregando aquí los de uso más común, o específicos de cada proyecto. Algunos ejemplos:

  • Paginación
  • Fechas <time>
  • Direcciones
  • Marcas de edición <mark><del><ins>

Haciendo esta prueba en este blog noto varias falencias en mi hoja de estilos, hay varios usos que no contempla; pero en términos generales estoy bastante contento con lo completa que construí la hoja de estilos.

Haciendo el mismo ejercicio para el sitio de la Paz Vial, noto errores en los estilos básicos, varios de los cuales me habría ahorrado de haber usado Normalize en vez de un reset de
CSS, pero no existía normalize.css en esa época. El resultado del ejercicio lo pueden ver en: estilos.pazvial.cl/ .

En este caso usamos los elementos existentes en el sitio, durante el re-diseño iremos agregando correcciones y el esqueleto de aquí arriba. Una vez pegado los típicos elementos se pueden seguir agregando otras cosas que se hayan creado para el sitio, como navegación, footer y cualquier elemento que necesite tener estilos.

Otra cosa que es práctico agregar es el uso del logotipo de la marca, poner todas las versions disponibles, y si hay mútiples formatos de archivo, almenos agregar links a ellos. Es también un buen lugar para mantener los manuales de normas gráficas.

Conclusión

Este documento HTML base tiene su propio repositorio en GitHub github.com/MedulaDesign/guias-estilo . Lo usamos como boilerplate para que al hacer los estilos no se nos quede nada en el tintero.

Tiene 3 hojas de estilo que van aumentando la complejidad, primero se aplica normalize, luego algunas arbitrariedades para que no se vea tan feo y ajustar algunas cosas que normalize no considera, luego tiene una tercera hoja de estilo con mañas mías y clases helper, cosas como estilos básicos para tablas, listas dentro de los nav o forms, un poco de color, etc.

Esto está basado principalmente en la Guía de estilo de Paul Robert Lloyd para Barebones que a su vez está basada en la Pattern primer de Jeremy Keith

Published :

Start date :

Last modified :

Comments

comments powered by Disqus