Sublime Forum

Addition to CSS zen coding

#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

#23

Yeah, it’s not finished soz :smile:

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.

0 Likes