Zen coding (Emmet) es una herramienta para editores web que nos permite generar código de forma ágil y rápida, acelerando el maquetado de nuestros diseños en HTML y CSS.
Esta ejecución de código es generada por un motor de abreviaturas que permite que las expresiones sean expandidas.
Si os gusta escribir vuestro código desde cero, ZenCoding es sin duda la herramienta perfecta para crear vuestros proyectos de forma productiva.
Descarga
ZenCoding está disponible para un gran numero de editores web como NotePad++, Sublime Text, Coda, PSPad …
Las diferentes versiones de esta herramienta podeis descargarlas desde el siguiente enlace:
ZenCoding Downloads
Instalación en Notepad++
Para instalar ZenCoding en NotePad++ accedemos a Plugins > Plugin_Manager > Show_Plugin_Manager y seleccionamos Zend Coding – Python.
Como alternativa podemos descargarlo desde el siguiente enlace:
Zen Coding for Notepad++
y copiar el contenido del archivo .zip en la carpeta plugins, que se encuentra en el directorio de instalación de Notepad++
Instalación en Sublime Text
Para instalar ZenCoding en Sublime Text pulsamos CTRL+SHIFT+P o accedemos a Preferences > Package Control > Install Package, escribimos Emmet para buscarlo y lo instalamos posteriormente.
Si no teneis acceso es porque no teneis instalado el Package Controll, la instalación es muy sencilla, puedes ver como se hace desde el
siguiente enlace:
La página está en inglés, básicamente es acceder a View>Show Console, pegar el código Python que nos ofrecen en la página según la versión de nuestro Sublime Text y pulsar Enter.
También nos ofrece la posibilidad de instalarlo manualmente.
Como funciona
El comando de expansión suele ser Ctrl+E o a veces Ctrl+Alt+Enter, la tecla de tabulación también puede ser a veces la tecla de expansión por defecto, si teneis problemas para expandir el codigo, revisar los atajos de teclado, en NotePad++, por ejemplo, los podemos encontrar en Configuración > Gestor de atajos de teclado.
Si habeis leido el articulo Manual de ZenCoding HTML 5 en la sección de HTML 5, os habreis dado cuenta de la potencia que tiene esta herramienta, ahora vamos a crear un documento CSS, en el articulo Manual de ZenCoding HTML 5, creamos un documento Html 5 a partir de un código generado con ZenCoding , en el que expandiamos el código mediante abreviaturas, lo mismo podemos hacer en CSS, básicamente lo que hacemos es abreviar el nombre de las propiedades y expandirlas, la forma de abreviatura es muy intuitiva:
m + TECLA_EXPANSION genera:
margin: ;
p + TECLA_EXPANSION genera:
padding: ;
bg + TECLA_EXPANSION genera:
background: #000;
d + TECLA_EXPANSION genera:
display: block;
bd + TECLA_EXPANSION genera:
border: ;
Como habreis podido comprobar, la forma en que abreviamos la sintaxis es muy intuitiva, en algunos casos hay que tener cuidado por el parecido:
fs + TECLA_EXPANSION genera:
font-style: italic;
fz + TECLA_EXPANSION genera:
font-size: ;
Selector +
Al igual que en HTML usamos este selector para añadir etiquetas, en CSS el selector + nos sirve para añadir propiedades, veamos un ejemplo:
m+p+bg+cl+f + TECLA_EXPANSION genera:
margin: ;
padding: ;
background: #000;
clear: both;
font: ;
El selector + nos sirve además como complemento en algunas propiedades:
bg+ + TECLA_EXPANSION genera:
background: #fff url() 0 0 no-repeat;
bd+ + TECLA_EXPANSION genera:
border: 1px solid #000;
f+ + TECLA_EXPANSION genera:
font: 1em Arial,sans-serif;
Propiedades más específicas
Hemos visto como se expande la propiedad margin, pero las propiedades pueden ser expandidas de modo más específico:
mt+mb+ml+mr + TECLA_EXPANSION genera:
margin-top: ;
margin-bottom: ;
margin-left: ;
margin-right: ;
Propiedades y valores
No solo podemos expandir código CSS con sus dos puntos, su punto y coma listo para escribir su valor, además podemos pasarle el valor directamente desde la abreviatura.
Sintaxis:
Ejemplos
text-decoration: none;lis:n + TECLA_EXPANSION genera:
list-style: none;ov:s + TECLA_EXPANSION genera:
overflow: scroll;
Es importante destacar que el valor siempre lo expandimos despues del selector “:” para no confundir la sintaxis
mt + TECLA_EXPANSION genera:
margin-top: ;
mt:a + TECLA_EXPANSION genera:
margin-top: auto;
m:a + TECLA_EXPANSION genera:
margin: auto;
Aplicando los estilos
float:left;
font:1em Arial,sans-serif;
border:1px solid #000;
background-color:#FFF;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing:border-box;
@import url();
@media print {
}
margin: auto !important;
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
font-weight: bold;
padding-left: 25px;
overflow-x: hidden;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png',sizingMethod='crop');
-webkit-box-shadow: inset hoff voff blur color;
box-shadow: inset hoff voff blur color;
Mas informacion
Si os ha gustado este tutorial, seguro que os interesa el
Manual de ZenCoding para HTML
Podeis descargar la referencia completa en PDF y ODT en el siguiente enlace
Cheat sheets for Zen Coding syntax and abbreviations
Valoraciones
Sé el primero en valorar