Bolt 3 will come with a new default theme. We're still working very hard on it, so there aren't any screen shots to show you, just yet.

I can tell you something about the process we're using to make this new default theme. The most common critique on the 'old' default "base 2014" theme was that it looked "too bland", and at the same time that it was a bit clunky to modify.

Experience, and many experiments, has shown that making a good default theme is hard. We decided we need a different approach The first thing we needed to figure out is what actually makes a theme "good". There are a number of different criteria, coming from the different ways people are using the default theme, and how they wish to modify it. The most important goals we've identified are:

  • The theme needs to be "tinker friendly". Both for newcomers to Bolt / CSS / HTML beginners, as well as veterans.
  • It should be based on a well-established front-end framework, so we can benefit from their experience (and extensive documentation)
  • It needs to "Look nice" out of the box, without locking in to those "looks" too much.
  • Twig templates need to highlight a lot of the functionality, but it shouldn't be overwhelming for newcomers
  • We need to provide templates for most functionality, without making it cluttered.

As you can see in the points mentioned above, it's all about finding a good middle ground for these things. I have personally spent a lot of time placing myself in the position of the front-end developer that's new to Bolt, and what he or she would expect from a default theme, and how to make this experience a smooth one.

Some of the things we're doing in the development of the new theme, to make sure it works well are:

Taking a step back

To make sure we can reach these goals, I've started approaching the new theme from two different angles: I've made a list of the 'nice things' a new theme should have, and some ideas on how it should look. At the same time, I've been working on a very, very basic theme, that has as little styling as possible. Just the grid and the base templates.

Now i'm working on actually putting those two together: Building a nice looking theme, on top of that bland looking one. The result will be something that not only looks nice, but is also easy to modify on different levels. It also means

Using Foundation 6

We've chosen Zurb Foundation 6 as a basis for the HTML / CSS. It uses SASS and a Gulp build-chain, and is very well laid out. It's also documented thoroughly, so it makes sense to benefit from that.

Documenting the theme

The resulting twig templates are pretty elegant and easy to understand. At least, to me they are, because I'm very familiar with them.

While I'm trying to make sure all parts are as self-explanatory as possible, I'm also aware that many people will prefer proper documentation.

The base theme will come with thorough documentation, explaining in depth how everything is structured, detailing the different pages and functionality, and how you can modify different aspects with different levels of expertise.

An example of the detail in which the theme will be documented, can be seen below. We're including state-of-the-art ASCII wire frames of the included templates, to give a quick overview of the different layouts:

Improvements in Bolt itself

While working on this, we've bumped into things that could be confusing for newcomers, that simply couldn't be solved in the templates, at that time. To alleviate this, we've made a bunch of changes to the Bolt code, to help with this, like:

  • The "Blocks" resources ContentType is now baked in. Need an 'about' blurb, or a short snippet for a footer? Just use a block!
  • We've expanded the Widgets capabilities, so extensions can easily add functionality to the front-end. But more about this in a later posting.
  • Bolt allows flexible ContentTypes, but that also means you'd need a simple way to iterate over an unspecified number of different fields, outputting all of them. The new {{ fields() }} tag is really helpful for this.

These changes lead to a vastly improved experience when diving in to the templates for the first time. For example, this is the new record.twig template:

{% extends 'partials/_master.twig' %}
{% block main %}
        

{{ record.title }}

{{ fields() }} {% include 'partials/_recordfooter.twig' with { 'record': record } %} {% endblock main %}

Now, compare this with the 'base-2014' version: theme/base-2014/record.twig. The functionality of these is the same, but you'll agree that the new one is quite a bit more elegant.

But I want it now!

Bolt 3's first beta release is almost here, and will have a first draft of this new base theme. We will use the beta release to gather feedback from our community of users, in order to make improvements.

Our end goal is that it will be even easier for people to get their hands dirty. Either to tweak the look and feel of the default theme, or to gather enough knowledge to build their own themes from scratch.

comments powered by Disqus