Let us build a Theme-Framework based on Sage 10?!

sage
,
1

Dear Community,
I would like to share an idea and vision with you for which I would be very happy to get your feedback, thoughts and - maybe - support.

tl;tr: I developed a Sage based Theme Framework that reduces repetetive dev work to make it easier and faster to set up new themes & websites. Asking the community to share thought about its usability & need and asks to support the idea of Stage.

As most of the people in this community I really enjoy working with Sage and I really improved my development skills by creating websites based on Sage 8, 9 & 10. And each one got more clean code, is faster and more lightwight and was more fun to work on. I must say it is a plesure for me to follow the further development and to test and use all the amazing code generated in the Roots ecosystem.

However starting a website is always a bit frustrating, as you always need to start from stratch.
Two years ago I strongly needed a template that is easily customizable by different non-techy users. So I started to search for available themes that are as flexible as possible with requirements such as:

  • Fast learning curve for the user
  • Deep integration into Customizer, with „useful“ options
  • No need for another Page Builder, as Gutenberg was already announced
  • Clean, lean code without spammy advertisements
  • Possibility to extend/customize it via packages, hooks & child themes
  • Multiple and extendable design options (e.g. different headers, footers, grid layouts … to choose from)

The only one that came close to what I expected was the Pro-Theme from Yoo. But it requires another page builder and I only want to go with WP core featues. Using something other than Gutenberg & Customizer is a no-go for me. So I realized that I need to develop my own Template and started to do so with Sage 9 and later ported the code to Sage 10, when the dev-branch was published on GitHub.

I am working on this in my spare time since 2 years now and you can imagine, I invested a huge amount of hours to get to the current status:

Customizer:

  • Multiple archive, search, header, footer, … grids & styles to choose from
  • Global colors, style, layout and typo options in the Customizer
  • Colors & Fonts are globally available via CSS vars (also in the editor)
  • Google Fonts support with local font saving
  • Custom Fonts support: Simply upload it to the media gallery and it is available in the customizer
  • Per CPT settings e.g. to choose the grid layout
  • All customizer controls can be programmatically defined in the defaults.php file

Featues:

  • WooCommerce support
  • Based on Tailwind CSS
  • Styles and Features that can be overwritten in Child Themes
  • Barba.js as optional AJAX loading content
  • PhotoSwipe as optional Gallery Lightbox
  • Lozad.js for optional Media lazy-loading
  • Infinite Scroll for optional infinite scrolling in archives

But this is still a early proof of concept and even though I already released a couple of small websites based on Stage usch as this one, there is still a lot to do. And while it is currently integrated into the theme, maybe this could/should be better done as separate composer packages which is then added to Sage.

The goal is to build a framework, that allows developers to choose from templates which are already set up. E.g. different header styles, mobile menus (drop-down, overlay, off-canvas,…), footers, archive grids (masonry, cards, crazy grid, …). To deeply integrate “useful” features such as infinite scroll, lazy loading or galleries which can be easily switched on/off and to allow easily to define basic global styles such as for typography, colors, spacing,… All this should be easily adjustable in the Customizer or by code.
So while Sage is a great empty starter template, Stage would be the addition which eliminates a lot of repetitive work as the dev does not need to develop the header, mobile menu, archive layouts, … again and again but just chooses from the selection or adjusts that to the liking.

A couple of weeks ago I stubled over this theme and realized, that the authors did what I was working on - but the Customizer integration is so much better as I would be ever able to realize with Kirki. I contributed a lot to Kirki 4.0 development in the past months and even developed a sync and local fonts upload package, but Kirki is now sold and the future is unsure.
Both is kind of frustrating after inversting so much time, but following the “Kill your darlings”-Concept I decided to stop working on Stage and to get more familiar with the themes that got published in the meantime (this is another one).
But I have to say, I am missing a lot from Sage. E.g. blade, the clean file logics, using the packages by @Log1x and others and finding answers in this awesome community. So that is why I am wring all this and why I want to ask for the communities opinion.
Is there a need for this vision? Would you support it by contributing? Or can you even imagine that this community works together to build something like this? Really anything that comes to your mind is interesting for me.

Thanks for your attention and kind regards,

Philipp

9 Likes
2

Please also add the Laravel image optimization mix.
I am unable to get it working with Sage 10, just an example would be very useful!

1 Like
3

Hi @philipp, I’ve seen so many “Frameworks” come and go. And in the end for us developers we figure out our own toolbox. The problem with Frameworks is that you take away all the freedom we have to make our projects lean and mean. And u load in all these dependencies which make the site slow. For easy WordPress websites there are already many options like DIVI, Beaver builder etc.

All the things you mention you can find in plug-ins or I think I’ve seen a couple of these things in other starter themes. Which are probably better for people to start with than Sage because they are easier.

In my opinion; if you really want to help out starting developers is to create a set of tutorials on how to add the items you have written about in your post to the Sage theme or Bedrock. The documentation is great but we miss some “practical” tutorials for this framework. We really don’t need another framework on top of this framework; I think you will be wasting your precious time! That’s just my opinion, perhaps it differs from other devs here

4 Likes
4

Dear @alexanderdejong,
thank you so much for taking time for answering. I really apriciate your feedback and I partly agree with your argumentation: There is no other Framework required that is bloaded like hell and tries to fit all non-dev end-users expectations.
But this is not exactly what I am thinking about, especially regarding content creation. So Beaver Builder, Divi & Co. are out of scope. I am talking about the “Frame around the Image/Content”. Sorry if I did not make that clear enough: A starting point for developers which is more opinionated in terms of a correct Sage implementation of website-parts & -features such as headers, footers, layout-grids, custom font-loading etc. and not in terms of design. All this under the umbrella of avoiding to start from stratch again and again.

A mobile menu is a good example for what is my intention: There is only a handful of widely used concepts for that. To name the most common: Off-canvas, overlay & dropdown. I assume that nearly every Sage project requires a dev to build a mobile menu. If you want to do such a menu right (e.g. accessabilit)y, this is not a trivial work and has to be done again and again.
Now imagine there is a option or composer package “sage-offcanvas-menu” you just activate or add it to your project and woops, there is the required mobile menu you can style as you want.
Sage 10 and Blade also easily allow you to overwite the initial package templates by your needs.

Same e.g. for archive grid layouts. Do you really want to install one of these blown Plugins to get a Masonry layout or a Infinite Scroll feature? I assume not as this is the way of swelling your project.
For both you just need some JavaScript and a couple of hours to implement it. But still you have to do it, I have to do it and many onthers in this community also do it. Wouldn’t it make more sense that someone starts with such an implementation and others use it and contribute? This is not ablout me searching for another income, it is about making live easier.

Yes, that helps a lot. For sure! And I did so e.g. here for BuddyPress integration, here for WooCommerce & Sage 10 or here for Barba.js.
But still, each one has to get it done again and again.

This assessment is very important to me. Thank you! Maybe I was able to clarify a bit better my intention? Or is it what you understood?
And further on I hope some other opinions, even if they are critical of the approach. That helps!

1 Like
5

@philipp, I can definitely see value in this idea. Adding in base / almost universal functionality like a mobile nav menu, especially as you say using best practices for a11y etc

It’d also be a great learning tool for newcomers to hack around and only make minor changes to get up and running with the Roots stack which can only be a good thing.

But I also totally understand where @alexanderdejong is coming from. Dev’s that have been using the Roots stack for a while won’t need this, but like I said it’d be awesome for newcomers.

So keep up the good work! + hopefully, I’ll find some time in the not too distant future to contribute and keep the ball rolling!

6

@slowrush thank you very much for your feedack! Good to hear that others see value in it and are open to contribute.

Yes and I am quire sure that it would not only be interesting for beginners, as long as flexibility and adjustability is given. What would you expect from it? A ready to install theme or a couple of composer packages to install as required?

BTW, also other opinions are still very welcome!

7

@philipp, imo great idea, Found this topic while prepping for a new project that has some features mentioned in your initial post. I see quite a notable amount if potentially saved time there. I’ll be keeping my eye on this topic and contribute when possible.

1 Like
8

This topic was automatically closed after 42 days. New replies are no longer allowed.

10

This is incredible!!! Is there an update to this? Version 10 Sage?

Huge thanks!!

11

As a starting point, this Sage 10 theme adjusted for Gutenberg Full Site Editing (FSE) may be interesting:

1 Like
12

Tks! This looks interesting.