Developer-friendly starter theme

[adamchipperfield]

Hello all!

Dawn is perfect for merchants, and sometimes good enough for simple developer customisation. But more than that and it's a royal pain.

The documentation is sparse. For example, there's nothing around how the grid system works. Don't get me started on the web components, which often are highly co-dependent. You often need to follow a looong chain to figure out what's going on.

The code can be messy and inconsistent. This one is probably more preference than anything. But it's crucial when developers want to extend the theme and are having to understand the way things are formatted. For example, some icons are inline whilst others are coming from a snippet.

There's too many options. I get it – Dawn is merchant-first and has to cover a massive spectrum of requirements. I don't have any issues with that, until I'm using Dawn for a client. It makes it excruciating to make changes since there's a 100 other side effects that will occur. That's 100 use cases I need to consider, when the client likely won't use any of them (but in the name of decency, I try to consider anyway).

So what do I propose? A "bare-bones" starter theme that puts the focus on extensibility (not to be confused with Checkout Extensibility). The use case for this would be custom theme development projects. The Skeleton Theme from the Slate days is probably the best example for this.

Here's the fundamentals:

• Cover all core templates and functionality (as little opinionated features as possible)
• Styling is basic (it shouldn't need to be stripped back, only added to)
• Documentation for everything
• Code is organised, tidy and consistent (use the "looks like it's been built by one dev" rule)
• In the future: A library for common, but custom, features

I've been working with my own version of this for a good few years now, but it's hard to find the time to maintain it between projects. It would be ace if Shopify led something like this. And who knows, they might already be cooking something up.

Keep to hear feedback!

Adam

P.S. This is not a dig at the Dawn team or an op on its use in the non-custom space. They've built something that looks and functions great and has contributed to getting merchants selling quicker.

[PaulNewton]

Meta: dawn is source-available, vs open-source, and that's gonna put the kibosh on a lot of things, so most the knowledge that's needed externally for the ecosystem to understand things with rigor stays undocumented, is in diaspora, or just plain internally silo'd and resisten to fundamental change even for the better.
----------------------------------

For sometime now the learning curve has had the ladder blown up from it so the amount of things new devs have to just know[1] continually gets steeper and high friction in comparison to a vintage theme like Debut that new devs may never even know existed.

Due to the complexity explosion also bear in mind even MORE upcoming changes to the theme architecture such as theme-blocks > block-hierarchy.
See the experimental reference theme
https://github.com/shopify/reference-theme
https://shopify.dev/docs/themes/architecture/blocks/theme-blocks

A "bare-bones" starter theme that puts the focus on extensibility

Dawn is.. it's become alot.
Ideally needs to be 3 themes: an OS2.0 skeleton theme > a simple twilight(pre-dawn) theme based on the skeleton > and Dawn rebased ontop of the twilight theme[2]. And the themes need to aggressively refer to each other.

The twilight theme would introduce conventions for formatting and file organization and be the thing mentioned in the beginning of the architecture docs , i.e. themes/architecture/templates/product.
Right now Dawn's main-product.liquid is ALOT to parse through and is not something I like pointing newbie devs , and especially not merchants, towards as a "reference" implementation because it's pushing them into a growing deep end.
Dawn's grown into something that should be pointed to as an implementation standard AFTER pedagogical introduction to something simpler and less of a moving target.

It needs to easier for new devs to literally step through building up a theme ( nothing > skeleton > twilight > snippets/sections/settings > dawn > production or theme-store), and for adopters to gauge how monolithic dawn is to facilitate paring down features and identify longtail issues such as with accessibility by just being able to diff twilight vs Dawn.

Cover all core templates and functionality (as little opinionated features as possible)

would need to define base sections (i.e. no sliders), and the reusable snippets of common features(i.e. price) , and bare settings functionality.
Settle on locales if any, whether to even include concepts like the section rendering api product recommendations, etc, and organizational conventions like making all the icons a singular or multiple file(s).

Code is organized, tidy and consistent (use the "looks like it's been built by one dev" rule)

For the developer experience(DX): The WHY of how consistency is arrived at, needs to be defined better from the get go.
When your arm deep in a shopify theme your dealing with ~7 different naming conventions & formats between the 4 languages being used(HTML,CSS,JS,JSON,Liquid) and it' subsets(HTML>SVG).
casing: snake_case, kebab-case, lowerCamelCase, UpperCamelCase.
Idents: BEM
At least with dawn there's no framework like alpine,react, tailwind silliness, or weird CSS escaping ( .lg:ml-0 ) also dumped into the mix for even more context switching.
There is the liquid linter but that's a post effect information.

And like you noted there's non obvious conventions like why an SVG icon is inlined vs a snippet or even why all the icons are separate snippets, or why they aren't namespaced to show up at the end of the files list so we're not constantly scanning 40 files when looking for product snippets. I can understand why but the why's aren't defined for those without benefit of experience.

Still a limiting factor is no build systems , or asset include system, so CSS & JS still tends to be monolithic & idiomatic (see .rte etc) for shopify behaviors.

[1] Did you know the dawn theme uses BEM for class names, do you even know what BEM is, is it strict in the theme? do you even know a single place that documents that Dawn uses BEM?
[2] twilight is just dawnv1 with relevant bug fixes?? 🤷

[tnoetzel]

It's absolutely crazy to me that this doesn't already exist. Since it seems like Shopify isn't prioritizing this, if anybody is interested in collaborating on creating it I'd definitely be down.

[pablogiralt]

I am in on collaborating on this too!