Sublime Forum

Addition to CSS zen coding

#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
#24

Having said that, if there’s enough interest, who knows?

0 Likes
#25

Personally, I’m not attempting to build anything significant with this. ZenCoding is a fantastic feature already. I’m just studying/ dabbling at the moment. If it happens that I create something that others find useful or interesting, then that’s great :smiley:

0 Likes
#26

Dude, keep having fun and experimenting, what it’s all about! Fuck the naysayers! Just do what your doing.

0 Likes
#27

Thank you. That was my intention anyway :smiley:

0 Likes
#28

haha, yes of course, sorry, was a bit drunk and confused after a wedding

0 Likes
#29

I’m discovering a lot about regular expressions :sunglasses: . I’ve managed to compact it such that terms such as bb, bbc, brs construct:
border-bottom, border-bottom-color, border-right-style

but the separate words (border, bottom, color) only appear once within the regex expressions. That is, it grabs the term ‘border’ and then decides whether it needs to append ‘-bottom’ and then perhaps ‘-color’. (It also means I no longer need to type hyphens.) In a similar way I’ve combined margins with padding. I like this :smiley:

It’s amazing what can be achieved in one Snippet (with a little effort…)! I’m having second thoughts about the help text though, as it’s making it a bit verbose. I might change my mind and just have a second snippet (proph) which just produces help text within a css comment, or just abbreviate the help text.

I would still like to be able to put apostrophes or quotes around font names, but they throw everything off(?).

Again, I’m not attempting to substitute for ZenCoding, but I like the idea of a single Snippet being capable of all of this. Regards, Andy.

PS It occurred to me that, using the technique above, I could also provide property-values that are contextual (like ZC…). I’ll probably not do this though…

0 Likes
#30

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

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

0 Likes
#31

awesome work^ keep going :smiley:

0 Likes
#32

Thank you. Well, I was thinking what more could be done… I’ve run out of variables :astonished: . 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 :sunglasses:

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

0 Likes
#33

… 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… :wink:

0 Likes
#34

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

0 Likes
#35

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

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

0 Likes
#36

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

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

0 Likes
#37

[quote=“castles_made_of_sand”]It’s pretty cool what you’ve been able to do with a little regex and some persistence :smile:

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

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

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

0 Likes
#38

Such a template wouldn’t be quite as interesting though?

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

0 Likes
#39

Hey! That’s my job! :smile:

haha… you’re sooo mad that someone disagrees with you :smile:

0 Likes
#40

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

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.

0 Likes