Satyadarshin

It's all about me

Abide WordPress Theme

Front-page of www.tessabide.com
Front-page of www.tessabide.com

Theatremaker Tessa Bide asked me to look at making her WordPress website’s Theme fully responsive. Rather than put myself through the torture of bending someone else’s code to my will, I decided to rebuild the Theme from scratch, partly as an opportunity to apply the now very well supported CSS Grid standard. Previous to this I’d been using the Zurb Foundation front-end framework, but that felt like it had served it’s purpose: it had enabled me to acquire a solid grasp for responsive layout, building a reliable layout skeleton quickly, whilst not having to wrestle with cross-browser support. But there gets to a point where that’s somewhat limiting on the longer-term learning game, and I felt it was time to tackle issues like responsive navigation for myself.

In actual fact very lttle of the layout is presented in Grid: the two column article structure is basically it. I could have stuck to Flexbox to be truthful, and avoided the necessity of adding fallbacks for older browsers. But where’s the fun in that!?

The aesthetic has stayed pretty much the same as the previous Theme and I have adapted it for responsiveness, and extended the principle into some finer-grain typography. There was a modest amount of editorial training to help Tessa get the best our of her layout, by understanding how to apply styles to headings and lists.

About this project
Website www.tesssabide.com
Client Tessa Bide
Published December 2019
Status Active
Project lead Satyadarshin Perry
Design
Graphic elements Tessa Bide
Photography Images from multiple photographers (supplied by the client)
Programming Satyadarshin Perry

Project Highlight

Tessa Bide Productions are a Bristol-based company. They create engaging and stimulating theatrical experience for both adults and children.

Skillset

This project demonstrates the application of CSS HTML5, SASS, and CSS grid. Follow the links to see more projects using these skills.