1.0Overviewso, basically...

Dynamite Graphic approached me about building their new custom site. I handled every step in the process, including full design and development. My design utilized a consistent “racing stripe” animation motif, and I used the very recently released Gutenberg editor to make editing content easy.

Services

Details

  • Managed full project: strategy, design, and development.
  • Build using WordPress’s new Gutenberg content editor.
  • Created unique “racing stripes” design motif.

2.0Special Highlightslet me draw your attention to...

Gutenberg symbol

2.1New Gutenberg Editor

For years, WordPress has relied on the same content editor—just one, very limited field allowing for one long blob of content with little to no formatting options. Many years ago that was completely sufficient for the blog post format WordPress was originally designed to support best, but is now inadequate in supporting the demands of modern, complex page layouts. Many page builder plugins have sprung up to fill the void, but are generally bloated, sluggish and hard to use, in my professional opinion. So, I’ve generally relied upon custom fields, a method that allows for unlimited layout possibilities while avoiding the pitfalls of page builders.

During the design phase of Dynamite Graphic, however, WordPress released its all-new editor, dubbed Gutenberg. It provides a good alternative to page builders for simpler, smaller sites like Dynamite Graphic, so I decided to make this my first site on the new platform. With little documentation available after Gutenberg’s initial release, development was a challenge, but this project provided me with a wealth of knowledge on WordPress’s new “block” approach to editing, which will make its way into many other features of the platform.

3.0Technicalfor the geeks

3.1Bar Tabs 🍻

To keep it consistent with the “racing stripe” animations throughout the site, I built my own slider so I could feature matching slide transition and controls. It essentially uses a bunch of tiled background gradients so I only needed to use pseudo elements rather than a bunch of non-semantic span elements or something to generate the multiple white bars.

Slider animation preview