Muchos diseñadores cuentan con un Theme de estas características para agilizar el trabajo, ya que muchos características se repiten de manera mecánica cuando de diseñar un Theme se trata.

Características:

• Bien comentado y semánticamente presentado
• XHTML 1.0 STRICT
• Widget-Ready
• Títulos optimizados en SEO
• Un archivo functions.php con algunas funciones básicas
• Una hoja de estilo con las clases y preceptos genéricos

Por ultimo, este Theme es libre de ser usado en proyectos, tanto personales como comerciales.

El grid de 52framework esta basado en 16 columnas de 52 pixels con 8 pixels para el gutter.

La características especificas de este Framework son:

HTML5

• Uso de la mayoria de los nuevos tags: header, nav, section, article, footer
• Implemtación y uso de los nuevos input field types: url, email
• Posibilidad de embeber javascript solo con el tag script
• Hoja de estilo para el reset pensando en HTML5

CSS3

• Implementación del nuevo selector ::selection para personalizar la selección de texto
• Redondear esquinas en cualquier elemento
• Text-Shadow en cualquier elemento
• Box Shadow para los elementos en bloque

Este Framework utiliza referencias simples de recordar y lógicas, por ejemplo; si necesitáramos crear un DIV de un height de 700px y un width de 500px, solo haríamos referencia a esta clase:

<div class=”rl w500 h700”>
    <div class=”rl w50 h70”></div>
</div>

Otro punto fuerte es el hecho de que Markercss se encuentra sub-dividido en distintos temas para una mejor compresión y aplicación: bordes, fondos, links, etc.

Como lo habrás notado los CSS Framework son cada vez mas comunes y potentes, hay opiniones encontradas a favor y en contra de ellos, pero en definitiva están aquí para quedarse.

#grid se a adapta a cualquier diseño, pero por defecto esta herramienta asume que esta trabajando con un ancho de 980px + 20px para el glutter. Tambien, por defecto se asume que el Vertical Rhythm esta basado en un lead de 20px. Pero todas estas opciones son configurables y adaptables a nuestro diseño.

Y por ultimo #Grid cuenta con una serie de shortcuts para hacernos la vida mas fácil, como mostrar y esconder la grilla, o convertir la grilla en sticky.

Easy incluye los siguientes archivos para que comiences a trabajar:

• Un documento html en blanco que incluye los links necesarios para que comiences con la produccion
• Un documento HTML a modo de demo para observar como se comporta el Framework
• Hojas de estilos, screen.css y print.css
• easy.js donde de se incluyen todas las funciones mencionadas
• main.js para añadir o modificar nuevas funciones
• Una versión comprimida de jQuery

La documentación de Easy es muy rica, por lo que no te toparas con problemas a la hora de implementar este Framework.

Mediante la proporción dorada y la secuencia de Fibonacci se logra un legibilidad casi perfecta a la hora de trabajar con tipografías.

azbuka tiene como premisas:

• Un texto por defecto en 13px
• Radio dorado para el line-height en 1.618em
• Fuentes Serif para los encabezados y san-serif para los párrafos
• Leve distanciamiento (line-height) en los encabezados, para mejorar la legibilidad
• Un color base de #111 en el texto para lograr un buen contraste

Desde el Code de Google podrás ver algunos demos para comprobar por mismo esta librería.

Otro de los puntos fuertes de este Framework es el tema de la Tipografía, ya que en él tenemos incluidas todas las reglas y propiedades para mantener lo que se llama horizontal and vertical rhythm, osea co-relacion en nuestra tipografía horizontal y verticalmente.

En cuanto a su uso, tengo que decir que tienen mucha lógica, ya que trabaja con lenguaje semántico: Armamos un Grid basado en seis columnas solo con mencionar la clase six_column y a su vez dentro de esta, la cantidad de columnas que necesitamos. De esta forma siempre tendremos una lógica y estética en el diseño logrando un diseño fluido.

JoobsBox es Open Source, si estas acostumbrado a trabajar con Fameworks o CMS lo encontraras muy sencillo de modificar por tus medios, y si no dispones de los conocimientos necesarios, con la comunidad de fondo, podrás obtener soporte.

Entre muchas de sus opciones, podemos mencionar:

• Potenciado por PHP Mysql y Zend Framework
• Multi lenguaje
• SEO friendly URLs
• Feeds para todas las categorías
• Poderoso buscador

Baseline, en lugar de usar la propiedad line-height (como sus competidores) usa la métrica de la tipografía para lograr armonía. Esta armonía se ve reflejada en los encabezados, párrafos y forms.

Comenzar a diseñar con este Framework es muy sencillo de llevar a cabo y desde el site podemos descargar los archivos necesarios, templates de ejemplos y el archivo PSD para poder comenzar a diseñar desde Photoshop.

Estas son 10 de las Cheat Sheets que considero fundamentales y han hecho que mi trabajo sea mucho más simple.

Wordpress Cheat Sheets

Es una de las hojas mas completas en materia Wordpress, cubre las necesidades fundamentales, como estructura de los archivos básicos, pequeños Snippets para el header y templates y diversos hacks.

En su momento estaba en español, si alguno conoce de un link con la traducción, déjenme saber.

PHP,HTML & CSS Cheat Sheets

Liquidicity ha creado hace ya un tiempo una de las mejores hojas de referencias, muy bien documentadas, presentadas y explicadas. Podes descargar el Pack completo o las hojas que te interesen.

Adobe Photoshop CS4 Cheat Sheets

Como es casi imposible recordar todos los atajos del teclado que trae PS, esta hoja nos facilitara la tarea. Todos los atajos se encuentran ordenados en 4 paginas, por orden en el Menú y alfabéticamente.

HTML5 Cheat Sheet

Si bien HTML5 no es soportado al 100% en estos tiempo, nada nos impide utilizar las facilidades de este lenguaje el día de hoy.

CSS3 Cheat Sheet

Mismo comentario que con la hoja anterior, no es 100% soportado hoy, pero la mayoría de los navegadores modernos ya han incluido soporte para este lenguaje con el que se puede diseñar y programar de manera mas amena.

Blueprint CSS Cheat Sheet

Mi Framework preferido a la hora de trabajar. En esta hoja están correctamente presentadas todas las clases y referencias necesaria para un rápido Coding.

Colores RGB Hex Cheat Sheet

Una lista muy simple con denominados colores “Web safe” para poder trabajar tranquilos. Esta hoja cuenta con 216 colores en sus valores RGB y Hex.

SEO Cheat Sheet

Por ultimo y no menos importante esta hoja te ayudara a mejorar tu SEO explicándote el correcto uso de las etiquetas con documentación y ejemplos.