HTML themes to Backdrop themes

I've been meaning to write up a blog post about how to go from a HTML template (purchased from a place like https://themeforest.net) to a Backdrop theme. As a developer with only a smidge of design skill, I have found this to be a workable alternative to hiring a designer for custom work.

Below you'll find a very a rough outline of the steps I follow:

1. Purchase a HTML template from themeforest. (I usually look for one that uses Bootstrap 3 or 4)
2. Download, and explore the theme thoroughly. There are usually lots of options!
   • Select which pages/templates to use on which pages/sections of your Backdrop site.
   • Adjust as necessary, creating a copy of the template files to more closely match your site's content.
     • Sometimes I add or remove columns to rows, move sections around on the page, and remove elements I know I won't be using.
     • Adjusting the HTML template is easier than re-arranging in the Backdrop theme, and it will give you a good idea of what works and what doesn't.
3. Create a new Backdrop theme.
   • Start with a blank theme (only a .info file)
   • Add necessary CSS and JS assets via the info file
4. Create new Backdrop layouts for each unique layout from your HTML templates.
   • copy the code from the whatever.html file into your template's layout--name.tpl.php file
   • delete any example content, so all that's left are the regions
   • place PHP code to print Backdrop content into these regions (I copy this from a core layout)
5. Via the Backdrop Layouts UI, place blocks as content.
   • use the block UI to add necessary classes to blocks
   • use the Views UI to add necessary classes to views
6. Open your blank Backdrop site in one browser window and the HTML template in another (for comparison).
7. Check the markup on your Backdrop site.
   • Does it match the markup in the HTML template? (Not usually)
8. Where necessary, override templates and/or theme functions to exactly match the markup provided
   • I do this most often for field level templates, things like field--field-type-image.tpl.php
   • The breadcrumb is a theme function that is often overriden
9. If necessary, use preprocess functions to add or remove classes, or markup.
   • I do this most commonly for nodes. Usually the full display mode needs special attention, and sometimes the teaser display mode also.
10. As the markup starts to fall in line with the HTML template, the design will "snap" into place.
11. If I'm feeling overly ambitious, I might try to only include the CSS code for the components of the theme I'm actually using -- especially if the theme is HUGE and my needs are, well, not.

Here are a few sites I've built this way: