Home Download Buy Blog Forum Support

Addition to CSS zen coding

Re: Addition to CSS zen coding

Postby sublimator on Sun Feb 19, 2012 4:19 am

C0D312 wrote:haha... you're sooo mad that someone disagrees with you :)


GGRRRRR.... haha Not really. I think you are projecting your rage :)

Was a serious question. Was wondering why it wouldn't be so interesting to him. Regex declarative transformations and Python imperative templates would be diff solutions to the same `problem` The latter would be more verbose but I guess more flexible.

There's a certain challenge like fun I'd imagine from doing stuff with the regexes.
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 11:46 am

Yes, it's been both fun and challenging :o :) I omitted a character a couple of times, and it crashed straight out of ST!
"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 Sun Feb 19, 2012 2:56 pm

OT:
castle can i help u with zen developing in some ways?
end OT

the same to u agib
Fed03
 
Posts: 79
Joined: Sun Oct 16, 2011 6:38 pm

Re: Addition to CSS zen coding

Postby agibsonsw on Sun Feb 19, 2012 4:40 pm

Thank you Fed03, but I'm just dabbling 8-)

The below might just qualify as the maddest Snippet seen! If you type 'bbs' it will output 'border-bottom-style'. When you follow this with a space it will display a list of appropriate values. These values will disappear as soon as you type another character. However, if you follow 'bbs' with an underscore _ then the values will remain displayed as you type (up to 8 characters).

Code: Select all
/* bbs_dash
style: dashed dotted double groove inset outset ridge solid none hidden */;
border-bottom-style: dash;

I've split the comment over two lines - it looks more professional and doesn't keep jumping between one and two lines. It does mean that you now have two lines to delete, but I figure if you're using this at all then you're likely to key a number of properties at once (so deleting two lines is not such an issue). (Hint: press Escape, then Ctrl-Shift-K twice to delete these lines.)

Definitely finished now!! :D

Code: Select all
<snippet>
   <content><![CDATA[/* ${1}
${1/($)|.*(?:^| )((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-Bottom\(Color\/Style\/Width\) etc BC BS BW:?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}${1/($)|.*(?:\b| )((baa)|(bap)|(bar)|((b[trbl]?s)|(ous))|(b[trbl]?w|ouw)|(boc)|(cl)|(cu)|(cs)|(dir)|(di)|(ec)|(fl)|(fsi)|(fst)|(fv)|(fw)|((bot|to|le|ri|he|wi|mat|mar|mab|mal|ma)|(mah|maw)|mih|miw|pa[trbl]?|tei)|((lh)|ls)|(lsi)|(lsp)|(lst)|(ov)|(tea)|(ted)|(tet)|(va)|(vi)|(wh)|(wo)|(zi))( |_[a-z0-9-]{0,8})$|.*/?3:attachment\: fixed scroll:?4:left center right bottom center top:?5:repeat no-repeat repeat-x repeat-y:?6:style\: dashed dotted double groove inset outset ridge solid none(?7: hidden):?9:width\: thin thick medium:?10:collapse separate:?11:left right both:?12:default pointer crosshair move *-resize text wait help progress auto:?13:top bottom:?14:ltr rtl:?15:inline inline-block list-item run-in table-cell-column-row -header-footer -group none:?16:show hide:?17:left right none:?18:smaller larger x\(x\)-small-large medium:?19:italic oblique normal:?20:small-caps normal:?21:bold bolder lighter normal xxx:?22:length percentage(?23: auto:?24: none):?25:length percentage (?26:number )normal:?27:none:?28:inside outside:?29:disc circle square decimal-leading-zero lower-upper-greek-latin-roman armenian georgian:?30:visible hidden scroll auto:?31:left center right justify:?32:underline overline line-through blink none:?33:uppercase lowercase capitalize none:?34:baseline sub super top text-top middle bottom text-bottom length percentage:?35:visible hidden collapse:?36:nowrap pre pre-wrap pre-line normal:?37:length normal:?38:integer auto/gi } */$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)|(zi)|([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 agibsonsw on Sun Feb 19, 2012 5:53 pm

Here is a help-text Snippet for propx, which I suggest naming 'propxh' (so it appears second in the completion list). It creates commented text. However, it's probably largely unnecessary.

Code: Select all
<snippet>
   <content><![CDATA[/* propx uses two or three letter abbreviations for many of the css properties, separated
by a space. For example, 'to' for top, 'po' for position, 'bbc' for 'border-bottom-color'.
You can type values between the abbreviations, but you cannot use quotes, colons or brackets.
After you type an abbreviation (and a space) a list of values will be shown. This list will disappear
as soon as you type another character, or follow your abbreviation with an underscore to keep the
list visible.
If you need to type an abbreviation such as 'le', just split it with a back-slash: 'l\e'.
Typing, for example, '3px3' will produce '3px px px', similarly for '3px4'. This works for ems, etc,
and percentages.
You can backspace as you type, and even edit the line, as long as you remain within the field.
Once you've finished, press Escape then Ctrl-Shift-K twice to delete the comment. */
]]></content>
   <tabTrigger>propxh</tabTrigger>
   <scope>source.css  meta.property-list.css</scope>
   <description>propx help</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 Sun Feb 19, 2012 11:55 pm

Fed03 wrote:OT:
castle can i help u with zen developing in some ways?
end OT


Definitely :) I'll get back to you when I got the time to steer you.

Right now I got a fuzzy todo list in my head even more fuzzily approximated in some notes / comments / docstrings.

That and no real chunk of time just atm
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 Mon Feb 20, 2012 2:03 am

@castles
Thank you for your assistance recently. I should also, and am happy to, offer my assistance. But this is perhaps a token gesture ;) as I am only now beginning to look at Python and the plug-ins API. But I could always test things and offer (polite!) suggestions?

{ Python looks wrong to my eye - without a } it lacks closure :lol: }

BTW I added two neat little touches to my Snippet: following a value with ! adds ' !important', and finishing with a full-stop '.' collapses the two comment lines into one. But I'm sure readers are bored with my frequent updates - I might wait until someone expresses an interest.

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 dreagan on Mon Feb 20, 2012 8:16 am

I'm not bored with frequent updates. Updates mean that it's still evolving, still being toyed with. I love to read how it changed over the last couple of days.
dreagan
 
Posts: 13
Joined: Thu Jan 26, 2012 7:42 am

Re: Addition to CSS zen coding

Postby agibsonsw on Mon Feb 20, 2012 10:08 am

dreagan wrote:I'm not bored with frequent updates. Updates mean that it's still evolving, still being toyed with. I love to read how it changed over the last couple of days.

Hello, and I appreciate your interest.

Typing ! immediately after a property-value appends ' !important' (even though this isn't generally recommended!). Ending with a full-stop collapses the two comment lines to one - then pressing TAB (or Escape) followed by Ctrl-Shift-K makes it slightly easier to delete the comment. But typing the full-stop is optional.

Code: Select all
<snippet>
   <content><![CDATA[/* ${1} ${1/.*(\.)$|.*/?1::\n/}${1/($)|.*(?:^| )((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-Bottom\(Color\/Style\/Width\) etc BC BS BW:?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}${1/($)|.*(?:\b| )((baa)|(bap)|(bar)|((b[trbl]?s)|(ous))|(b[trbl]?w|ouw)|(boc)|(cl)|(cu)|(cs)|(dir)|(di)|(ec)|(fl)|(fsi)|(fst)|(fv)|(fw)|((bot|to|le|ri|he|wi|mat|mar|mab|mal|ma)|(mah|maw)|mih|miw|pa[trbl]?|tei)|((lh)|ls)|(lsi)|(lsp)|(lst)|(ov)|(po)|(tea)|(ted)|(tet)|(va)|(vi)|(wh)|(wo)|(zi))( |_[a-z0-9-]{0,8})$|.*/?3:attachment\: fixed scroll:?4:left center right bottom center top:?5:repeat no-repeat repeat-x repeat-y:?6:style\: dashed dotted double groove inset outset ridge solid none(?7: hidden):?9:width\: thin thick medium:?10:collapse separate:?11:left right both:?12:default pointer crosshair move *-resize text wait help progress auto:?13:top bottom:?14:ltr rtl:?15:inline inline-block list-item run-in table-cell-column-row -header-footer -group none:?16:show hide:?17:left right none:?18:smaller larger x\(x\)-small-large medium:?19:italic oblique normal:?20:small-caps normal:?21:bold bolder lighter normal xxx:?22:length percentage(?23: auto:?24: none):?25:length percentage (?26:number )normal:?27:none:?28:inside outside:?29:disc circle square decimal-leading-zero lower-upper-greek-latin-roman armenian georgian:?30:visible hidden scroll auto:?31:absolute relative fixed static:?32:left center right justify:?33:underline overline line-through blink none:?34:uppercase lowercase capitalize none:?35:baseline sub super top text-top middle bottom text-bottom length percentage:?36:visible hidden collapse:?37:nowrap pre pre-wrap pre-line normal:?38:length normal:?39:integer auto/gi} */$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)|(zi)|(!)|([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\: (?76:absolute:?77:relative:?78:fixed:?79:static):?80:;\nquotes\: :?81:;\nright\: :?82:;\ntop\: :?83:;\ntext(?84:-align:?85:-decoration:?86:-indent:?87:-transform)\: :?88:;\nvertical-align\: :?89:;\nvisibility\: :?90:;\nwhite-space\: :?91:;\nwidth\: :?92:;\nword-spacing\: :?93:;\nz-index\: :?94: !important:?95:$95$96 $96 $96(?97: $96)(?98: !important)/gi};
]]></content>
   <tabTrigger>propx</tabTrigger>
   <scope>source.css  meta.property-list.css</scope>
   <description>po to, etc</description>
</snippet>

The extra semi-colon (after the comment) bugs me a little. I should ignore it - after all, we have to delete the line anyway. But I'm a bit obsessive about such things :o

I would like to be able to type apostrophes and brackets ( ), but I don't think this is possible within a single Snippet. Typing these characters runs macros, which breaks out of the Snippet. I think the user would have to change their settings (key-bindings) to enable this.

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 Mon Feb 20, 2012 1:56 pm

castles_made_of_sand wrote:Have you considered implementing the expansion of the lightweight syntax, which seems to be the cool part, as a plugin with an input panel?

(Note you can also use the `insert_snippet` command to insert snippets )


How can I call 'insert_snippet' from within a Python file? And can I feed it text, in place of the snippets' $1 variable?
"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

PreviousNext

Return to Plugin Announcements

Who is online

Users browsing this forum: Majestic-12 [Bot] and 9 guests