Home Download Buy Blog Forum Support

Addition to CSS zen coding

Re: Addition to CSS zen coding

Postby agibsonsw on Wed Feb 15, 2012 3:01 pm

castles_made_of_sand wrote: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.


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 :o


Code: Select all
    /* 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!
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
agibsonsw
 
Posts: 901
Joined: Fri Jan 27, 2012 9:11 pm

Re: Addition to CSS zen coding

Postby agibsonsw on Wed Feb 15, 2012 9:46 pm

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:
Code: Select all
/* 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 :lol:

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?

Code: Select all
<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>
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
agibsonsw
 
Posts: 901
Joined: Fri Jan 27, 2012 9:11 pm

Re: Addition to CSS zen coding

Postby agibsonsw on Wed Feb 15, 2012 10:23 pm

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):

Code: Select all
<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>
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
agibsonsw
 
Posts: 901
Joined: Fri Jan 27, 2012 9:11 pm

Re: Addition to CSS zen coding

Postby dreagan on Thu Feb 16, 2012 9:46 am

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.
dreagan
 
Posts: 13
Joined: Thu Jan 26, 2012 7:42 am

Re: Addition to CSS zen coding

Postby agibsonsw on Thu Feb 16, 2012 11:00 am

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.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
agibsonsw
 
Posts: 901
Joined: Fri Jan 27, 2012 9:11 pm

Re: Addition to CSS zen coding

Postby sublimator on Thu Feb 16, 2012 11:15 am

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.
It is better to remain silent and be thought a fool, than to speak out and remove all doubt
sublimator
 
Posts: 649
Joined: Thu Mar 20, 2008 5:41 am

Re: Addition to CSS zen coding

Postby agibsonsw on Thu Feb 16, 2012 12:22 pm

@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,
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
agibsonsw
 
Posts: 901
Joined: Fri Jan 27, 2012 9:11 pm

Re: Addition to CSS zen coding

Postby agibsonsw on Thu Feb 16, 2012 10:33 pm

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 8-). 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.

Code: Select all
<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'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
agibsonsw
 
Posts: 901
Joined: Fri Jan 27, 2012 9:11 pm

Re: Addition to CSS zen coding

Postby sublimator on Fri Feb 17, 2012 12:53 am

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

And so begins the legend of `the propx declaration of 2012`
It is better to remain silent and be thought a fool, than to speak out and remove all doubt
sublimator
 
Posts: 649
Joined: Thu Mar 20, 2008 5:41 am

Re: Addition to CSS zen coding

Postby pod on Fri Feb 17, 2012 2:08 am

In file with css syntax press ctrl+alt+enter, write something like this pos:a+t+l+d:b this will transform in
Code: Select all
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 ';':
Code: Select all
position:absolute;
top:;10px
left:;15px
display:block;

Sorry, but I like it much better than propx syntax... :roll:
pod
 
Posts: 37
Joined: Sun Nov 07, 2010 3:32 am

PreviousNext

Return to Plugin Announcements

Who is online

Users browsing this forum: Yahoo [Bot] and 10 guests