Home Download Buy Blog Forum Support

Addition to CSS zen coding

Addition to CSS zen coding

Postby agibsonsw on Tue Feb 14, 2012 9:40 pm

Hello again. Zen Coding is fantastic, but perhaps my CSS Snippet below could be regarded as an interesting addition to it :?:

The trigger is 'propx', so if you type the following on a blank line and press TAB: po to le di propx
you will obtain:
position: ;
top: ;
left: ;
display: ;

But, more interestingly :D , if you type: po absolute to 5px le 12px ma 5px pa propx
You will obtain:
position: absolute;
top: 5px;
left: 12px;
margin: 5px;
padding: ;

You will be left on your original line (with an extra semi-colon) but just press Ctrl-Shift-K to delete the line.

You can use apostrophe's, hyphens, etc., when supplying values, e.g. fonts. The only proviso is that if, for example, your font includes the two letters 'le' then separate them with a back-slash 'l\e' to prevent the word 'left' appearing.

I've not been working on this too long, so currently the abbreviations you can use are: cli cl co cu ff fl fo he le ma bo di le pa po ri to

Some feedback would be appreciated :( Andy.
Code: Select all
<snippet>
   <content><![CDATA[$0${TM_CURRENT_LINE/\\|(?:\b| )((BO)|(CLI)|(CO)|(CU)|(CL)|(DI)|(FF)|(FL)|(FO)|(HE)|(LE)|(MA)|(PA)|(PO)|(RI)|(TO)|(WE)) |( {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>
"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 Tue Feb 14, 2012 9:53 pm

Actually (I should have made clear) the splitting of letters with a backslash - l\e - is only required if these two letters appear as a separate word, and are one of the abbreviations. So 'le font' would require 'l\e font' but 'lemon' would be fine 8-)
"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 Tue Feb 14, 2012 10:14 pm

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

Code: Select all
<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>
"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 Tue Feb 14, 2012 10:51 pm

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

Good night, Andy.

Code: Select all
<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>
"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 Tue Feb 14, 2012 10:59 pm

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

Code: Select all
<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>
"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 Tue Feb 14, 2012 11:19 pm

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?
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 Tue Feb 14, 2012 11:37 pm

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


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.
"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 Wed Feb 15, 2012 12:35 am

Oh, I see! that's pretty neat! :)

I like the compact syntax with the contextual use of ` `
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 Wed Feb 15, 2012 1:16 pm

castles_made_of_sand wrote:Oh, I see! that's pretty neat! :)

I like the compact syntax with the contextual use of ` `


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 :idea:
"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 Wed Feb 15, 2012 1:28 pm

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

Next

Return to Plugin Announcements

Who is online

Users browsing this forum: Exabot [Bot], Yahoo [Bot] and 11 guests