Pure: el hermoso y minúsculo framework CSS de Yahoo

Pure, es un minúsculo framework desarrollado por Yahoo (Sólo 5.7 Kb minificado y gzipeado), que permite desarrollar sitios web responsivos, mobiles o cualquier cosa que se te ocurra.

Para usarlo rápidamente sólo agrega la siguiente línea de código a tu sitio:

HTML:
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
 

También se pueden usar submódulos entre los cuales están

  • Base 1.2kb
  • Grids 0.7kb
  • Forms 1.4kb
  • Buttons 0.8kb
  • Tables 0.6kb
  • Menus 1kb

Cada uno de estos fácilmente de utilizar.

Pure usa normalize.css y te permite personalizar colores con su propio Skin Builder o extender su uso combinándolo con Bootstrap u otros. Si quieres empezar hoy mismo, tienes algunos hermosos layouts de ejemplo.

Pure | Repositorio en Github.

Diez años de WordPress

Ya han pasado 10 años desde que se anunció la primera versión de WordPress.

wordpress-logo-hoz-rgb

WordPress fue distribuida inicialmente con una licencia GPL (ahora GPLv2) y recuerdo que gracias al core de WordPress, Alex y yo pudimos crear algunas aplicaciones web hace muchos años.

Ahora tenemos la versión 3.5.1 y miles de miles de plugins con los que se pueden crear sitios webs y blogs fácilmente.

Este blog empezó con WordPress y continúa gracias al mantenimiento de Alex y hay millones de sitios que también lo siguen usando.

Feliz día y gracias WordPress por estos buenos años y gracias por hacernos saber que Code is poetry.

HTML5 Template Tag: la novedad

Para solventar el uso de templates, personalmente uso y me encanta Mustache, ya que tiene El 7 de mayo, se publicó el borrador de la etiqueta template de HTML5, Y se puede hacer algo como esto:
HTML:

<template id="template-row">
  <tr class="">
     <td></td>
     <td></td>
     <td></td>
  </tr>
</template>
 
Y repetir el template dentro de una tabla con el siguiente script:
JAVASCRIPT:

var t = document.querySelector("#tabla tbody"),
row = document.getElementById("template-row");
var td = row.getElementsByTagName("td");
td[0].textContent = "1";
td[1].textContent = "Nombres";
td[2].textContent = "Apellidos";
t.appendChild(row.content.cloneNode(true));
 
El código anterior permite reutilizar el template dentro de una tabla en cualquier contexto. Este ejemplo fue la fila de una tabla, sin embargo podemos usarlo con listas, párrafos, imágenes o lo que se nos ocurra siguiendo algunas limitaciones.

Para tener en cuenta:

  • El código dentro de template no es mostrado por el navegador.
  • El código dentro de template no es parte del documento, es decir que document.getElementById('#template-row'); no tiene hijos.
  • Los templates son inactivos hasta que son usados, es decir, que las imágenes no se cargan, archivos multimedia no son reproducidos y scripts no son ejecutados.
Por el momento ningún navegador soporta la etiqueta, pero ya lo veremos muy pronto. Podemos ver un ejemplo completo se puede ver en JSFiddle, por mientras todavía nos queda Mustache.

Visto en Frontend.pe.