/ coding

Strips 0.2

At the beginning of the month I completely rebooted this website, and started using Strips, a WordPress theme that I am building from scratch.

Today, I upgraded Strips to version 0.2. Most of the changes were to the backend, getting my house in order. I was able to get rid of excess HTML, CSS, and PHP without reducing any functionality, and it felt good. This must be a feeling anyone who has ever built anything in code can relate with.

Apart from cleaning the backend up, there are changes in Strips 0.2 which are visible to the naked eye. I’ll write about them below.

First of all, the footer is now visually distinct from the rest of the theme. Not a difficult thing to do, but I’m not sure whether I’ll keep it this way yet. Dark, quasi-color-inverted footers are abundant on the internet these days, and I find them visually pleasing. But I want to make sure I’ve styled the footer this way because Strips demands it, and not simply because it’s how things are done.

At any rate, the footer will be seeing more work in a future version of Strips, and I’ll have a chance to evaluate my decision on color then.

Catpills and snakes

One of the bigger decisions this time was to undo something that I went through great pains to do in version 0.1.

I have a CSS class called “catpills” which puts the name of each post category in a “pill”, it’s own little gray, slightly-rounded rectangle.

In Strips version 0.1, the catpills came just after the post titles, on the same line. Making sure such an in-line display worked correctly on any screen size was a new challenge for me; it was fun (and sometimes frustrating) to work on. I liked the way in-line catpills looked on a computer when the title was short and there weren’t many categories.

But in practice, the title is rarely that short, and on iPhone it is never that short. As a result, through the magic of responsive web design, the title would wrap around to new lines when it was long, and then the catpills would snake right behind it.

Here is an example of what I’m talking about:

![Strips 0.1 screenshot - iPhone - Ash Ryan](https://blog.ashryan.io/content/images/2014/03/IMG_0679-200x300.png)On an iPhone
This doesn’t look good at all.

Another thing about displaying catpills this way that should have been considered from the start: apart from the debatable aesthetics, is there a reason this information, the post categories, needs to come immediately after the title?

The answer to that question, for me, is “No”. When I’m considering whether or not to read something on a website, the title and the first few lines are the information on which I’ll base my decision.

I do still think that categories are useful information for the reader when they are well-considered and consistently used by the author. So instead of removing them, I have moved them, as shown here:

[![Strips 0.2 catpills - Ash Ryan Beats](https://blog.ashryan.io/content/images/2014/03/Strips-0.2-catpills-290x300.png)](https://blog.ashryan.io/content/images/2014/03/Strips-0.2-catpills.png)You can probably spot another issue that I need to tackle in a future version.
### In-post image alignment

This one seems likes a no-brainer, but it actually took some braining. Images that are shown in the body of the post now align as expected in the post.

The featured images were already fine, but the post body images were ignoring directions. They are now good citizens. For examples, just have a look at the screenshots in this post, which are centered.

I may write the details on how this issue was fixed in another post.


For posterity, here are some screenshots of what the site looks like today:

![Strips 0.2 - Ash Ryan Beats](https://blog.ashryan.io/content/images/2014/03/Strips-0.2-300x232.png)On a laptop
![Strips 0.2 iPhone - Ash Ryan Beats](https://blog.ashryan.io/content/images/2014/03/Strips-0.2-iPhone-200x300.png)On an iPhone