Foundry VTT system dev - Part 1.5: CSS setup

[@HansJoachimMaier]

Thank you for all of that :) Are you aware, that there is a less extension available for VS Code which takes care about the compilation? It is called Easy Less

[@oatveal]

I didn't know, thanks for the tip!

[@martintorres5901]

@@oatveal how does using Easy Less change this tutorial. Does it mean we don't have run the gulp task?

[@oatveal]

@@martintorres5901 I have no idea, I have not tried Easy Less yet. Current setup works for me on this project, so I'm not fixing something that's not broken ;)

[@imperturbableDreamer]

@@martintorres5901 So here's what I did:
Install the Less Transpiler (as per step 1 of the VSCode tutorial)
Install the Easy Less extension
Go into the options of Easy Less for your workspace (will redirect you to a workspace.json)
Add the following lines to the less.compile section:
"main": "fs2e.less",
"out": "../"
The first one will make it that only your main system file will get transpiled (so you don't end up with an item-seet.css if you change something there)
The second line outputs the .css file into the main directory instead of the less folder you just created

[@neilbenson3430]

Thanks for the tutorial, I'm finding it really useful after going down a rabbit hole with boilerplate.
The more standard way or running gulp is just through npm, add this to your package.json:
"scripts": {
"gulp": "gulp default"
},
Then execute it in a terminal with:
npm run gulp
This does the same job as using tasks.json (runs gulp in watch mode), but is more standard in that it doesn't rely on devs using VS Code.

[@6pakAL]

This is one of the most clear & concise tutorial series I've ever seen! Great work sir!

[@jeanbon130]

Hello ! First Thank you very much for all those tutorials for Foundry, they help me a lot ! I have a little issue for setting up the Handlebars Editor helper... I have exactly the same line as you (line 43 at 0:44) and checked for typo, but I can't seem to see the "clickable" part under the item sheet on Foundry. the

[@oatveal]

I believe your problem (or at least how to debug it) is addressed in the rest of the video. the div (or whatever) that contains your editor probably has a height of 0, so you won't see it.

[@jeanbon130]

@@oatveal Thanks for the fast response ! you were exactly right, it was set at zero. Keep up the good work, it's really helpfull for the likes of me :)

[@thegamingwolf371]

I have the same issue, but mine doesn't even show up on the item sheet. I have it exactly as in the video and followed the whole css tutorial hoping for a solution, but nothing. Still doesn't show up :(

[@psotos]

Merci Beaucoup for this amazing video series!!

[@julientabulazero103]

I ran into the problem that my scrolling menu would not register the selection. I fixed it by declaring the select function for Handlebars in the myproject.js file
Handlebars.registerHelper('select', function( value, options ){
var $el = $('').html( options.fn(this) );
$el.find('[value="' + value + '"]').attr({'selected':'selected'});
return $el.html();
});

[@QuangNguyen-ep6mx]

no buld task to be found when I press CTRL+SHIFT+B. neither in the visualstudio tutorial, nor later when the gulp is made. I just have to run it either manually or write another script to run a script? weird

[@oatveal]

See the pinned comment, there's a better way of doing this.

[@QuangNguyen-ep6mx]

@@oatveal I'll check it out, thanks

[@QuangNguyen-ep6mx]

@@oatveal this worked as @imperurbableDreamer explained it. thank you and Dreamer again
literally took me 1min to setup. You use easy less by just saving the .less file. if you added the lines in the compile section, like mentioned from Dreamer, it will autocreate the .css outside of your less-folder (otherwise easy less will put the .css elsewhere)

[@VilerVicious]

what is this gulp thing and from where it is coming from? It was never mentioned before

[@oatveal]

Errm, this is the video that explains it? But see the pinned comment for an easier solution (which I mention in a later episode, can't remember which one)

[@VilerVicious]

@@oatveal nvm I am completely blind. I just stopped at the WRONG step 2 of the tutorial (Create a simple Sass or Less file). Sorry again, thanks for reply!

[@kevinking627]

Bit confused when I do the set up of less from the vscode website do I do that in my game folder?

[@oatveal]

Sorry I forgot to reply to this. Yes.

[@Tielc]

Could you show what your tasks.json file looks like? I cannot get my gulpfile to work. I am able to create a task that I run to re-compile my css. I just can't get gulp to work.

[@oatveal]

{
"version": "2.0.0",
"command": "gulp",
"type": "shell",
"problemMatchers": []
}

[@ian612]

I had a lot of problems getting this to work properly until I changed editable=editable to editable=true. Is this something that's changed in v0.8?

[@oatveal]

See ruclips.net/video/h80c6OUcKtY/видео.html