31
MAQUETACION RAPIDA CON EMMET, STYLUS Y SUBLIME TEXT César Aquino Maximiliano - @jovenred

Maquetación rápida con Emmet, Stylus y Sublime Text

Embed Size (px)

DESCRIPTION

Presentación para el Wordcamp Lima 2014.

Citation preview

Page 1: Maquetación rápida con Emmet, Stylus y Sublime Text

MAQUETACION RAPIDA CON EMMET, STYLUS Y SUBLIME TEXT

César Aquino Maximiliano - @jovenred

Page 2: Maquetación rápida con Emmet, Stylus y Sublime Text
Page 3: Maquetación rápida con Emmet, Stylus y Sublime Text

EMMET

Page 4: Maquetación rápida con Emmet, Stylus y Sublime Text
Page 5: Maquetación rápida con Emmet, Stylus y Sublime Text
Page 6: Maquetación rápida con Emmet, Stylus y Sublime Text

DISPONIBLE EN UNOS CUANTOS NAVEGADORES

emmet.io/download

Page 7: Maquetación rápida con Emmet, Stylus y Sublime Text
Page 8: Maquetación rápida con Emmet, Stylus y Sublime Text
Page 9: Maquetación rápida con Emmet, Stylus y Sublime Text

¿Los dos puntos?¿Las llaves?

¿El punto y coma?¿Una variable?

FuncionesCódigo organizado

Mixins

Page 10: Maquetación rápida con Emmet, Stylus y Sublime Text

Un preprocesador es un programa que procesa sus datos de entrada para producir una salida que se

utiliza como entrada a otro programa.

Page 11: Maquetación rápida con Emmet, Stylus y Sublime Text

VARIABLES

Page 12: Maquetación rápida con Emmet, Stylus y Sublime Text

VARIABLES

MIXINS

Page 13: Maquetación rápida con Emmet, Stylus y Sublime Text

MIXINS

FUNCTIONS, CONDITIONALS

Page 14: Maquetación rápida con Emmet, Stylus y Sublime Text

FUNCTIONS, CONDITIONALS

FOR, INTERPOLATION

Page 15: Maquetación rápida con Emmet, Stylus y Sublime Text

FOR, INTERPOLATION

@EXTEND

Page 16: Maquetación rápida con Emmet, Stylus y Sublime Text

@EXTEND

@MEDIA

Page 17: Maquetación rápida con Emmet, Stylus y Sublime Text

INSTALAR STYLUS

Instalar NodeJShttp://nodejs.org/

Ingresar al terminal y escribes:npm install stylus

Más información visitar:http://learnboost.github.io/stylus/

Page 18: Maquetación rápida con Emmet, Stylus y Sublime Text

¿DÓNDE ESTÁ EL CÓDIGO?

Page 19: Maquetación rápida con Emmet, Stylus y Sublime Text

AQUI TA!

Page 20: Maquetación rápida con Emmet, Stylus y Sublime Text

Multicursor

Page 21: Maquetación rápida con Emmet, Stylus y Sublime Text

Ctrl+P -> Goto Anything

Page 22: Maquetación rápida con Emmet, Stylus y Sublime Text

Paleta de comandos(Que puedes cambiarlos si gustas)

Page 23: Maquetación rápida con Emmet, Stylus y Sublime Text

Snippets

Códigos guardados en archivos individuales que te permitirán insertar de

forma fácil y rápida partes de código simplemente escribiendo una palabra y

pulsando TAB, o bien asignándole una combinación de teclas.

Page 24: Maquetación rápida con Emmet, Stylus y Sublime Text

Package Control

Page 25: Maquetación rápida con Emmet, Stylus y Sublime Text

SUBLIME TEXT Y WORDPRESS

Page 26: Maquetación rápida con Emmet, Stylus y Sublime Text

Search WordPress Codex:

Te permite revisar el codex (la biblia) de wordpress desde el mismo Sublime Text.

https://github.com/welovewordpress/SublimeWordPressCodex

Page 27: Maquetación rápida con Emmet, Stylus y Sublime Text

WordPress New Project Config:

Este plugin puede crear una nueva carpeta con el nombre del proyecto, instalar la última versión de WordPress y descargar e instalar un tema.

https://github.com/jeremycastelli/Wordpress-new-project-config

Page 28: Maquetación rápida con Emmet, Stylus y Sublime Text

Sublime Text 2 WordPress:

Este plugin tiene una colección de snippets precargados con códigos de WordPress.

https://github.com/purplefish32/sublime-text-2-wordpress

Page 29: Maquetación rápida con Emmet, Stylus y Sublime Text

¿Preguntas?

Page 30: Maquetación rápida con Emmet, Stylus y Sublime Text

¿Preguntas?

Busquen en ;)

Page 31: Maquetación rápida con Emmet, Stylus y Sublime Text

¿Preguntas?

Muchas gracias!

César J. Aquino Maximiliano (@jovenred)

Busquen en ;)