Redesigning This Blog Based on Components

Around the end of June, I decided it was time to redesign my blog. On a flight back from Disney in Orlando, Florida, I opened up Sketch and began crafting a new design.

This is what I came up with:

I’ve always built my WordPress theme from scratch. I like having as little code as possible, speed, and hand-crafting custom CSS. I’m not against frameworks, I just choose not to use one for my own site. More on that in a future post.

Then I let the design sit for a week. Great.

I was also stuck on what I wanted the mobile layout’s navigation to look like. I still have work to do on that. That’s fine. Ship it. Iterate. Repeat.

Evolving the Approach

In the past, I would have taken my own mockup, put it in Zeplin, and then start coding out the CSS from the top down. However, this time, I decided to try something different: I would look at the code as components. With this task, I was not only creating the HTML/CSS but also cleaning up the PHP & HTML that makes up the current theme.

The site would consist of: the main template structure, a blog template, the main navigation, a blog topic navigation, the search bar, a social media cluster, and the blog post content area.

To build momentum, I started out with the smaller components. Doing that ends up being a quick win, which gives you a boost of creative energy. Then repeat and knock out another; repeat it again.

Social Media Block

This is one of my favorites. It went through two iterations. The technique for building the shadow for the div ended up being exactly what I wanted. Worked out so well.

FontAwesome was used for the icons. Just the other day, they released 30 more icons for the set. I then updated this component with the new social icons that were included: Snapchat, new Instagram logo, etc.

[codepen_embed height=”263″ theme_id=”light” slug_hash=”PzpVyZ” default_tab=”css,result” user=”bacon”]See the Pen Social Block by Gary Bacon (@bacon) on CodePen.[/codepen_embed]

Main Navigation

Pretty straight forward. Before the blog categories were nestled under this menu. Now they are separate. That works better for me. Future ideas for this: animation on click and reveal Snapcode on hover of my picture. However, to get it out quickly, this was enough.

[codepen_embed height=”265″ theme_id=”light” slug_hash=”oLZREm” default_tab=”css,result” user=”bacon”]See the Pen Main Nav by Gary Bacon (@bacon) on CodePen.[/codepen_embed]

Blog Post Layout

This was the basic layout for a post. Just enough elements. Then once I transfered the code to my theme itself, I added in a few more elements that were necessary.

[codepen_embed height=”265″ theme_id=”light” slug_hash=”akWzEp” default_tab=”html,result” user=”bacon”]See the Pen Blog Post by Gary Bacon (@bacon) on CodePen.[/codepen_embed]

Rapid Iteration

Since I set up these components in CodePen, I had the freedom to experiment with different ideas rapidly without affecting the overall front-end code of the blog.

Even after launch, if an idea hits me, this gives me a great way to try it out, see if it works. If it does work, then integrate it into my theme code.