Sublime Forum

Addition to CSS zen coding

#3

Small correction - ‘width’ is spelt with an ‘i’, Doh!!

<snippet> <content><![CDATA[$0${TM_CURRENT_LINE/\\|(?:\b| )((BO)|(CLI)|(CO)|(CU)|(CL)|(DI)|(FF)|(FL)|(FO)|(HE)|(LE)|(MA)|(PA)|(PO)|(RI)|(TO)|(WI)) |( {2,}|\t)/?2:;\nbottom\: :?3:;\nclip\: :?4:;\ncolor\: :?5:;\ncursor\: :?6:;\nclear\: :?7:;\ndisplay\: :?8:;\nfont-family\: :?9:;\nfloat\: :?10:;\nfont\: :?11:;\nheight\: :?12:;\nleft\: :?13:;\nmargin\: :?14:;\npadding\: :?15:;\nposition\: :?16:;\nright\: :?17:;\ntop\: :?18:;\nwidth\: /gi}; ]]></content> <tabTrigger>propx</tabTrigger> <scope>source.css meta.property-list.css</scope> <description>po to, etc</description> </snippet>

0 Likes

#4

I was going to let this settle, but I’ve come up with something a little bit cool! If I type:

po ab bw 12px4 propx

(notice the 4 after px (or pt, etc.,)) it produces

position: absolute;
border-width: 12px 12px 12px 12px;

Admittedly, I’ve still got to amend the 12’s, but still… this pleased me :smiley:

Good night, Andy.

<snippet> <content><![CDATA[$0${TM_CURRENT_LINE/\\|(?:\b| )((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 $26$27 $26$27 $26$27/gi}; ]]></content> <tabTrigger>propx</tabTrigger> <scope>source.css meta.property-list.css</scope> <description>po to, etc</description> </snippet>

0 Likes

#5

This is better; typing

po ab bw 12px4 propx

produces

position: absolute;
border-width: 12px px px px;

  • so I don’t have to delete the 12’s. Good night (definitely!)

<snippet> <content><![CDATA[$0${TM_CURRENT_LINE/\\|(?:\b| )((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>

0 Likes

#6

I like the concept.

However, it doesn’t seeem to do anything for me beyond inserting a ;

It’s supposed to be using regex transformation on what you type after insertion?

0 Likes

#7

[quote=“castles_made_of_sand”]I like the concept.

However, it doesn’t seeem to do anything for me beyond inserting a ;

It’s supposed to be using regex transformation on what you type after insertion?[/quote]

Hello. You type the abbreviations on the same line, but preceding, the trigger ‘propx’. So type this on a blank line:

po ab bw 12px4 propx

and press tab (for the trigger on propx). It reads the current line, which is the content up-to the trigger.

0 Likes

#8

Oh, I see! that’s pretty neat! :smile:

I like the compact syntax with the contextual use of

0 Likes

#9

[quote=“castles_made_of_sand”]Oh, I see! that’s pretty neat! :smile:

I like the compact syntax with the contextual use of [/quote]

Thank you. I haven’t used ZenCoding a lot, I’ll have to compare, but on a first glance it seems to use slightly messier abbreviations; and I don’t know if it allows us to add extra ‘stuff’ between abbreviations.

I can also add a number of common values, such as ‘au’ for auto, ‘no’ for ‘none’ etc. Interesting :bulb:

0 Likes

#10

I’d like to see something with a minimal syntax like that for easy entry but with fuzzy matching (only when haven’t found an exact match) and feedback as you type.

0 Likes

#11

Hey, you’re inspiring me! I think I could do that, combining this and my previous example. I could produce a comment line, and as you type abbreviations, it creates the properties below. You could back track, and I can supply commentary as you type :astonished:

/* po to tip: No tip! */ position: ; top: ;

and then tabbing could select the comment… Although, fuzzy matching would be a bit minimal in a Snippet!

0 Likes

#12

The below is very much a first draft, but it kinda works…

Type propx and TAB to kick start and it appears like this: / abbrev : Type two letters /

Overtype the word abbrev with letters, such as le for left, wi width, pa padding, etc. Typing: po ab le 4px pa 5px4 ff Arial p yields this:

/* po ab le 4px pa 5px4 ff Arial p : PAdding POsition */; position: absolute; left: 4px; padding: 5px px px px; font-family: Arial
Notice the ‘p’ after the word ‘Arial’, which displays the help text ‘PAdding POsition’ to indicate the available abbreviations.

Typing a number 4 after px, pt, %, etc., repeats it four times.

It’s not perfect - I still end up with a spurious semi-colon at the end of the line; I need to type ’ ;’ (space semi-colon) if I want to terminate the last (empty) property with a semi-colon; and I can’t (currently) use quotation marks around fonts. But otherwise it’s perfect :laughing:

I would be pleased if someone might have a look and pass comments. Regards, Andy.

PS I wonder if there is a limit to the size of a Snippet?

<snippet> <content><![CDATA[${2:/* ${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>

0 Likes

#13

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>

0 Likes

#14

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.

0 Likes

#15

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.

0 Likes

#16

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.

0 Likes

#17

@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,

0 Likes

#18

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 :sunglasses:. 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>

0 Likes

#19

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

And so begins the legend of the propx declaration of 2012

0 Likes

#20

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… :unamused:

0 Likes

#21

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 :smile: I’ll try and find the time to fix it up and share it but there’s still lots of work to be done.

0 Likes

#22

[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? :smile:

0 Likes