Vanilla's Boilerplate theme framework - how do I use it?

Carlo_13

Hi, I've seen their is a new open source Boilerplate Theme available:
https://blog.vanillaforums.com/new-boilerplate-theme-a-new-way-to-create-beautiful-themes-with-vanilla

I've tried to download it from github, but links are broken:
https://github.com/vanilla/themes
https://github.com/vanilla/themes/blob/feature/boilerplate-theme/vanilla-theme-boilerplate/guide.md

Any idea, how can I get it ?

Thanks.

R_J

Yes, that boilerplate is only a few days old and I asked officials to proudly announce it because I think this is really a great piece of work! By now they didn't find the time yet but if you follow the Vanilla Blog (link in the heading above) you would find a small article which has been posted very recently: https://blog.vanillaforums.com/new-boilerplate-theme-a-new-way-to-create-beautiful-themes-with-vanilla

As far as I understand it, that theme isn't meant to be used as it looks right out of the box, but it is the best starting point if you want to create your own theme. You need some of the developer tools from the JavaScript world, though:
https://www.npmjs.com/package/@vanillaforums/theme-boilerplate

PCTipsGR

Noob's Error following: This is the first time I use Node, Yarn, Composer etc.

I installed node, yarn and composer, which were required for the theme. I have done everything right and all files are generated, but I am stuck at this.

On the Documentation, it says:

1. This tool also has a build step, provided by the Vanilla CLI. This step is necessary to generate scripts and stylesheets that run in the browser. Make sure the Vanilla CLI is installed, then run the following command on the theme folder to build:
   vanilla build

I am on the theme's folder and I am trying this command, however I get the error:

Vanilla source directory is missing.
Please provide a path to your vanilla installation with the "--vanillasrc" parameter or by setting the VANILLACLI_VANILL
A_SRC_DIR environmental variable.

I even tried to use that but it failed!

So, what do I do? The theme files seem complete from here but since the instuctions say this step is necesarry, I must follow it. Any ideas on how to fix this?

R_J

You need to run the following command from inside the themes folder:
vanilla build --vanillasrc=/var/www/vanilla
And you certainly need to replace the path with the root folder of your forum

PCTipsGR

@R_J said:
You need to run the following command from inside the themes folder:
vanilla build --vanillasrc=/var/www/vanilla
And you certainly need to replace the path with the root folder of your forum

The problem is I don't have a localhost installation of Vanilla, I just wanted the theme to upload it to my online forum.

So are you saying that I must make one?

PCTipsGR

@PCTipsGR wanted to say:
The problem is I don't have a localhost installation of Vanilla, I just wanted the theme to upload it to my online forum and experiment with it to create my own.

pioc34

I tried to make a new theme from windows and run vanilla build in my theme folder
"cannot find module... "

PCTipsGR

@pioc34 said:
I tried to make a new theme from windows and run vanilla build in my theme folder
"cannot find module... "

I am also from Windows, if that helps..

Anyway, just out of curiosity and because people who know and can help us normally ask for this, could you post the whole error message?

pioc34

Error: Cannot find module 'C:\projets\mysite\discussions\themes\mysite-v2\'C:\Users\darri\AppData\Roaming\Composer\vendor\vanilla\vanilla-cli\src\build\v1\index.ts''
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
at Function.Module._load (internal/modules/cjs/loader.js:506:25)
at Function.Module.runMain (internal/modules/cjs/loader.js:741:12)
at Object. (C:\Users\darri\AppData\Roaming\Composer\vendor\vanilla\vanilla-cli\node_modules\ts-node\src\bin.ts:145:12)
at Module._compile (internal/modules/cjs/loader.js:688:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:741:12)

R_J

@PCTipsGR said:
The problem is I don't have a localhost installation of Vanilla, I just wanted the theme to upload it to my online forum.

So are you saying that I must make one?

I don't think so. I guess it is sufficient if you simply download the normal Vanilla installation zip from this page and unzip it to any local folder.
I would also copy the config file from the live page to the local comf folder. But I guess you do not need to install anything or run a local copy of the database. A web server isn't needed neither.

@PCTipsGR said:

@PCTipsGR wanted to say:
The problem is I don't have a localhost installation of Vanilla, I just wanted the theme to upload it to my online forum and experiment with it to create my own.

The correct way to experiment with this theme would be to edit the Sass files and rebuild the css after every iteration. And if you are testing the theme, you should test it on a test system. If you want to upload it, it sounds as if you want to upload to your live server. You shouldn't do that. So why not create a local testsystem based on this occasion?

PCTipsGR

Nevermind, I found out that the base theme is working even without runing that command.

@R_J said:
The correct way to experiment with this theme would be to edit the Sass files and rebuild the css after every iteration. And if you are testing the theme, you should test it on a test system. If you want to upload it, it sounds as if you want to upload to your live server. You shouldn't do that. So why not create a local testsystem based on this occasion?

Yep, I guess that's right. I will create my test system now.

R_J

Great! And if you dive into that adventure, why not get VirtualBox and set up a local linux system, debian e.g.?

Carlo_13

Is it really mandatory to install node.js and npm ( I am on mac ).
I mean, does the theme uses ruby or something ?

Usually I make a local install of vanilla with Mamp, and make some test with the theme.
That is why I was asking for the github version of the theme.

pioc34

yes desktop view is working without doing vanilla build command but on mobile, hamburger menu isn't working when i test it in chrome and edge...

R_J

In the end, for running the theme you do not need anything special. For building it, from scratch, you should follow the given steps.

I will add a zip which shows the boilerplate folder after it has been built completely. You really should take it for what it is: a boilerplate!
One of the best things on that theme-boilerplate is that it is based on that built toolchain. Simply editing the resulting css is somewhat disrespectful

pioc34

I tested your boilerplate theme and on mobile, hamburger menu isn't working too.

R_J

@pioc34: It's not mine. It's a boilerplate and maybe no one will take responsibility for its functionality I guess. That's one of the reasons why I haven't uploaded it to the themes section.

This theme has been built as a starter for theme designers with some knowledge. It may sound harsh and I do not want to be impolite, but even if you can follow the build process from the docs, you need additional knowledge to work with it. If you are able to work with it, you should be able to debug problems. If you cannot do that, you should improve your skills. As I said: this shouldn't sound disrespectful.

But at least

• in my installtion
• with my android phone and
• my browser
  it is working flawlessly.

pioc34

ok it's a problem with my installation! Thank you for your help i will investigate!

Linc

Important info here:

• Boilerplate is a framework for creating new themes. It's not a standalone theme.
• We're going to release an actual theme based off of Boilerplate soon.

If you're struggling with Boilerplate because you want to learn our new frontend build process and start brewing new themes, press on! If you just want a nice, responsive theme... just give it a couple months.

PCTipsGR

I am trying to replace the background white color. I have changed the value of $global-color_bg to a class I created myself based on the default $global-color_white (named it $global-color_choco, if it matters).

I even found myself replacing other sections that were supposedly related to background but I can't seem to be able to do this!

I found this section: $frame_backgroundColor: $global-body_bg !default;, I replaced the global-body_bg value with this choco variable I created (which had chocolate color), cleared cache from Browser, DNS and Wamp but nothing changed!

If anyone can help me and needs access to an online istance with Boilerplate, I can do that.

I imagine that the solution will probably be simple and then I will laugh at myself but it might not be

R_J

You have to check three things:

1. Have you really changed the source file (_variables.scss)?
2. Have you rebuilt the css file and did it show your changes?
3. Does your browser load the changed file?

Depending on which of these steps failed, the solution would be quite different
1. You make the changes and they are not safed: file permission problem
2. Building css failes: your tool chain has an error
3. File isn't loaded: try opening the page in private mode to eliminate caching issues
4. All of the above is successful, but changes you made are not reflected: your css rules are wrong