Sorry, this is better - I’ve move the comment marks /* */ out of the field, so that completions don’t keep popping up all the time (which is very annoying):

<snippet> <content><![CDATA[/* ${1:abbrev} : ${1/(abbrev)|.*(?:\b| )((a)|(b)|(c)|(d)|(f)|(h)|(l)|(m)|(p)|(r)|(s)|(t)|(v)|(w)|(z)).?$|.*/?1:Type two letters:?3:ABsolute:?4:BOttom BorderWidth:?5:CLIp COlor CUrsor CLear:?6:DIsplay:?7:Font-Family FIxed FLoat FOnt:?8:HEight:?9:LEft:?10:MArgin:?11:PAdding POsition:?12:RElative RIght:?13:STatic:?14:TOp:?15:VIsibility:?16:WIdth:?17:Z-Index/i} */${1/\\|abbrev|(?:\b| )([abcdfhlmpr]{1}|(AB)|(BO)|(BW)|(CLI)|(CO)|(CU)|(CL)|(DI)|(FF)|(FI)|(FL)|(FO)|(HE)|(LE)|(MA)|(PA)|(PO)|(RE)|(RI)|(ST)|(TO)|(VI)|(WI)|(ZI)|([0-9]*)(cm|em|ex|in|mm|pt|pc|px|\%)4)(?: |$)|( {2,}|\t)/?2:absolute:?3:;\nbottom\: :?4:;\nborder-width\: :?5:;\nclip\: :?6:;\ncolor\: :?7:;\ncursor\: :?8:;\nclear\: :?9:;\ndisplay\: :?10:;\nfont-family\: :?11:fixed:?12:;\nfloat\: :?13:;\nfont\: :?14:;\nheight\: :?15:;\nleft\: :?16:;\nmargin\: :?17:;\npadding\: :?18:;\nposition\: :?19:relative:?20:;\nright\: :?21:static:?22:;\ntop\: :?23:;\nvisibility\: :?24:;\nwidth\: :?25:;\nz-index\: :?26:$26$27 $27 $27 $27/gi} ]]></content> <tabTrigger>propx</tabTrigger> <scope>source.css meta.property-list.css</scope> <description>po to, etc</description> </snippet>

Very interested here, I’m keeping an eye on this thread.
It would be nice to be able to delete the commented first line after your finished though. I have a very strict comment code for my files… :
And a possibility to add normal css tags and values, because not all tags are supported as of now. Suppose I want to add “border: 12px”, typing that would cause the propx conversion of the abbreviations to stop…

edit
nevermind the line deleting, ST’s “ctrl+l” doest that just fine.

Hello dreagan.

There are no border properties as yet, although there are a few values such as ‘relative’, ‘absolute’. I can create abbreviations such as bor, bbc, etc., and a collection of standard values, such as ‘none’, ‘auto’, ‘medium’. I’ll look at this tonight.

I’m just wondering if there is a size limitation to one Snippet(?). Andy.

Have you considered implementing the expansion of the lightweight syntax, which seems to be the cool part, as a plugin with an input panel?

You have to open a panel and press enter to commit but that’s round about as expensive as propx->tab yeah?

(Note you can also use the insert_snippet command to insert snippets )

You wouldn’t have to worry about commenting or cleaning up the abbreviation.

Also, if you implemented it as an on_change, (possibly) undo last expansion and expand type thing, you’d get more immediate feedback.

You could implement fuzzy matching too. I like the lightweight syntax but the regex seems like a gimick to me.

@castles_made_of_sand Hello.

I haven’t delved into plug-ins (or Python) as yet, but I’m planning to. I’ve had this Python book for ages but I’m too lazy to read it… I think I can pretty much grab what I need just be reading some existing files.

I’ve squeezed these regular expressions quite a bit, but I’m sure there’s a little life there yet… But I should probably give up searching (for the sake of my sanity).

Regards, Andy,

This is coming along quite nicely - I even managed to incorporate a negative-lookbehind, whehay!

I managed to incorporate a 3 or 4 multiplier in pretty much one statement . That is, if you type: 12px3
it will give: 12px px px

but 12px4 adds the extra px. I don’t think I’ll bother with 2, it’s just as easy to type both.

I’ve put all the borders in as well. bo border, bl border-left, bc border-color, etc. If you type bb-color (or bb-style, bb-width) it will add these terms after border-bottom. You have to type color/width/style in full, but at least you can create them in situ.

There are still a number of properties missing - including background, and variations on padding and margins - but it’s coming along. It’s also cool that the line can be edited - as long as you remain within the field. Once you’ve completed, press TAB and then Ctrl-Shift-K to delete the line.

<snippet> <content><![CDATA[/* ${1} : ${1/($)|.*(?:\b| )((\-[a-z]{0,4})|(a)|(b)|((?<!\-)(?:c|co))|(d)|(f)|(h)|(l)|(m)|(p)|(r)|((?<!\-)s)|(t)|(v)|((?<!\-)w)|(z)).?$|.*/?1:Type to for top etc., followed by a space:?3:-color -style -width:?4:ABsolute:?5:BOTtom BOrder BorderBottom BC BL BR BS BT BW -color -style -width:?6:CLIp COlor CUrsor CLear:?7:DIsplay:?8:Font-Family FIxed FLoat FOnt:?9:HEight:?10:LEft:?11:MArgin:?12:PAdding POsition:?13:RElative RIght:?14:STatic:?15:TOp:?16:VIsibility:?17:WIdth:?18:Z-Index/i} */$0${1/\\|abbrev|(?:\b| )([abcdfhlmpr]{1}|(ab)|(bb(\-)(color|style|width)|bb)|(bc)|(bl(\-)(color|style|width)|bl)|(br(\-)(color|style|width)|br)|(bs)|(bt(\-)(color|style|width)|bt)|(bw)|(bot)|(bo)|(cli)|(co)|(cu)|(cl)|(di)|(ff)|(fi)|(fl)|(fo)|(he)|(le)|(ma)|(pa)|(po)|(re)|(ri)|(st)|(to)|(vi)|(wi)|(zi)|([0-9]*)(cm|em|ex|in|mm|pt|pc|px|\%)((4)|3))( |$)|( {2,}|\t)/?2:absolute:?3:;\nborder-bottom$4$5\: :?6:;\nborder-color\: :?7:;\nborder-left$8$9\: :?10:;\nborder-right$11$12\: :?13:;\nborder-style\: :?14:;\nborder-top$15$16\: :?17:;\nborder-width\: :?18:;\nbottom\: :?19:;\nborder\: :?20:;\nclip\: :?21:;\ncolor\: :?22:;\ncursor\: :?23:;\nclear\: :?24:;\ndisplay\: :?25:;\nfont-family\: :?26:fixed:?27:;\nfloat\: :?28:;\nfont\: :?29:;\nheight\: :?30:;\nleft\: :?31:;\nmargin\: :?32:;\npadding\: :?33:;\nposition\: :?34:relative:?35:;\nright\: :?36:static:?37:;\ntop\: :?38:;\nvisibility\: :?39:;\nwidth\: :?40:;\nz-index\: :?41:$41$42 $42 $42:?44: $42/gi}; ]]></content> <tabTrigger>propx</tabTrigger> <scope>source.css meta.property-list.css</scope> <description>po to, etc</description> </snippet>

I even managed to incorporate a negative-lookbehind, whehay!

And so begins the legend of the propx declaration of 2012

In file with css syntax press ctrl+alt+enter, write something like this pos:a+t+l+d:b this will transform in

position:absolute; top:; left:; display:block;
Same will happen if you will type it inline and press tab.

So maybe it will be easier to adjust existing zen-coding tool to allow something like this pos:a+t{10px}+l{15px}*+d:b*? Right now it is almost working except for values being after ‘;’:

position:absolute; top:;10px left:;15px display:block;
Sorry, but I like it much better than propx syntax…

Actually, in latest version of Zen (unreleased as yet … need to find the time) I’ve made a bunch of ergonomic improvements to the as you type including automatically inserting the + on space bar where it makes sense (not in strings)

Fixed that too! I Made a custom filter to modify the nodes to put that in the expected place and the input panel has a bunch of bindings to make inserting and navigating over the punctuation like {} much nicer.

I made it so any semi colons, get automatically remapped to : as an experiment. I much prefer a semicolon there as you don’t have to use the shift key. I was pondering changing that in all the snippets directly.

When I was unemployed a while back, I was toying with the idea of charging $3.50 for Zen to make a few dollars.

zencoding.akalias.net/releases/z … ation.html
zencoding.akalias.net/releases/1.6.0a.html

I got distracted making testing and grammar dev tools and then got employment I’ll try and find the time to fix it up and share it but there’s still lots of work to be done.

[quote=“castles_made_of_sand”]http://zencoding.akalias.net/releases/z … ation.html
zencoding.akalias.net/releases/1.6.0a.html[/quote]

Cool stuff man, how can I get this?

Yeah, it’s not finished soz

I don’t really want to be obliged to support something in the case of just a few people buying/donating.

It was just one of those, oh damn, I need some money, stupid ideas.

So, failing that, I’m not sure how much time I’d want or even could could sink into it.

I’m not sure when exactly I’ll get around to finishing/pushing it but I plan to.

Having said that, if there’s enough interest, who knows?

Personally, I’m not attempting to build anything significant with this. ZenCoding is a fantastic feature already. I’m just studying/ dabbling at the moment. If it happens that I create something that others find useful or interesting, then that’s great

Dude, keep having fun and experimenting, what it’s all about! Fuck the naysayers! Just do what your doing.

Thank you. That was my intention anyway

haha, yes of course, sorry, was a bit drunk and confused after a wedding

I’m discovering a lot about regular expressions . I’ve managed to compact it such that terms such as bb, bbc, brs construct:
border-bottom, border-bottom-color, border-right-style

but the separate words (border, bottom, color) only appear once within the regex expressions. That is, it grabs the term ‘border’ and then decides whether it needs to append ‘-bottom’ and then perhaps ‘-color’. (It also means I no longer need to type hyphens.) In a similar way I’ve combined margins with padding. I like this

It’s amazing what can be achieved in one Snippet (with a little effort…)! I’m having second thoughts about the help text though, as it’s making it a bit verbose. I might change my mind and just have a second snippet (proph) which just produces help text within a css comment, or just abbreviate the help text.

I would still like to be able to put apostrophes or quotes around font names, but they throw everything off(?).

Again, I’m not attempting to substitute for ZenCoding, but I like the idea of a single Snippet being capable of all of this. Regards, Andy.

PS It occurred to me that, using the technique above, I could also provide property-values that are contextual (like ZC…). I’ll probably not do this though…

I’ve finished this now (and I can move on!). I think it’s in its optimal state for a single Snippet. It includes most of the major properties. You can now type ‘por’ for ‘position: relative;’, etc.

I eventually discovered that the maximum number of variables is 100 (or 99)!

<snippet> <content><![CDATA[/* ${1} : ${1/($)|.*(?:\b| )((b)|(c)|(d)|(e)|(f)|(h)|(l)|(m)|(o)|(p)|(q)|(r)|(t)|(v)|(w)|(z)).?$|.*/?1:Type to for top etc., followed by a space:?3:BAckground-Attach etc BOTtom BOrder-Collapse-Spacing BC BS BW BorderBottom\(Color\/Style\/Width\) etc:?4:CLear CLIp COlor CONtent CUrsor Counter-Inc-Reset Caption-Side:?5:DIsplay DIRection:?6:Empty-Cells:?7:FOnt F-Family-SI\/ST\/W\/V FLoat:?8:HEight:?9:LEft LEtter-Spacing Line-Height List-Style I\/P\/T:?10:MArgin T\/R\/B\/L MAx\/MIn-Height\/Width:?11:OUtline-Color-Style-Width OVerflow:?12:PAdding T\/R\/B\/L POsition-Abs\/Rel\/Fixed\/Static:?13:QUotes:?14:RIght:?15:TOp TExt-Align\/D\/I\/T:?16:Vertical-Align VIsibility:?17:WHite-space WIdth WOrd-spacing:?18:Z-index/i} */$0${1/\\|(?:\b| )((ba((a)|(c)|(i)|(p)|(r))?)|(bot)|(bo((c)|(s))?)|(((bb)|(bl)|(br)|(bt)|b)((c)|(s)|(w))?)|(cli)|(con)|(co)|(cu)|(cl)|(c((i)|(r)))|(cs)|(dir)|(di)|(ec)|((ff)|(fsi)|(fst)|(fv)|(fw)|fo)|(fl)|(he)|(les)|(le)|(lh)|(ls((i)|(p)|(t))?)|(((ma)|(mi))((h)|(w)))|(((ma)|(pa))((b)|(l)|(r)|(t))?)|(ou((c)|(s)|(w))?)|(ov)|(po((a)|(r)|(f)|(s))?)|(qu)|(ri)|(to)|(te((a)|(d)|(i)|(t)))|(va)|(vi)|(wh)|(wi)|(wo)|(z)|([0-9]*)(cm|em|ex|in|mm|pt|pc|px|\%)((4)|3))( |$)|( {2,}|\t)/?2:;\nbackground(?4:-attachment:?5:-color:?6:-image:?7:-position:?8:-repeat)\: :?9:;\nbottom\: :?10:;\nborder(?12:-collapse:?13:-spacing)\: :?14:;\nborder(?16:-bottom:?17:-left:?18:-right:?19:-top)(?21:-color:?22:-style:?23:-width)\: :?24;\nclip\: :?25:;\ncontent\: :?26:;\ncolor\: :?27:;\ncursor\: :?28:;\nclear\: :?29:;\ncounter-(?31:increment:?32:reset)\: :?33:;\ncaption-side\: :?34:;\ndirection\: :?35:;\ndisplay\: :?36:;\nempty-cells\: :?37:;\nfont(?38:-family:?39:-size:?40:-style:?41:-variant:?42:-weight)\: :?43:;\nfloat\: :?44:;\nheight\: :?45:;\nletter-spacing\: :?46:;\nleft\: :?47;\nline-height\: :?48:;\nlist-style(?50:-image:?51:-position:?52:-type)\: :?53:;\n(?55:max:?56:min)(?58:-height:?59:-width):?60:;\n(?62:margin:?63:padding)(?65:-bottom:?66:-left:?67:-right:?68:-top)\: :?69:;\noutline(?71:-color:?72:-style:?73:-width)\: :?74:;\noverflow\: :?75:;\nposition\: (?77:absolute:?78:relative:?79:fixed:?80:static):?81:;\nquotes\: :?82:;\nright\: :?83:;\ntop\: :?84:;\ntext(?86:-align:?87:-decoration:?88:-indent:?89:-transform)\: :?90:;\nvertical-align\: :?91:;\nvisibility\: :?92:;\nwhite-space\: :?93:;\nwidth\: :?94:;\nword-spacing\: :?95:;\nz-index\: :?96:$96$97 $97 $97:?99: $97/gi}; ]]></content> <tabTrigger>propx</tabTrigger> <scope>source.css meta.property-list.css</scope> <description>po to, etc</description> </snippet>

awesome work^ keep going

Thank you. Well, I was thinking what more could be done… I’ve run out of variables . But you pushed me a little further…

I realise that I could have additional fields, before and after the current one. So, for example, typing something like ‘bora’ for border-radius could also add ‘-moz-border-radius’ at the top of the property list. Perhaps there are properties that people would generally put at the bottom of the list as well (or just the less common ones).

But I was hoping to leave this alone for a while. I still think it’s kinda cool though, that all this can be achieved in one (relatively) small snippet/file

Footnote: It might seem that I’m reproducing the work of my css completions file, but I think they serve different purposes. The completions help you to discover properties and their values, whereas the snippet enables you to quickly layout a set of known properties. And, of course, there’s always ZenCoding