/ bootstrap

Strips 0.3

This website is now using Strips 0.3, which has focused mostly, but not entirely, on images.

One thing that has become increasingly apparent in the last week has been the importance of dogfooding while developing. A number of issues came up in the theme design while I was posting as a normal user throughout the week. I make a note of each issue as I encounter it.

Having these lists when I sit down to work on the theme is invaluable, as the listed items help me sort priorities for versions and eliminate the nagging feeling that I may be forgetting something, freeing up my mind to ponder more interesting things.

There is the urge to try and fix everything in one go, but I find it’s better to prioritize and focus. The next couple of updates will each primarily address specific areas of the site. As I mentioned before, this update is mostly about images.

I prioritized images over other things because I want this theme to focus on showcasing writing and photos. Therefore, text handling and image display will be key, and all decisions in the theme design should serve these purposes.

Some issues related to these two primary elements are not about fixing problems so much as they are design decisions. As such, I want to implement ideas early on and have time to revise and refine as necessary.

Below are a few of the changes that have been made in Strips 0.3.


Images

In-post images are responsive

When I say “in-post images” I mean images in blog posts that are not the featured image. The featured image, which for me personally is the one I use the most, was already responsive.

I thought that the in-post images were responsive as well, but when I tried using a full sized image in a post, it was displaying at full size and busting out of the page on smaller devices.

I tried a number of things to make full sized images responsive, but it turned out to be that adding a new selector to my CSS was all that was required:

img, .entry img {
    display: block;
    height: auto;
    max-width: 100%;    
}

Also worth adding to that CSS are .comment-content img, .widget img, and .wp-caption.

In-post image styling

In-post images now have frames with drop shadows. I did this because I found that images with white backgrounds were blending into the theme’s background and it was confusing. I will be considering what these frames should look like in future versions, but I think they are currently a reasonable blend of form and function.

Centered featured images

Featured images are now centered programatically. Landscape images already looked like they were centered in this theme, which is why I didn’t notice the issue for a while. Now featured images with a portrait orientation also appear centered.

Dates are clickable

Dates appear in the same area as categories in Strips. But until now, while the categories were clickable, the dates were not.

Clicking on a category takes the reader to an archive of all posts in that category. Since the date is styled the same way, it should function similarly.

I chose to have the date link to an archive of posts for that month. For this site, showing the month archive after clicking a post’s date makes sense as I post once a day at most; a day-level archive would only show one post.

Improved styling for text elements

pre and code

I’ve mentioned before that Strips currently uses Bootstrap, primarily because Bootstrap makes the whole theme responsive.

But since Bootstrap CSS covers a great deal more than just a grid, it ends up serving as fallback styling for elements that I haven’t written custom CSS for.

I didn’t have any major objections to Bootstrap’s styling of pre and code, but I did want to polish it up for the look of this theme. Since I know that I’ll be posting some code from time to time, I wanted to go ahead and make it look a little more presentable.

blockquote and cite

For some reason, Bootstrap makes blockquote text really large. I noticed this when I quoted Mark Twain the other day.

The text size is now un-swollen, and the positioning of such quotations is now a little more refined.

Hyphenation and word-wrap for post titles

Word-wrap was added mostly to address abnormally long words in a title. I understand that word-wrap has been dropped from CSS but browsers still support it; I’ll continue to use it until a better option presents itself.

Hyphenation just hopped on board for the ride. I need time with this to decide if it’s a good decision. Hyphenation may end up booted from the train before we get to the station.

At any rate, if you use Chrome, you won’t see hyphenation since Chrome doesn’t support it in CSS. I’m not currently inclined to use Javascript for hyphens, although I’m aware the option exists.


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

![Strips 0.3 on a laptop - Ash Ryan Beats](https://blog.ashryan.io/content/images/2014/03/On-a-laptop-300x218.png)On a laptop
![Strips 0.3 on an iPhone - Ash Ryan Beats](https://blog.ashryan.io/content/images/2014/03/On-an-iPhone-200x300.png)On an iPhone
Also, just to show the full-sized image:
![Strips 0.3 on a laptop - Ash Ryan Beats](https://blog.ashryan.io/content/images/2014/03/On-a-laptop.png)On a laptop (full-size): if this image isn’t busting out of the page, the magic is working
Strips 0.3
Share this