Backdrop Intro: Theming, Part 1

Backdrop Theming

In my last post in this series, I went over setting up Backdrop on Pantheon and in a local environment. After I setup a Drupal site, or now Backdrop site, I usually head straight into the theme section. I've never actually left a site in Bartik that I can remember so I always begin the process of creating a sub-theme. 

Zurb Foundation

I usually am a Bootstrap man for front-end frameworks, but I wanted to try something different this time. So, I decided to try using Zurb's Foundation framework. I had always heard great things about Zurb's Foundation framework, but I never got into the differences between it and Bootstrap. I'll be pulling in Foundation at some point here...

Creating A Theme

I did see that a Foundation theme for Backdrop had been started, but to really get a sense of Backdrop, I decided to create my very own theme! 

The Backdrop API docs do a good job of telling you how to start. Essentially, it's the same way you start a Drupal 7 (D7) theme with a .info file, but you have to change around a few things and rename them to be Backdrop-related. Here's what my "finss_web.info" file looks like...

name = Finn's Web
description = My bitchin' theme
package = Core
type = theme
version = BACKDROP_VERSION
backdrop = 1.x

stylesheets[all][] = css/style.css

; stylesheets[print][] = css/print.css
; settings[color] = true

So, you'll notice the change to version and the added "backdrop" key, but the other main difference is that you don't declare your regions in this file since you do that in the layouts section. 

I did leave in a few reminders of how to do other things...like that I should have a print.css file and that you pass default settings with the "settings[some_setting] = default_value" key/value pairs. I'll clean this up later to reflect what my theme actually has in it. 

Template Files

It took me a little while to find the "page.tpl.php" file, but if you are an astute observer of the API docs, you'll probably find this page which tells you where to look. It happens to be in "core/modules/system/templates".

As I usually have done my whole life, copy, copy, coffee, copy, and begin...It's always recommended to copy code and then modify it to figure out how something works. So, I copied Bartik's node.tpl.php and the system page.tplp.php file into my theme directory. I then added a test message to see if my template files was working after enabled. 

Initial Theme Picture

I don't know why I always pick "doody" as my "hello world", but it worked! Now that I know the template files are rendering correctly and being overridden, I can begin to investigate the layouts part of Backdrop. 

Layouts

I'm typing this section very...slowly...because I am so shocked at how intuitive and easy this layouts system is. Sweeet y'all!

I had never really used Panels that much, because the front-end people I worked with liked doing it their way and no client project ever really needed highly configurable layouts. Now, I'm wishing that maybe I had...

My first action actually was to try and add some regions to my theme, but I decided to investigate the structure tab of the admin menu first. Low and behold, the layouts provided by Backdrop core seem to cover a lot of my layout needs so I used the most complex one for a homepage. 

All I had to do to test this out was to create a new layout I called "Frontpage" with the "3/3/4" column layout. I set it to display on the "front" path...I did try "<front>" for front page, but I'm actually glad that didn't work, lol. I could have even added a condition for the frontpage, but I decided just to change the front page path to "/front" in the site configuration settings. 

Then I made a custom block by going to "/admin/structure/block/add", and I added some text. Finally, I went back to my layout and added the custom block I made. I could even add that block two times on the same page! Whoa buddy, calm down now Alex...So, now my homepage looks like this...

Clean and Empty Theme

A little stark, but as you can see, we're getting the two custom blocks and a center listing of content. Seeing as how that took me a few minutes without installing any modules, once again I have to say I'm impressed.

I can totally see myself switching layouts and themes in the same room as clients to quickly get feedback in a way that was hard to do with D7. You would have to install Panels and other contrib modules and because of the blocks issue, changing the theme would remove the blocks from regions. 

Let's test this out by switching back to Bartik...

Switched Themes and Blocks Are in the Same Place

Boom! All my blocks are still in the same region without me making any changes whatsoever. Not being a front-end person, I can't geek out too much more over this stuff, but I like it. 

Next Steps

In part two of my theming series on Backdrop, I'll go more into prettifying my theme, but I'm really happy to see that as a back-end dev, I can immediately place content into regions without caring too much how the theme will affect the blocks I make. I at least know they will be in certain areas and can hand over that to a front-end person more easily, in my opinion.