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.
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.
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).
Blog posts authored by Jameel with easy-to-navigate table of content
Starters Guide to Git & GitHub in Web Development
The Definitive Guide to 508 and ADA Website Compliance
3 Easy Steps to Add a Dynamic Logo to Your WordPress Theme
Here's a couple of recommendations from Linkedn