barrd DEV – Current Site

Services Provided

An in house production created to test out ideas and build a site the way I want to build a site. All images, whether thumbnails or full size are served as WebP, attention has been given to accessibility (a11y) which I’d love to hear about if anyone has any issues. The design is deliberately simple and understated with a large font size.

Project Details

The Content Management System (CMS) is WordPress, the theme was built using Underscores (_s) as a starting point but converted it into a CSS Grid then used every-layout’s stack for consistent vertical alignment. It uses the Gutenberg editor with custom blocks hand-rolled using Advanced Custom Fields (ACF).

The main body font is Inter (Variable) with the monospace being JetBrains Mono.

Fun Stuff and Challenges

From the outset I wanted this to be as easy to use as possible and accessible with a high Core Web Vitals score. I also wanted to keep the amount of JavaScript to a bare minimum. This meant being ‘creative’ when it came to asset enqueues.

The GLightbox library (used for modals) is a good example where I only wanted the assets available when necessary. I chose GLightbox as is written in Vanilla JavaScript and was ‘mostly’ a11y compliant. I added a few flourishes to get it all the way, including a function to return focus to the last element when closed.

It was also my first foray into a Dark Mode theme. I went down many rabbit holes finding my way of using SCSS, the CSS var() function and JavaScript to get it all working the way I wanted.