We developers are always looking for tools to improve our process or speed up common tasks. I often save bits of code I reuse in Dreamweaver’s snippets. Today I discovered a plugin\/extension which allows even more flexibility and it even works in HTML5. <\/p>\n
Let’s assume you are creating a new web page. You can create the blank page easy enough in DW but adding all the layout elements could take a little while. What zen coding allows you to do is type a short string similar to CSS selectors then expand the string (abbreviation) to the full HTML markup.<\/p>\n
header>div#branding>nav>+ul#mainnav>li*5>a\r\nexpanded becomes\r\n<header>\r\n\t<div id=\"branding\"><\/div>\r\n\t<nav>\r\n\t<ul id=\"smainnav\">\r\n\t\t<li><a href=\"\"><\/a><\/li>\r\n\t\t<li><a href=\"\"><\/a><\/li>\r\n\t\t<li><a href=\"\"><\/a><\/li>\r\n <li><a href=\"\"><\/a><\/li>\r\n <li><a href=\"\"><\/a><\/li>\r\n\t<\/ul>\r\n\t<\/nav>\r\n\t<\/div>\r\n<\/header><\/pre>\nIf you have a list of items (ie sidebarlinks) you want to format quickly
\nyou can use the “Wrap with abbreviation” syntax to format the list.<\/p>\n<div>\r\nitem1\r\nitem2\r\nitem3\r\n<\/div>\r\nPlace cursor on any one of the link items and type this: \r\naside>nav>ul#sidebarnav>li*>a\r\ninto the Wrap with abbreviation input box, it becomes:\r\n<aside>\r\n\t<nav>\r\n\t<ul id=\"sidebarnav\">\r\n\t <li><a href=\"\">sideitem1<\/a><\/li>\r\n\t\t<li><a href=\"\">sideitem2<\/a><\/li>\r\n\t\t<li><a href=\"\">sideitem3<\/a><\/li>\r\n\t\t<li><a href=\"\">sideitem4<\/a><\/li>\r\n\t<\/ul>\r\n\t<\/nav>\r\n<\/aside><\/pre>\n<\/code><\/p>\n
Zen Coding extension works with several code editors. You can learn more at: http:\/\/code.google.com\/p\/zen-coding\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
We developers are always looking for tools to improve our process or speed up common tasks. I often save bits of code I reuse in Dreamweaver’s snippets. Today I discovered a plugin\/extension which allows even more flexibility and it even … Continue reading