A CSS 'dictionary' workflow

[earleymw]

So here is what I want to do:

- type in a CSS property or part of a property (i.e. the first half of a css declaration; for example, 'overflow')

- display a list of properties that contain the typed property

- allow selection of the one I want, selection displays all keywords for the property

Here is an example.

I open up Alfred and type 'css backg'

As I type, I see a dynamic list. At this point, I'd see a list like:

- background

- background-color

- background-position

- background-image

- background-repeat

- background-size

- etc.

Let's say I want background-repeat; I select that one. Selecting that shows a new list of that property's keywords, like this:

- repeat

- repeat-x

- repeat-y

- no-repeat

- inherit

Selecting one of these values copies it to clipboard.

What's going to be the rundown for me doing something this? Is it python? Applescript? Something else?

I'm a web front-end developer (duh, context of question probably tells you all that)...and for me at least it's hard to keep all this crap in my head constantly. And some of it's inconsistent, like sometimes there's a dash (no-repeat), sometimes there isn't a dash (norepeat), sometimes the keywords for property 1 aren't the same in contextual usage as for property 2. For example, property 1 might use 'none' as a keyword, while property 2 uses no-repeat, and they do the same thing--i.e. don't do anything for the current property, and clear anything inherited.

I'm not afraid of doing it in python or whatever, it's a learning curve but not a problem, I just need a pointer in the right direction if possible!

[jdfwarrior]

So here is what I want to do:

- type in a CSS property or part of a property (i.e. the first half of a css declaration; for example, 'overflow')

- display a list of properties that contain the typed property

- allow selection of the one I want, selection displays all keywords for the property

Here is an example.

I open up Alfred and type 'css backg'

As I type, I see a dynamic list. At this point, I'd see a list like:

- background

- background-color

- background-position

- background-image

- background-repeat

- background-size

- etc.

Let's say I want background-repeat; I select that one. Selecting that shows a new list of that property's keywords, like this:

- repeat

- repeat-x

- repeat-y

- no-repeat

- inherit

Selecting one of these values copies it to clipboard.

What's going to be the rundown for me doing something this? Is it python? Applescript? Something else?

I'm a web front-end developer (duh, context of question probably tells you all that)...and for me at least it's hard to keep all this crap in my head constantly. And some of it's inconsistent, like sometimes there's a dash (no-repeat), sometimes there isn't a dash (norepeat), sometimes the keywords for property 1 aren't the same in contextual usage as for property 2. For example, property 1 might use 'none' as a keyword, while property 2 uses no-repeat, and they do the same thing--i.e. don't do anything for the current property, and clear anything inherited.

I'm not afraid of doing it in python or whatever, it's a learning curve but not a problem, I just need a pointer in the right direction if possible!

 

Well, Alfred supports multiple languages. If you are comfortable in Python you could certainly use that. Being a web dev, if you are fluent in PHP, if could be done with that as well.

 

Check out some of the pinned posts in this forum.

 

This is a list of available libraries that will greatly simplify the creation of workflows.

 

The type of workflow you are going to want is a script filter. Script filters allow you to create a custom list of result items. This would allot you to generate the list of matching css properties. Once you have the initial property selected, you could autocomplete the full name of it and then use that to generate a new list. Check out this post that details how to generate the feedback results. This is where the libraries mentioned above help out significantly.