DEV Community

Nandawula Kabali-Kagwa
Nandawula Kabali-Kagwa

Posted on

Building for Real Realities: Why We Eliminated Em Dashes and Standardized Equal Thirds

When you are writing code that represents a physical and digital studio from East London, South Africa, aesthetic choices quickly become engineering constraints. This week, our main repository (CreativelyNanda.co.za) underwent a massive structural refinement. We didn't add a flashy new database or migrate to an exotic edge runtime. Instead, we focused on the bones: equal thirds, strict color tokens, print stylesheets, and brutal typographic minimalism.

Let’s talk about the stack decisions behind this week's commits.

1. The Geometry of Equal Thirds

Layout drift is the silent killer of frontend polish. Across our shop, Notion integration, business archives, and the Poem Wall, we enforced an equal-thirds layout structure. This wasn't just a whim; it was a deliberate move to create predictable mental models for users navigating heavy literary and commercial content simultaneously. We extended this rhythm to the legal pages, roots, testimonials, and imprints, ensuring that whether a user is reading a poem or buying a physical volume, the container feels anchored.

2. Styling for Paper: When CSS Meets the Physical World

One of the most challenging frontend tasks this week was making the digital design system translate seamlessly to physical print. We configured the remaining navy pages to print accurately on paper, ensuring that coloured buttons retain stark white labels and Forge masthead pockets align precisely with the words beneath them. Stage reel captions were locked directly under their frames.

In a region where load shedding is a structural reality, thinking about how a web page behaves when printed or saved offline isn't a retro novelty, it's robust engineering. It’s the same philosophy that drives VarsityOS to remain fully functional offline for students navigating NSFAS budgets.

3. Typography as an API

We instituted a strict style rule: no em dashes anywhere on the site.

From a parser and readability perspective, em dashes often act as a crutch for run-on architectural logic in copywriting. By stripping them out, we forced our prose to rely on hinge words, pauses, and clean pulse lines. We updated our X-ray poetry modes and garden layouts to respect this newfound restraint.

4. The Gotchas: JSX Comments and Selector Escaping

No build log is complete without a bug post-mortem. Early in the week, a stray comment hidden inside a JSX conditional broke our product page build. It's a humbling reminder that even with mature tooling, JSX parsing edge cases will catch you off guard if your components mix declarative markup with raw scripting comments.

We also escaped our CSS remap selectors (fix(css): escape the remap selectors; journal §25), cleaning up specificity wars before they could compound.

Building apps like AdminOS (our six-agent SME back office) and the K53 Drill Master (rigorously audited against official DLTC docs this week) teaches you one unchanging truth: discipline in the small files saves your life in the large ones. Clean up your tokens. Check your build logs. And let your code breathe.

Top comments (0)