Using the Free Bulma Starter Kit for Umbraco 8

Free Theme for Umbraco 8

Last week, we offered to build a pro-bono website for a local business that was struggling to survive in the Covid-19 crisis. The Umbraco Content Management System (CMS) was our immediate choice for this project for its build speed and its ease of maintenance. Because there was no money available to buy one of our favourite uSkinned themes, we looked around for a free theme.

Umbraco 8 CMS

The exercise was made more difficult because we opted to use the Umbraco 8.x CMS for this project. The latest version of the popular Microsoft Stack based CMS, currently lacks the wide range of packages available to its older version 7 sibling. So, we rolled up our virtual sleeves and started looking around.

After a few not-so-delightful excursions into other free themes, we found the Bulma Starter Kit.

Free Bulma Starter Kit

This theme is the work of Matt Barlow of https://jacker.io. It is billed as a starter kit/theme based on the Bulma CSS framework for Umbraco 8. (As an aside, the Bulma framework is a free CSS solution based on the Flexbox layout. You can learn more about it here: https://bulma.io/)

Amazingly, Bulma for Umbraco has the following base content elements baked in:

• Homepage
• Products listing page
• Product detail page
• People listing page
• Generic content page
• Blog listing page
• Blog detail page
• Contact page

We were eager to see all this functionality in action, so we spun up a new Umbraco 8.6.1 blank website, logged in to the backend and loaded Bulma from the Packages page.

Oops – That Yellow Screen Again!

Once loaded the Bulma install reminded us to add some lines to the web.config and then to publish all content from the home node. The lines in question to be added to the web.config were:

<add key="Umbraco.ModelsBuilder.Enable" value="true" />

<add key="Umbraco.ModelsBuilder.ModelsMode" value="Dll" />

Google Here We Come

This set us off on the Google chase so familiar to all developers. Initial results suggested a change to the value=”Dll” portion of the above key config. But that did not work.

After some further searches and abortive tires, we found a post that suggested we add remove the suggested lines and add:

<add key="Umbraco.ModelsBuilder.Enable" value="true" />

<add key="Umbraco.ModelsBuilder.AcceptUnsafeModelsDirectory" value="true" />

<add key="Umbraco.ModelsBuilder.ModelsDirectory" value="~/../Project.Core/Models" />

<add key="Umbraco.ModelsBuilder.ModelsMode" value="LiveAppData" />

This worked, but there was still an error screen on Preview

We then went ahead a published all nodes by clicking on the Home node and allowing updates to all descendants AND make sure you check Include Drafts: Also publish unpublished content items.

This worked properly!

Good luck with Bulma if you got this far.

We will be building a few sites with it and will report back with our experiences.