Setting the Stage for Success

Whenever I embark on a new project, I start by searching for a unifying idea—a central theme that ties together all the different elements into a harmonious whole. By thoughtfully crafting this thematic structure, I can transform a simple collection of tasks into a compelling narrative, guiding both myself and everyone involved toward a shared vision of success. I’ve found that setting a powerful theme from the outset helps anchor my work, streamlines organization, and sparks creativity at every stage.

Building a theme requires a solid understanding of each platform, but most of them use some form of modular system as a foundation. I’ve found this to be true in almost every theme I’ve worked on.

There are plenty of approaches to keeping assets lightweight and fast to load. For example, you could create assets specific to each page and its UI components, while also having some global assets that are loaded on every page. I don’t use this exact method for a few reasons, which I’ll explain in a future post.

For now, here’s the structure I usually follow:

PROJECTS FOLDER
- Styles
-- Library
---- library.sass
-- Framework
---- framework.sass
-- Apps
---- apps.sass
- Javascripts
-- Library
---- library.js
-- Framework
---- framework.js
-- Apps
---- apps.js
- Images
- Fonts

The “Library” folders in both Styles and JavaScripts contain presets, with variables that can be set by each CMS theme.

The “Framework” folders are for UI components.

The “Apps” folders in both Styles and JavaScripts are intended for others to add custom code as needed, for example, integrating third-party features.

With a folder structure like this, my goal is to make every change easy to track and search for, so I can optimize or customize things as I wish. I create folders and files named according to their specific functions. For example, for a dropdown feature, I’d have:

PROJECTS FOLDER > Styles > Framework > components > _dropdown.sass

This file would then be imported into:

PROJECTS FOLDER > Styles > Framework > framework.sass

For the JavaScript side:

PROJECTS FOLDER > JavaScript Framework > components > dropdown.js

And this would be imported into:

PROJECTS FOLDER > JavaScripts > Framework > framework.js

It’s important to use globally defined names to avoid confusion. Of course, you can adjust the structure to fit your preferences—this is just a basic example to illustrate the concept.

After all, no chef shares their absolute best recipe, right?