Home Download Buy Blog Forum Support

Addition to CSS zen coding

Re: Addition to CSS zen coding

Postby agibsonsw on Sat Feb 18, 2012 4:57 pm

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

Code: Select all
<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>
"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 Fed03 on Sat Feb 18, 2012 8:19 pm

awesome work^ keep going :D
Fed03
 
Posts: 79
Joined: Sun Oct 16, 2011 6:38 pm

Re: Addition to CSS zen coding

Postby agibsonsw on Sat Feb 18, 2012 9:22 pm

Fed03 wrote:awesome work^ keep going :D


Thank you. Well, I was thinking what more could be done.. I've run out of variables :o . 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 8-)

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 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 Sat Feb 18, 2012 9:41 pm

.. actually, going back to a comment made by dreagan, if I split this into a few fields, rather than the current one, then I would be able to supply all the standard values for each property, and have properties appear in a certain order. (The only values that appear at the moment are absolute, relative, fixed and static - for position.)

But I just feel that I would be re-drafting ZenCoding (even more than I have already). I must move on.. ;)
"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 Sat Feb 18, 2012 11:12 pm

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


Man, that's one mother of all regex snippets! You may as well get contextual expansions working: `n` => `none` after `display: `etc
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 Sun Feb 19, 2012 1:41 am

castles_made_of_sand wrote:Man, that's one mother of all regex snippets! You may as well get contextual expansions working: `n` => `none` after `display: `etc


I was originally considering this, which is partly why I included absolute, relative. As mentioned, it would mean introducing more fields, which would in turn mean certain properties appearing at the top or bottom of the list. But I already have a completions file to help will values ;)

A (cool), and easier, alternative occurred to me. I can type 'bs' for 'border-style' but if I then type 'bs_' I could have another line appearing immediately underneath listing the available values! This line could disappear after typing another character, or could remain until the underscore is deleted, or another underscore is used.

I would still have to type the value, but still.. I still want to move on to other things, but I might play with this idea for a bit :)
"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 Sun Feb 19, 2012 1:57 am

>>> I still want to move on to other things

It's pretty cool what you've been able to do with a little regex and some persistence :)

Personally, I'd like to see a snippet templating language implemented in python with transformations/includes etc.
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 Sun Feb 19, 2012 2:22 am

castles_made_of_sand wrote:It's pretty cool what you've been able to do with a little regex and some persistence :)

Personally, I'd like to see a snippet templating language implemented in python with transformations/includes etc.


Thank you. Such a template wouldn't be quite as interesting though?

My underscore idea works really well. I don't need it to keep jumping to a second line, it just replaces the current help text on the same line. It disappears after typing two more characters, and I don't even need to delete the underscore :lol:

BTW I was a little (a lot!) ambitious thinking I could just examine a few python files to steer me towards creating a plug-in. But I shouldn't need to spend hours and hours studying Python and the Plugins API. I just need a kick-start.

How do I read input from the console? How do I trap the onchange event? How do I send output to the view, and console?

I anticipate the trickiest thing would be dealing with Backspace or the user repositioning the cursor :o
"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 Sun Feb 19, 2012 3:24 am

>>> Such a template wouldn't be quite as interesting though?

What you mean? Not as much fun to try and push to the limit?
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 C0D312 on Sun Feb 19, 2012 3:58 am

I'd like to see a snippet templating language implemented in python with transformations/includes etc.

Hey! That's my job! :)

What you mean? Not as much fun to try and push to the limit?

haha... you're sooo mad that someone disagrees with you :)
C0D312
 
Posts: 1063
Joined: Sun Jul 10, 2011 3:23 am

PreviousNext

Return to Plugin Announcements

Who is online

Users browsing this forum: Google [Bot] and 16 guests