"Beekman Cold Brews"
Website Case Study

Overview

Description

This project involved the design and development of a five-page small business brochure website using the MODX CMS platform. The site was developed for “Beekman Cold Brews,” a fictitious indie coffee shop located on the Beekman Street Arts District in Saratoga Springs, New York.

Goals

Develop a fast-loading, high-performance small business website that reflects the creative atmosphere of the Beekman Street Arts District in Saratoga Springs. The front-end user interface incudes a presentation layer which contains UI components from the Foundation 6 CSS framework, as well as atomic custom utilities for spacing and padding. Alpine.js, a relatively new minimalistic JavaScript framework was mostly used for interactivity.

Use of Generative AI

Many generative AI tools were used to help assist with the creation of content throughout this project. All of the images were developed using Adobe Firefly, while a substantial portion of the text was generated with ChatGPT.

Project Scope

Desktop/Mobile Website, Branding

Key Features

Custom MODX theme built with reusable chunks and templates
Dynamic menu navigation using the Wayfinder snippet
Foundation 6 responsive grid system
Custom utility CSS layer inspired by Tailwind syntax
Alpine.js powered UI interactions
IntersectionObserver-based scroll animations
Optimized image loading with loading="lazy"

Role

Web Developer (Front-End Design/Programming)

AI generated image used in 'Beekman Cold Brews' website

(Lifelike images that were created using Adobe Firefly, an AI image generator, which appear on the media wall section of the "Beekman Cold Brews" website.)

Design Process

Logo/Typography

Typography used on 'Beekman Cold Brews' Website

Color Palette

#20202e

#cd594b

#23344f

#34bdb0

#1d7891

#1779ba

#fdb471

#fff7ec

During testing, the text-to-background color contrast ratios met AAA conformance levels, the highest rating under the Web Content Accessibility Guidelines 2.1 (WCAG 2.1) criteria which is often used to determine ADA compliance.

User Interface Design

Screenshots of 'Beekman Cold Brews' Website

(The home page layout of the "Beekman Cold Brews" website in both dark and light modes which displays based on the settings of the user's operating system.)

Image of 'Beekman Cold Brews' Live Events Page

Image of 'Beekman Cold Brews' About Us Page

Image of 'Beekman Cold Brews' Visit Us Page

(Reusable MODX chunks were used for the dynamic display of images and titles throughout the site in the top hero area.)

Challenge

In many popular web content management system (CMS) platforms, such as WordPress, the front-end architecture often must be planned around existing themes or visual site builders, such as Divi or Elementor. Even in projects which utilize custom themes and custom fields, front-end developers often must work around the constraints of the selected CMS platform.

The challenge for this project was to build a CMS-driven site that retained the flexibility and performance of a custom-coded front-end.

Solution

The Beekman Cold Brews site was built using the MODX CMS, a lightweight, content management framework that allows developers to construct custom themes without having to rely on excessive plugins or templates. The design system combines the flexible X-Y grid and UI components from the Foundation 6 framework with a custom spacing and padding utilities layer that largely replicates the syntax (ie. u-my-4, u-pt-3) of popular atomic frameworks like Tailwind CSS. This hybrid approach combines the benefits of traditional, component-based frameworks which allow for rapid prototyping, while also being able to take advantage of the high levels flexibility and customization allowed by utility-based frameworks. For interactivity, Alpine.js, which is often referred to as “a more modern, lightweight jQuery,” was chosen because of its minimal structure which was appropriate for a project of this type.

Results

The project ultimately produced a lightweight custom design system that combines Foundation’s modular grid and components with a small “micro-Tailwind” utilities layer for spacing and layout control.

View Project

"Beekman Cold Brews"Website Case Study