Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Try Vanilla Forums Cloud product

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

Carlo_13Carlo_13
edited November 13 in Development

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.

Comments

  • R_JR_J Cheerleader & Troubleshooter Munich Moderator

    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

    Carlo_13
  • 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_JR_J Cheerleader & Troubleshooter Munich Moderator

    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 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.

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

  • @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?

  • 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_JR_J Cheerleader & Troubleshooter Munich Moderator

    @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_JR_J Cheerleader & Troubleshooter Munich Moderator

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

  • 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...

  • R_JR_J Cheerleader & Troubleshooter Munich Moderator

    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 :wink:

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

  • R_JR_J Cheerleader & Troubleshooter Munich Moderator

    @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!

    R_J
  • LincLinc Director of Development Detroit Vanilla Staff
    edited November 13

    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. ;)

    pioc34K17PCTipsGR
Sign In or Register to comment.