Page 3 of 53

Micro Trend: Non-Rectangular Headers

I love techniques that allow designers and developers to “break” the boxed in nature of web design in a general sense. As a micro trend, non-rectangular headers have become one of my favorite techniques to accomplish this ask.

So, how do I do this?

Per CSS-Tricks, there are several methods available to accomplish this particular task:

  1. Background images, which appears to be one of the weaker methods
  2. Inline svgs, which can be modified pretty well, and reduce the load on the browser
  3. border-radius, which allows for the more convex circular look
  4. clip-path, which appears to have browser compatibility issues
  5. And my favorite, transform: skew
Stripe Home Page
The Stripe home page using transform: skew.

As mentioned above, my preference in this case is transform: skew, although it introduces extraneous elements to the page–a seemingly forgotten rule is to not do so for presentational purposes–but this can certainly be accomplished with pseudo elements.

The article referenced above uses an extra element in the document to create the effect–which is perfectly reasonable–as does the stripe website.

Stripe’s homepage design uses this method, and even more brilliantly, they include a few children spans (each is a block of color) that get skewed with the parent element, creating a more complex and colorful effect.

I don’t entirely know that I like the extra elements, but I come from a slightly different era of development that saw this technique of creating decoration-only elements as heresy, while still using it regularly.

Anyway, I enjoy looking at the sorts of things that front end devs do to accomplish what UX/UI designers come up with.

Using a Git Workflow on This Site

I’ve been toying with a total and complete rework of this site for a little while, but to be honest I’m not sure what platform to pursue. Do I chose a new CMS? Do I go with Jekyll or some other static file variant? It’s difficult to decide–I know I’d like to learn a completely foreign and new skill set. For the time being, however, WordPress is my home. Fam.

My hope for this workflow–and it appears to bear out–is that I can rapidly design, develop, and deploy my updates and changes. I have been using Grunt for task automation for a while now–and that required a bit of command line knowledge–but I wasn’t initially using a git workflow. I mean, it’s just me, right? Well, I found that not using a git workflow made deployment much more difficult. What do I upload? What did I change? How do I undo this change?

Code Contrololol

I’ve really just begun to do personally what I do professionally–it just makes sense to introduce efficiencies into my personal workflow when I’m so used to working this way–and I’m not really sure why it took so long.

I’ve setup a Bitbucket repo and maintain a feature branch workflow while doing development work locally with a MAMP install. I’m not currently tracking my entire WP install, only my theme, but I do my best to keep the environments similar to one another. I completely skip a staging environment for this site–I feel like it’s overkill–so it’s not a duplication of what I might do in a more important (client) setting.

I don’t really have the money for a commit-to-deploy sort of environment, so I deploy using GitFTP-Deploy to deploy changes from my ‘master’ branch.

I am still using Node/Grunt for task automation…in spite of how quickly devs seem to have moved beyond it, but whatever.


  • This is a bit experimental on my personal work, but something I use in my day-to-day client work
  • Typically we’ll track the entire site, WP install, plugins, etc.
  • I am introducing this process into my freelance work as well…git repo and all
  • For now I’m working on a minor redesign/refresh and I’ll be doing that in real time

Exciting times.