Sublime Forum

CSS completions file

#1

I’ve attached a CSS completions file that I’ve been working hard on. I’m hoping that some might find it useful and, perhaps, interesting! You can just copy it to your Packages\CSS folder. You can rename it, but it needs to keep the extension ‘.sublime-completions’.

[The CodeIntel Package might disable my file, or I believe that there is a CodeIntel setting that disables its’ completions for css (it might already be disabled in this Package).]

I wasn’t interested in selectors, but when entering css properties I wanted to know what values/settings are available, and to be able to supply these very quickly, with just a few keystrokes.

I’ve used camel-case for the tab-triggers; e.g. ‘borderBottomColor’. This way, I can type ‘borBS’ to chose it. It also means you can recognise my versions (I didn’t like all the hyphens in the supplied snippets anyway).

I’ll prepare a cheatsheet, and also post it on my GitHub. But here are some highlights:

float appears like this: float: Left/Right/None;

If you type the letter ‘l’ it will complete the word ‘left’ and you can tab (or press End) to finish. The Capitals indicate what letters you need to press. If you change your mind, just press Backspace (once) and type ‘r’ or ‘n’.

Some are a little more intricate. For example: border-top-style: DAshed/DOtted/Double/Groove/Hidden/Inset/Outset/Ridge/Solid/None;

Pressing D supplies ‘double’, ‘da’ for dashed, ‘do’ for ‘dotted’. Again, you can press backspace if you change your mind.

Clip is interesting: clip: rect(top right bottom left);

‘top’ will be highlighted, and if you type 5px the ‘px’ will appear after the fields ‘right bottom left’ (you can still change these later). Similarly for ‘%’ and a comma.

color (backgroundColor) etc. appear like this: color: _colourname;
If you start typing a colorname it will complete it for you; so, r for red, b for blue, bl for black, etc. There are 28 colours available (although colour numbers #RRGGBB are recommended!).

I’ve created a lot, but this is still a work in progress (and incomplete)! In particular, I haven’t dealt with any shorthand properties (border-width, etc.) as yet… So I will be very interested to receive feedback, good or bad! Andy.

Hint: Sometimes it’s easier to press the End key once you’ve finished, rather than tab through a number of fields!
AndyCSS.zip (3.28 KB)

0 Likes

#2

Not sure why you haven’t been receiving any raves on this one yet, so I guess I’ll be the first. This is a very handy tool, and I just wanted to thank you for putting it together.

0 Likes

#3

@nullisnotnull Thank you very much for your response.

I’ve almost completed it for the other main css properties. I can then move most of the existing css snippet folders out of my Packages folder - they’re not as useful. I’m not planning to do anything with poorly supported (CSS3) properties, or browser-specific items, as yet. There is a lot of css “stuff” hard-wired into ST2 that I need to work alongside.

I’ll re-post my completed version a bit later, and provide a few notes. Regards, Andy.

0 Likes

#4

Hello. I’ve attached my 2nd, completed version of my CSS completions. It includes all the main properties, but not poorly supported items, animation, or browser-specific properties. If you (hopefully) find these more useful than the default Snippets, then you could move some or all of the css snippet folders out of Packages\CSS. You might want to keep some from the ‘Other’ folder, as I haven’t covered all of these.

I haven’t got round to a cheat-sheet yet, but it should be fairly easy to follow: type the CApitalized letters to select that value. For example, position will display as:
position: Absolute/Relative/Fixed/Static;
Type the letter ‘A’ for absolute, then press Tab (or End) to finish.

I’ve made it slightly more user friendly. So, for example, although ‘a’ is sufficient to select ‘absolute’ it will also recognise ‘ab’. I find this handy, as I’m often typing two letters before realising I only need one. I could have extended it to three or more letters, but I’m reasoning that if someone is typing this number of letters then they are ignoring the completions anyway.

Properties that can accept 1-4 values, such as border-width, were a puzzler. What I’ve done is to provide two versions. ‘borderWidth’ allows you to type whatever you need (although you can still type ‘m’ for ‘medium’ to kick-start it - although you then have to use Ctrl-right to jump after this word). ‘borderWidth4’ allows you to tab between the four values, deleting (back-spacing) ones you don’t need. However, if you type ‘12px’ or ‘5%’ as the first value, it will append ‘px’ or ‘%’, etc., to the remaining three values. My reasoning here is that, if you are supplying all four values, then it’s likely that you would use the same units for all four. (You can still delete/amend as you tab along.)

I hope you enjoy! And I would appreciate any comments/feedback. Andy.
AndyCSS2.zip (5.45 KB)

0 Likes

#5

I wanted to be able to cycle through lists of items, such as the various colour-names or font-families. On a blank line you can type ‘_colourz’ or ‘’_fontz’ and (hopefully) Tab through the various items. I find it works better if you type these words in full, press Escape to dismiss the completions list, and then start tabbing. I’ve added the z to prevent tabbing picking up items from other completions.

However, I really wanted this to work within a snippet (completion). But, of course, tabbing just moves between the various fields. Adding the code below to Key Bindings - User means that, within a snippet, I can press the left arrow to get to the end of the word ‘_colourz’, and press Ctrl-Alt-right (and left) to cycle through the colours. Then I can press Tab to continue to the next field.

Other lists I’ve included are: _bstylz (border styles), _bwidf (border widths), _showz (display values) and _xhair (cursors).

I appreciate that, although (hopefully) interesting, it may not be that useful at the moment. However, typing ‘_fontz’ on a blank line to then Tab through lists of font-families could be quite handy, especially as you can edit the completions file to add your own favourites to the list!

But, as indicated, this feature is really additional to my main css completions. Andy.

[code]
{ “keys”: “ctrl+alt+right”], “command”: “insert_best_completion”, “args”: {“default”: “”, “exact”: true} }, // deleted “\t”
{ “keys”: “ctrl+alt+right”], “command”: “insert_best_completion”, “args”: {“default”: “”, “exact”: false}, // deleted “\t”
“context”:

		{ "key": "setting.tab_completion", "operator": "equal", "operand": true }
	]
},
{ "keys": "ctrl+alt+right"], "command": "replace_completion_with_next_completion", "context":
	
		{ "key": "last_command", "operator": "equal", "operand": "insert_best_completion" },
		{ "key": "setting.tab_completion", "operator": "equal", "operand": true }
	]
},
{ "keys": "ctrl+alt+left"], "command": "replace_completion_with_prev_completion", "context":
	
		{ "key": "last_command", "operator": "equal", "operand": "insert_best_completion" },
		{ "key": "setting.tab_completion", "operator": "equal", "operand": true }
	]
}

][/code]

0 Likes

#6

i think that’s amazing but if i can give u an advice, you should have posted this 3D in plugin announcement and added to package control for maximum visibility and therefore maximum assistance from the others developer^
here in this section it’s a lil bit underseen XD

0 Likes

#7

Thank you Fed03. You’re probably right :sunglasses:. Although, people here seem to post things in curious places :laughing:

As it is now available on my GitHub I’ll mention it in that area as well.

Regards, Andy.

0 Likes