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.
Design
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.
Development
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.
Sass
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.
JavaScript
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.
Deployment
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).
Project Links
Github repoFeatured Resources
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
Jameel has worked with us on many of our graphics needs. You will find no one better than Jameel as he makes sure that every (I) is dotted and every (T) is crossed before he will release any of his work for publication. He is the best of the best. C. J. Brown III President PeoplePower, LLC
Jameel was a student in my program that I had the pleasure of teaching in several graphic design courses. He is a very talent graphic artist and has a great work ethic. He is also very versatile when it comes exploring new tools to assist him in his creations. Jameel is friendly and easy to communicate with and a true professional.
I had the pleasure of teaching Jameel several advanced web classes. He is an excellent problem solver, detail oriented and life long learner. A specific strength Jameel possess is his ability to find and implement answers on his own. I highly recommend him as graphic and/or web designer, as well as an essential team player.
I worked with Jameel at the AHA-Health Research and Educational Trust for over a year. Jameel is an exceptional team member and played a key role in supporting our project. His expertise as Web Support Specialist provided us with the key essentials to meet our deliverables. He is very attentive to detail and always willing to answer any questions. He will be a great asset to any organization!
Jameel worked on my team at the Health Research and Educational Trust leading our web design and additionally supporting us in number of other technology platforms. Jameel is self-directed individual who has a unique ability to approach each challenge with a positive attitude and a willingness to learn. In addition, Jameel was a reliable and trusted team member whose contributions will be missed!
Jameel is awesome to work with, he is very supportive and a great team member. I was lucky to work and collaborate with him on creating, designing and editing multiple project’s SharePoint sites
