Behind the curtain

Last time I built my site, I used Zurb foundation as a basis to style and structure the pages. While this helped me set things up in the beginning, I realised that my limited knowledge and understanding of CSS restricted me as I progressed further.

What slowed me down more was having to manually change CSS declarations in an external stylesheet and then reload the page to see if the changes didn't break anything. I felt as if too many frictions were set in to place to prevent one from accomplishing their goals.

A year ago, a client requested a proof of concept for a mortgage application accelerator that would showcase how AI / LLM's could be utilised to speed up development of the application process.

Upfront, I realised that there would be countless change requests to the layout and structure of each page. And sending every iteration of a Figma redesign over the fence to the developers would slow them down and make me the bottleneck.

In addition, I wanted to stay as close to the development side as possible, and I knew that the screens had to be coded, not designed in a static canvas.

TailwindCSS had caught my attention through blog posts and YouTube videos, as it framed itself as an utlity-first CSS framework.

Meaning it enables you to use utility classes to style elements directly in HTML rather than creating custom CSS classes in external stylesheets. As it presented itself to be versatile and flexible, I knew I wanted to try it out for this project instead of drawing static pixels boxes in Figma.

Following some trial and error, TailwindCSS was the right choice. It enabled developers to make changes more quickly without having to rely on static screens from me.

As I started to redesign my website, I applied the knowledge I had learned from that project. I quickly realised that what I knew about Flexbox and CSS Grid wasn't enough and that I needed more training to grasp the intricacies of CSS layout flow.

Next on the list was picking a CMS which was easy because prior I had used KirbyCMS.
Kirby is easy to set up, fast, flexible, headless, and file based (no database).

A blueprint YAML file saves content that you write up in the backend panel to a text file.
The content text file is also interlinked to a PHP template file that styles the content on the page.

The newest addition to Kirby were Blocks, making your content structure modular instead of a rigid linear content representation. Modifying the PHP templates to accommodate Kirby Blocks was easy and straightforward.

Making the parts connect to each other was another worthy challenge.

TailwindCSS
You need to get comfy with Node, NPM packages, terminal, and cli commands if you want TailwindCSS to function properly with your HTML.

TailwindCSS needs to read all your files (CSS, HTML, Javascript, PHP, ...) using tailwind class names, so that it can generate the corresponding styles, and save them to a static CSS file.

And this is just one thing that I knew I always screw up with. So this time I set out to look for a program that would do the grunt work for me.

PrePros and MAMP PRO
Enter Prepros, an app that compiles your files, makes it easy to search, install and keep NPM packages up to date, logs errors, and even upload files to your server.

Prepros does come with a built-in HTTP and HTTPS server; but if your site uses dynamic content eg. PHP you will need to hook it up to an external server (XAMPP, MAMP,...).

For that I used the MAMP PRO which has been my go-to app for setting up server environments locally, also a huge plus, Mailhog is included in MAMP Pro.

Time to start building with Git, VS Code, and PolyPane
Before i initiate any project, i set up git locally with GitHub Desktop and create a repository where my folders and files reside. Yes, CMD (⌘) + Z might help but if you need to go a couple versions of your code back, a versioning system will reduce the amount of grey hairs.

VS Code is my go-to-editor for writing PHP, YAML, HTML, Javascript, and CSS. Mostly because of the vast amount of plugins that are available to help you do your work efficiently. Tailwind CSS IntelliSense and Tailwind Sorter being the most used for this project.

And finally to squash out layout bugs i might have written in my CSS, HTML files I use Polypane

In the end I am super happy on how the site has turned out, it feels refreshing to have a robust and flexible setup.