Home » About My Theme

About My Theme

With my personal theme I wanted to break out of the ‘boxy grid look’ to help some personality shine through. This site features modern CSS like CSS grid, flexbox, clip paths and CSS shapes, along with graceful degradation. It’s completely designed by myself with the help of design inspiration from around the web to help show the neat tricks I can do.


Before I designed this site I drew inspiration from a number of resources from around the web. The problem with my last site was that it was too ‘boxy looking’ for me. I designed my old site years ago when some of the cool features of CSS wasn’t available. So I made it a point a make a site with diagonal lines and shapes that bring it to life. I kept my logo and color theme the same so I didn’t have to start from scratch.

After a couple weeks of designing and laying out all of my theme pages. I created the mockup for my entire theme in Adobe Illustrator.


Now for the fun part….development! Being a developer, we try to never repeat ourselves when coding. So in the past I created a couple of theme blueprint to speed up my workflow when working on projects. This blueprint includes Sass, webpack and the power of Gulp. This blueprint is setup so that after I install my packages all I have to do is type ‘gulp watch’ in my command line and my new site will pop up showing my Sass and modular JS working.


For this project I used Sass and the 7-1 Sass architecture. I did modify this a bit to fit WordPress. The true value of using both of these together is how it helps you keep your CSS SUPER organized.

Modern CSS

When viewing my site you’ll notice that I used flexbox and grid. But that is just the tip of the iceberg. For the navigation I used a checkbox form to toggle my full screen navigation without any JS. I actually only use JS when it is absolutely necessary.

For this project also used the clip paths, CSS shapes and other cool layout techniques that help break up the monotony of the ‘boxy’ layout.


Earlier I mentioned using Webpack for this project. Webpack enables us to have modular JS, kinda like how Sass allows us for CSS. Modular Javascripts helps me avoid Javascript spaghetti where it is super hard to maintain large files.


After my custom WordPress theme was all developed locally, I used git to push my project to my secure GitHub repository. I then used DeployHQ to send my GitHub repo up to my live WordPress multisite (Before moving over to a multisite I used a staging site and when live from there).