WordPress Portfolio
On this page I’ll discuss the Modular Design Principles that went into the development of this portfolio website.
Summary of the brief
When designing content, you need the flexibility to give users only what they need at any given moment. If your updates turn into space-filling exercises because your code is rigid and badly-structured, the user experience will suffer.
Using modular design principles, my goal in creating this portfolio website was to move away from code which is dependent on other bits of code — for example CSS which is too dependent on the structure of the HTML, or CMS architecture which is too dependent upon a set of rigid page templates — and towards a more flexible, modular approach throughout.
- WordPress CMS
- Gutenberg Development
- React / JSX
- Custom Theme Development
- Modular HTML & SASS
- Vanilla JavaScript
- Graphic Design
Design
Planning is essential when designing a website with a modular approach, so I started by making a list of the modules which might be useful on a portfolio website, such as Hero elements, Introductions, Page Listings, Tabs, Carousels, and so on. I did a content audit on the content I already had, and decided how much of it would be re-used and what would need to be written from scratch. With a list of the modules and the contents in front of me, I was then able to work out how to present the content in the best way possible, and sketched out the wireframes for the layouts.
Development
I wanted to use the WordPress CMS to allow editors to insert or remove any module whenever they wanted, based on user needs. In this regard, the old approach of using the WordPress template hierarchy to create a set of rigid templates, which are then rolled out across the site, was insufficient.
With this in mind, I created a set of Gutenberg Blocks using React, JavaScript, & JSX which can be selected from their own section in the Gutenberg Editor. This current page, for example, is composed of DFC Hero Standard, DFC Gallery, DFC Introduction, DFC Standard Content, and DFC Results blocks. If one of these blocks no longer served a user need, they could be removed immediately and replaced. With a templated approach this would not have been possible.
Modular Code
My goal was to create a modular codebase which could be refined over time and then used in future projects. I looked at various SASS structures and eventually went with the 7-1 Pattern, which splits your SCSS partials into 7 different folders with variables, mixins, base styles, layout styles, and component styles all neatly organised. The great thing about creating a hierarchy of styles is that once you’ve created the core styles and a solid grid system, you don’t have to create them again for the next site, you can just concentrate on creating new modules.
BEM class-naming principles were used for the individual components so that they can be reused without being dependent upon the HTML around them — and Atomic Design principles were used to define the relationships between the various types of components, so that groups of smaller components (atoms, molecules) are grouped together into larger components (organisms), which ultimately constitute the DFC Blocks which are added by the user in the Gutenberg Editor.
Results
A modular codebase is a series of code streams — HTML, SASS, CMS — which run parallel and complement each other, but are flexible enough that you can iterate and maintain your website without having to worry about development times or having things break. The codebase can be refactored and improved with each new project, whilst maintaining a clear separation of concerns between its component parts.