Archetype: una plantilla adaptativa para HTML5

arquetipo
(Del lat. archety̆pus, y este del gr. ἀρχέτυπος).
1. m. Modelo original y primario en un arte u otra cosa.

Como cualquier desarrollador front-end, cada vez que empiezo un nuevo sitio web me enfrento con el tedioso proceso de crear carpetas para estáticos, buscar la sintaxis exacta del Doctype, copiar las reglas para resetear la hoja de estilos… Afortunadamente, en la actualidad hay varios frameworks de una calidad excelente, como Bootstrap, Foundation o HTML5 Boilerplate, que permiten iniciar la construcción de un sitio web a partir de un esqueleto predefinido de HTML + CSS + JavaScript.

5865032805_84d3b0d7a9_b

Sin embargo, para mi gusto ninguno de estos frameworks se adaptan perfectamente a mis necesidades. Todos ellos contienen una exagerada cantidad de código con un montón de casos extremos que al final casi nunca necesitas. Además, presentan un estilo visual bastante distintivo y al final hay que invertir bastante tiempo en modificar los botones, la tipografía, etc. para que el diseño tenga un poco de personalidad y no parezca la enésima-web-con-el-mismo-puto-diseño-de-Bootstrap. :)

Por estos motivos he creado un esqueleto muy simple, hecha a mi manera y cogiendo lo que más me interesa de cada framework y adaptándolo a mis gusto y mi estilo personal a la hora de programar. En esta primera versión tan solo he incluido las siguientes características:

  • Doctype HTML5 y html5shiv para soporte de navegadores antiguos
  • Scripts para Google Analytics
  • robots.txt y .htaccess con reglas para cachear estáticos
  • Media queries para pantallas pequeñas y diseño para impresión
  • Grid de columnas fluido
  • Sencillos estilos para formularios
  • Una cuidada tipografía basada en em
  • Fuentes de Google Web Fonts

Hoy he abierto el código fuente del proyecto y lo he compartido en GitHub para que el que quiera eche un vistazo o haga un fork para mejorarlo. Espero que os guste y que pueda ser de utilidad para cualquier desarrollador.

Página del proyecto   Código en GitHub

Lee ahora: Cómo servir 12 millones de páginas con WordPress sin morir en el intento »