Some three weeks ago we made a task request for SteemMakers. Our website had evolved over time and we're working on a quality metric that needs visual integration. We had some ideas but nothing concrete.
The wireframe is quite complex and designing it without a tool quickly turned out to be a hard task. I constantly needed to save the code and css and then update the browser to see the result. I know there are several bootstrap tools that can help with this but since this is an open source project I would like to keep the tools free so everyone can use them and learn a bit along the way. I ended up choosing for the free version of Pingendo which markets itself as "The ultimate Bootstrap 4 builder". I wouldn't call it ultimate because it also had some quirks but it served well for the task at hand.
Another tool I used is bootstrap.build. This tool allows for a visual design of bootstrap themes, saving the design and later importing it again. This allows for easy updating of the site's theme by people with graphic skills without them needing to be aware of the nifty details about compiling the sass.
Because Pingendo also allows for sass but doesn't cope well with the bootstrap.build sass (it basically hangs unresponsive) I needed to do some trickery to get things working together nicely. All in all this is not too bad because this is a design template and needs to be cut up in pieces to fit into the vue.js components anyway. First trick: the bootstrap.build sass is not used directly but the compiled version is included in the template. Second trick: don't put custom css in the sass but use a second css file to include it.
Pingendo allowed me to somehow quicker design the template but not everything went smooth. The interface is limited and doesn't support all bootstrap classes. You can add the in textual form however but it's a mix, some are available in the UI, others are not. And last but certainly not least. Not everything is easily achievable with bootstrap so custom css is necessary here and there anyway.
I encountered many. At first I thought it was because of my lack of understanding but as time passes on I started to notice certain behaviors. I'm just giving two examples here but be warned that the tool is far from perfect. Most issues are related to the preview not showing the content correctly. When the design is opened in a normal browser it does show correct.
As an example: the vertical centering of the preview image does not work. In the preview it looks like this:
When the same design is opened in a browser I get the correct version:
Another example: sometimes when I open the design the medal and/or user thumbnail images are stretched. Again, when opened in a browser they are correct. Changing a parameter to another value and back to the original fixes the preview.
All in all I spend quite some time getting to know the tool and it's quirks. Maybe timewise I didn't gain much. But it certainly goes smoother now that I have it in my fingers. This is the very first version of the template:
A live version is available here.
The work by
In the meantime we're also working on the questionnaire and how it can be finetuned, tested and how it all can be integrated. 
Obviously first some discussion and work to make the design fully responsive. Then we'll need to integrate the design in the actual site. And as mentioned above the steemauto integration, work on the questionnaire, ... More than enough to keep ourselves busy. Have a look at our github issues if you'd like to help us out!
Repository: https://github.com/JefPatat/SteemMakers/tree/master/website
My github account: https://github.com/JefPatat
Relevant commits: several commits from June 17th to July 2nd: https://github.com/JefPatat/SteemMakers/commits/master
