The Building Blocks

One of the main goals of creating this new theme is to synthesize from best practices and standards and such. The big pieces were structured data, HTML5, CSS3, and responsive web design. While searching around for HTML5 stuff, I hit upon HTML5 Boilerplate which seemed to me to be an excellent starting place.

Structured data markup had changed since last I had a close look with much fewer official schemas, Microdata and RDFa were the big players and JSON wasn't much of a concern. This time around for better readability, easier maintenance, and less repetition I'm going to use RDFa Lite.

Responsive web design had also changed much since the last time I studied the issue with many developments in the area of responsive imagery and actually usable/implemented in browsers viewport support.

The Jekyll Scaffold

Obviously, if you're going to write a theme, especially one you hope to share with the community, you should probably start with the files that Jekyll recommends. In fact, the command, jekyll new-theme creates a "scaffold" of files for you to fill in and modify.

It all seems straightforward, but where do you go from here? What do you do with these files? More to the point, what are you laying out and styling? Because, if the gemmed theme directory is to only have the files involved in the theme, then there is no content, right???

What I ended up doing (and subsequently realized there's a much better way) is to just put all my files: theme, test/example content, documentation, etc in the one working directory and then try to carefully extract/copy the relevant files when I wanted to turn it into a gem. What I should have done is kept my nascent theme in its own directory, but in my content development directory, added

      gem "my-new-theme", :path => "path/to/my/new/theme"

Some Assembly Required

Generating properly marked up schemas was just a question of implementing the logic in the layouts and guiding the capture of the needed data, especially where it just wasn't a natural outgrowth of the subject matter. Hand generated and verified files (that were often created from examples that were only in Microdata or JSON) served as template files that were then used as guides in the creation of forms.

The responsive part, I am still trying to wrap my brain around. Getting a straightforward answer to the idea of "What are the best practices/sizes for breakpoints?" has turned up everything from "Every 10 pixels!!" to "Y'know, it just depends...". So that really puts a crimp in the proceeding forward with confidence (also, the sheer data management issue of adding all those extra copies of pictures to your file system). Plus, being old school, the whole "design for mobile first" really sticks in my craw (so old, I have a craw (｀Θ´)). Having said that, I do realize the necessity, and will get around to it, even if I'm not about to AMP my sites anytime soon.