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.
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.
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]
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]
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]
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.