HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Vanilla's Boilerplate theme framework - how do I use it?
edited November 2018 in Community Addons & Development
Hi, I've seen their is a new open source Boilerplate Theme available:
I've tried to download it from github, but links are broken:
Any idea, how can I get it ?
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
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:
I am on the theme's folder and I am trying this command, however I get the error:
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?
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?
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?
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)
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.
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?
Nevermind, I found out that the base theme is working even without runing that command.
Yep, I guess that's right. I will create my test system now.
Great! And if you dive into that adventure, why not get VirtualBox and set up a local linux system, debian e.g.?
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.
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...
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
I tested your boilerplate theme and on mobile, hamburger menu isn't working too.
@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
it is working flawlessly.
ok it's a problem with my installation! Thank you for your help i will investigate!
Important info here:
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.
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
You have to check three things:
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