Sublime Forum

Addition to CSS zen coding

#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

#41

Yes, itā€™s been both fun and challenging :astonished: :smile: I omitted a character a couple of times, and it crashed straight out of ST!

0 Likes