Project Overview
Summary
I designed and programmed custom styles and components for a WordPress child theme for the Center for Artistic Activism (C4AA).
Team & Timeline
3 months freelance commitment working in a remote team of 3 designers/developers
Responsabilities
Tools
- CSS
- JavaScript
- WordPress
- GitHub
Outcome
A new website with custom WordPress blocks that met C4AA’s branding guidelines
Problem and Context
C4AA is a New York-based arts non-profit that uses arts to bring social change. In 2019 their brand had outgrown their current websites, leading them to redesign their website.
What I did
Design
My role involved refining the design visual during programming. C44A had branding guidelines, but not all my assignments came with detailed specifications. For example, I received a rough mock-up on how to design the posts’ meta-data. To improve the idea, I chose to change the background color of the meta-data from red to black to give a more distinct separation between the hero image.
Front-End Development
My most significant contribution was creating custom, randomized polygon-shaped headings and buttons to match C4AA’s print materials.
To begin, I established the fundamental polygon and rotation styles on the buttons. More specifically, I:
- Gave all headings the polygon form using the CSS clip-path property
- Used CSS Custom Properties to set the values that would later be randomized, such as the clip-path corners, and the rotation
- Using custom properties to pull in the established brand colors
To randomize the polygon shape and the rotation, I created the functions addBlockClipPath() and addPlugInButtonClipPaths().
These functions receive a set of HTML elements and apply a randomized rotation value and randomized clip-path end-points.
The main drawback with my original functions was that they selected headings at an element level instead of selectively at a class level.
Next, I used the Gutenberg API to create custom blocks for content editors to add the polygon effect at a class level.
By researching the Gutenberg API, I learned how to create custom blocks for buttons and headings.
With the custom blocks available, polygon clip-path styles could be applied more selectively.
Content editors could select when they would apply the polygon style, and the clip-path functions worked at a class level.
If I could go back, I would have made the custom block more identifiable on the visual editor’s toolbox.
When an editor creates a new block, the thumbnail options for headings and buttons look the same, and the label indicates which one applies the clip-path effect.
On the upside, once someone uses the clip-path style, the visual editor shows a visible difference, as the image below suggests.
This difference allows the content editor to see where they have applied the polygon style on a draft without going into preview mode.
Learnings
This project introduced me to a remote development workflow and collaboration. I also learned to use semantic commits to provide concise and meaningful context around my pull requests.
Outcome
Because C4AA loved the headings and buttons, they requested me to apply similar styles to other elements in the site. The modularity of my code simplified this task. My commitment to C4AA ended before the site launch. However, their new site launched in November 2019 with the rotated polygon styles.