← Back to postsD8 Free Themes: A Bumpy Ride?

D8 Free Themes: A Bumpy Ride?

Published: 12/23/2017

Playing with free themes hasn't been an entirely smooth process. But let's step back for a moment and talk about my theming workflow.

A few years ago, implementing a new Drupal theme might have gone like this:

  1. Create a design mockup in Photoshop (or work with a Marketing/Graphics team to do so).
  2. Find a blank-canvas theme, like Omega or OOTB Bootstrap, and create a sub-theme.
  3. Write 200,000 lines of custom CSS to create something that resembles the mockup from step 1.
  4. Add any custom templates and tweak existing templates.

Nowadays, my process is much shorter:

  1. Find existing theme that looks more-or-less like what I want and has a nice selection of layout regions.
  2. Add any custom templates and tweak existing templates.
I like to experiment with free themes... when I find a free theme that I really like, I know that the premium version will be even better.

I like to experiment with free themes or free versions, because when I find a free theme that I really like, I know that the premium version, or a similar premium theme from the same vendor/developer, will be even better.

Also, if I'm building a site that will be managed by someone else, I prefer to give the client as much power as they can handle, so I like a theme with a generous amount of Appearance settings in the UI. (Not everyone dreams in CSS. Or so I'm told...)

The above reasons are what led me to initially choose a free theme called Ice Magic (opens in new tab) by CMSbots.com and its parent theme, Mbase (from the Bootstrap family) for a new D8 website. The theme is described as highly-configurable - and I agree on that point - but it's also a quirky little booger.

It has an almost-overwhelming amount of Appearance settings (I know, I know... I just asked for a ton of Appearance settings) including a sampling of Homepage and Footer Contents that can be enabled/disabled. I LOVE sample content, but this content doesn't always play well with other content in the same regions. For example, enabling the sample content for the Footer region overwrote/hid other blocks I'd added to the Footer region. The Homepage Slider content worked out-of-the-box, but unless you opt for dark or dark-overlayed images, the navigation links do not have enough contrast.

One of the coolest features of Ice Magic/Mbase is the ability to convert any region to a Bootstrap component... or it would be a cool feature if it worked. Here's a blurb from the Mbase download page:
"Example: You can convert Sidebar left region to bootstrap modal region. Block titles of each block enabled for this region will appear as buttons and clicking them will open the block as bootstrap modal." Cool, right??

I tried both the Modal and Carousel plugins, and neither worked, no matter what region I converted. Despite having multiple blocks assigned to the regions I tested, the Modal plugin displayed nothing; the Carousel plugin displayed a blank Carousel with no content. Now, I didn't play with this for long, and it's possible there's a missing dependency, but unfortunately the documentation is... uh, well... there isn't any documentation that I could find, so I'll say it's a bit lacking.

Even more quirky is the administrative menu that floats over of the header and branding regions and partially disappears on any page other than Home. As a workaround, I displayed the admin menu as vertical instead of horizontal, but, for me, this workaround is only tolerable on a widescreen monitor. Otherwise, the admin menu blocks too much of my viewport. And it was this final issue that caused me to uninstall Ice Magic.

Another theme I tried was Creative Responsive (opens in new tab) from Zymphonies. The first oddity I found was that the Site Slogan defaulted to an unreadable color on top of the dark header background. Sure, I can fix this, but why should I have to? I read that some people had trouble with their Bootstrap Slider; however, it worked for me exactly as described. The theme has a nice amount of regions, but 'Demonstrate block regions' only shows the location of 9 of the 16.

When themes create specific appearance classes or layout classes for columns, etc., it's nice to know that they exist by way of code samples or sample content. I know this is typically a feature of premium themes, but it wouldn't hurt to have a few sample appearance classes or some sample content; this theme has neither. Overall, Creative Responsive is a decent theme and perhaps less buggy than Ice Magic. It just doesn't make me go "wow."

The third theme I experimented with is Bootstrap Mint (opens in new tab) by Binu Varghese. It shrunk my logo to about 40px wide, making it unreadable; although, it was the only one of the three themes that did an OK job displaying a site slogan. Initially, I couldn't get the sample slider block to work. After switching the default theme to something else, and then switching back to Mint, the slider began displaying and rotating my images (caching, perhaps?). The tiny logo was the result of a hard-coded 37px width on any image in the Branding region. After raising that number to 100px, my logo was again legible. One annoying thing I discovered is that removing the User menu from the Footer Menu region also removes the Social Media links. I really like all of the regions that are available in this theme - 25 of them! As of the writing of this post, Bootstrap Mint is what I'm using on this site.

I still believe that free themes are a great resource for builders of small or personal websites. Any many times, free themes will leave you pleasantly surprised. Other times, you'll get exactly what you paid for.