Little CSS Cookbook

[juliosecco]

A workflow that could help us write CSS faster and without errors.

 

You can browse the list of CSS parameters selecting a category (Animations, Borders, Text, Fonts etc...) or you can filter the CSS properties list typing letters contained in the property name, or the starting letters of their abbreviation.

Then you continue filtering to assign the CSS property one or more values.
When ready, action the item to have it pasted on the frontmost text application, or Cmd C to copy it on the clipboard.

 

Some examples, using an hotkey to start it:

Here LCC will paste also the vendor variants (if set to 'y' the respective environment variables):
 

-webkit-transform: matrix(4,5,4,5,4,5);

-moz-transform: matrix(4,5,4,5,4,5);

-ms-transform: matrix(4,5,4,5,4,5);

transform: matrix(4,5,4,5,4,5);

Yo can set various environment variables, such as:

 

tabBeforePasting - to add a tab before the pasted css text to indent it into the CSS sheet;

newLineAfterPasting -  to add a new line after pasting the css:

startAgain - to start again the workflow after pasting the CSS, ready for another one;

webkitVendor - add the -webkit- vendor variant when needed (animations, transitions...), there are also the -moz- and -ms- options;

addToClipboardHistory - to add the pasted CSS to Alfred's clipboard history or not;

 

you can download it from packal:

 

http://www.packal.org/workflow/little-css-cookbook

 

When installed, type littlecsshelp in Alfred to open an html help page, where you'll find more detailed instructions and an explanation of the environment variables.

 

Giulio

Edited July 17, 2016 by juliosecco

[nikivi]

Wow, this is a really great workflow. 

 

Thank you for making and sharing it.

[juliosecco]

Wow, this is a really great workflow. 

 

Thank you for making and sharing it.

 

thanks for the first message  

hope is working fine

worried about something wrong on other machines, so please let me know

 

Giulio

Edited July 16, 2016 by juliosecco

[vitor]

A workflow that could help us write CSS faster and without errors.

What’s really missing from your post is how. You give no information on why this is better than any other tool CSS developers are already using. The only thing I see are some screenshots that don’t really tell much, and you mention an HTML help page embedded in the workflow itself. Few people will take the time to download, install, and try, on just that.

You have a full help page. Why not post its contents so we can get a feel for what this actually does?

[juliosecco]

What’s really missing from your post is how. You give no information on why this is better than any other tool CSS developers are already using. The only thing I see are some screenshots that don’t really tell much, and you mention an HTML help page embedded in the workflow itself. Few people will take the time to download, install, and try, on just that.

You have a full help page. Why not post its contents so we can get a feel for what this actually does?

 

Simply because it seems I can't at the moment  

I am trying to update the workflow description from the dashboard, but what I put there is not shown on the workflow page

 

OK, Done!

Edited July 17, 2016 by juliosecco

[raguay.customct]

All I get on the Alfred Prompt is:

 

Warning: controllaFlusso(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone 'UTC' for now, but please set date.timezone to select your timezone. in /Users/raguay/Dropbox (Personal)/Richard/rag/Alfred/Sync/Alfred.alfredpreferences/workflows/user.workflow.F1B010D2-09B2-4C6E-B8DC-DE51D80C453D/lcc.php on line 760

Notice: Undefined variable: colorpanel in /Users/raguay/Dropbox (Personal)/Richard/rag/Alfred/Sync/Alfred.alfredpreferences/workflows/user.workflow.F1B010D2-09B2-4C6E-B8DC-DE51D80C453D/lcc.php on line 760
{"alfredworkflow": {"arg":"","config":"","variables":{"terminato":"","colorpanel":null,"input":"43;1;0"}}}

 

I was doing the "lss bbs s" as in the example.

[juliosecco]

Hi,

thanks for pointing me out,

I'll check it and let you know

 

     Giulio

[juliosecco]

All I get on the Alfred Prompt is:

 

Warning: controllaFlusso(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone 'UTC' for now, but please set date.timezone to select your timezone. in /Users/raguay/Dropbox (Personal)/Richard/rag/Alfred/Sync/Alfred.alfredpreferences/workflows/user.workflow.F1B010D2-09B2-4C6E-B8DC-DE51D80C453D/lcc.php on line 760

Notice: Undefined variable: colorpanel in /Users/raguay/Dropbox (Personal)/Richard/rag/Alfred/Sync/Alfred.alfredpreferences/workflows/user.workflow.F1B010D2-09B2-4C6E-B8DC-DE51D80C453D/lcc.php on line 760

{"alfredworkflow": {"arg":"","config":"","variables":{"terminato":"","colorpanel":null,"input":"43;1;0"}}}

 

I was doing the "lss bbs s" as in the example.

It seems that  you have a very hig warning settings for php.

so it is showing you warnings that are not errors, for example the Undefined variable warning, for php is not required to always declare variables.

I have tried to lower the php message level from code, along with removing the warning reasons, could you try it again if you please?

 

thanks,

 

Giulio

Edited July 19, 2016 by juliosecco

[raguay.customct]

That is working for me. Yes, I develop in php and want to know anything that could cause an error. It helps make more bullet proof coding.

 

But, If I type 'lcc bbs' with an enter, it comes up with a blank Alfred prompt that doesn't respond to any input. But, typing 'lcc bbs s' gives the output: border-bottom-style: solid; just like I would expect. You might want to catch for the return before a complete query.

[juliosecco]

That is working for me. Yes, I develop in php and want to know anything that could cause an error. It helps make more bullet proof coding.

 

But, If I type 'lcc bbs' with an enter, it comes up with a blank Alfred prompt that doesn't respond to any input. 

 

Hi raguay,

first of all thanks for your feedback, really appreciated

lcc bbs enter should simply paste  'border-bottom-style:' with the value of  the first item of the list, just like you can use Cmd - number to paste any of the other values, or move with the arrows and action.

 

the idea is to have the possibility to action every of the possible values (solid dashed, inherit, etc.) even before filtering them, with the result that bbs enter actions  (pastes)  the first.

After pasting the workflow should reopen Alfred with 'lcc' ready for inserting another CSS line (if you leave the startAgain environment variable to 'y')

 

for me is working this way, isnt the same for you?

thanks again

 

     Giulio

Edited July 22, 2016 by juliosecco

[raguay.customct]

I'm sorry. It only happens when I type "lcc bb" and then enter. Any partial commands choke it with the debugger outputing:

 

[2016-07-22 22:43:47][ERROR: input.scriptfilter] JSON error: JSON text did not start with array or object and option to allow fragments not set. in JSON:

Warning: main(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone 'UTC' for now, but please set date.timezone to select your timezone. in /Users/raguay/Library/Caches/com.runningwithcrayons.Alfred-3/Workflow Scripts/039D0861-BAFE-41D9-8019-7CED5CC37445 on line 3

 

Notice: Undefined index: input in /Users/raguay/Library/Caches/com.runningwithcrayons.Alfred-3/Workflow Scripts/039D0861-BAFE-41D9-8019-7CED5CC37445 on line 3

{"items": [{"uid":"p","arg":";;1;","title":": ;","subtitle":"...more values to set","text":{"copy":": ;"},"icon":{"path":"\/Users\/raguay\/Dropbox (Personal)\/Richard\/rag\/Alfred\/Sync\/Alfred.alfredpreferences\/workflows\/user.workflow.F1B010D2-09B2-4C6E-B8DC-DE51D80C453D\/icone\/"}}]}

[juliosecco]

I'm sorry. It only happens when I type "lcc bb" and then enter. Any partial commands choke it with the debugger outputing:

OK, it seems to be related to the 'developer' settings this too...

Now I have decided to set this settings me too, and investigate the thing.

Ill keep in touch with a solution, if you will have the patience to try again

thanks!

 

Giulio

[juliosecco]

I'm sorry. It only happens when I type "lcc bb" and then enter. Any partial commands choke it with the debugger outputing:

 

OK, did try  to remove the warnings, but I did it in quite a 'blind' mode...

I wanted to set my php.ini to test the things in developer mode, but once i change the php.ini.default in php.ini, I loose access to environment variables, both my custom and Alfred ones, such as $_ENV['alfred_preferences']. Very strange, they always return ''

 

update on that: changing on the php.ini the variables_order  directive I now see thr environment variables;

it was set to variables_order = "GPCS" (without env vars ) and I set it to variables_order = "GPCSE"

anyway, I have now changed every env var called using $_ENV with getenv('name'), because I have discovered that in the php.ini the variables_order directive could be set in a way that NOT loads env variables.

Another little thing learned    

 

Another mystery are your warnings about timezone, as far as I know it should be related to date/time functions, that I don't use...

 

anyway, please try again when you have time for...

Edited July 24, 2016 by juliosecco

[raguay.customct]

Okay. That new copy works great. It doesn't die anymore. I will enjoy the workflow as I work with CSS. Thanks.

[juliosecco]

Okay. That new copy works great. It doesn't die anymore. I will enjoy the workflow as I work with CSS. Thanks.

 

Fine, I'm glad of this.

Thank you for stimulating me on fine tuning it,

any suggestion will be welcome

[juliosecco]

Update (v0.9.8):

 

changed the query while filtering CSS properties,

now result list will contain all the CSS properties that have their abbreviations STARTING with the filtering text, or the properties that have their name CONTAINING the filtering text

 

Regarding the property values, the filter will check for values that have a name STARTING with the filtering text, except for some special cases like fonts

Edited July 27, 2016 by juliosecco

[nemrod]

GREAT !!!
Is it a dream to hope a similar workflow with html5 semantic ? (I don't find one)

[juliosecco]

GREAT !!!

Is it a dream to hope a similar workflow with html5 semantic ? (I don't find one)

 

Hi nemrod, first of all thank for your feedback

 

Yes, in my mind the natural continuation would be something about html...

but I have 2 problems:

 

1) so little time aside of my living job    

 

2) sincerely I wouldn't know where to start;

I mean, CSS is a list of parameters, with every one with its possible list of values, so I can easily put them in a database

 

while html is:

indented, with each tag inside another one;

variable, think about an html table, than can have th (header or not) and an indefinite count of rows and columns;

short tags, I wouldn't know the best way to filter them in a an effective way;

 

at the moment I couldn't know how to start (I didn't spent any time thinking of it indeed)

 

sure I could setup something where typing div you have <div></div> pasted, but it seems too little to me as a way to help write html effectively and faster...

 

please I'm open on suggestions about how the filter could be done to have some html pasted, and we could setup something nice over time  

so make me an example of how it could work to be effective

Edited August 3, 2016 by juliosecco

[nemrod]

Hi! @juliosecco

As a designer, I am not sure I can help but...
Is it possible to use an open data base ?

I was using the caniuse worflow (toooooooo sloooooooow)
https://github.com/willfarrell/alfred-caniuse-workflow

or perhaps the w3c school database ?
 

[juliosecco]

LCC is quite fast because the database is local, and done by me...

 

well, I'll see what's feasible in the near future,

depending on other tasks to do to live  

 

I'll keep in touch when I'll have something ready ...

Edited August 4, 2016 by juliosecco