backdrop-contrib / zeever

Theme (in development) for a digital agency website
GNU General Public License v2.0
0 stars 0 forks source link

Decide on base for theme #2

Open stpaultim opened 5 months ago

stpaultim commented 5 months ago

[Updated: May 29th, 2024]

Link to DEMO version of Zeever for Wordpress. https://gutenverse.com/demo?name=zeever We are trying to create a theme that looks very much like this, but might have some differences (to be decided as we progress).

Looking for feedback on how to get started building the base for our new Zeever theme for Backdrop CMS. A few ideas have been discussed.

  1. Actually trying to port or reuse as much of the CSS from the Wordpress theme as possible.
  2. Forking an existing theme, such as Basis, and using new CSS or CSS overrides to make the required changes to the theme.
  3. Subtheme an existing theme.
  4. Start from scratch and build a new theme.

After discussing this with Joseph Flatt, I'm leaning towards starting a new theme or a new base theme that meets the specific needs of this project.

However, I don't want to recreate some of the building blocks that are needed in most themes and am looking for guidance on how to best put together a good framework on which to build for this theme. I recognize that there may be an existing Backdrop theme that might serve as a good base.

If anyone would be interested in either creating a base theme for this project, sharing some code, or pointing us at a good theme to start from, I would welcome that.

izmeez commented 5 months ago

I don't know ... as I look at the Wordpress Zeever theme and scroll down some thoughts flash through my mind:

  1. They are a series of containers, within which there are layouts/containers, content and transitions.
  2. It reminds me of a bootstrap5 site, if you're already fluent it may be easy to use class names for each of the sections.
stpaultim commented 5 months ago

@izmeez (and others) - We're not quite ready to proceed to this stage yet, but the more I think about this the more I'm inclined to basically fork the Bootstrap 5 theme and start from there. Could also be convinced to sub-theme Bootstrap 5, but I'm hesitant to lead folks down the path of sub-theming a sub-theme. I think it's easier to just fork the theme and start fresh.

Would love to find someone interested in helping with this.

izmeez commented 5 months ago

@stpaultim What you have shown with this project in Backdrop is that most of the action can be done in recipes, The only thing left for the theme is what? A skin? So this could be a skinny theme. A lot of the css stuff is already tucked inside of Backdrop and just needs an interface like Basis, Bootstrap and other themes provide.

izmeez commented 5 months ago

It doesn't need to be a stand alone theme and a sub theme may be more illustrative.

izmeez commented 5 months ago

It's a tough call between using Basis or Bootstrap5 as a base theme. In some ways, Basis is like the zen of backdrop, it contains everything, so the examples are there. Bootstrap, on the other hand, is a lingo. You use the lingo and it does it.

Basis may be slower to adopt improvements to preserve backward compatibility but does a good job of staying up with core.

Bootstrap may be familiar to a broader number of people on different platforms and may provide transferable learning which can be a factor for new learners.

izmeez commented 5 months ago

I would lean to a sub theme of bootstrap5 lite.

stpaultim commented 5 months ago

What you have shown with this project in Backdrop is that most of the action can be done in recipes, The only thing left for the theme is what? A skin? So this could be a skinny theme. A lot of the css stuff is already tucked inside of Backdrop and just needs an interface like Basis, Bootstrap and other themes provide.

@izmeez - Yes, in Backdrop CMS themes are more like skins. Themes control the following font, font sizes, colors, special css effects. The layout and core CSS are there to primary decide where things are on the page, which item is on top, which comes next and what goes in the footer. Some core css does things like make sure that items are responsive and that grids behave in the right way.

But, the core CSS is not there to make things look pretty. That is the job of the theme. There are infinite combinations of colors, fonts, font sizes, line height, margin sizes, etc. It's the themes job to make all of these visual decisions. This would also include Javascript.

The Zeever theme has a bunch of Javascript effects that are not necessary to the Digital Agency Recipe Package, but they are part of the specific design/look of Zeever and should be part of the theme. A different theme might choose to do different effects or none at all.

The CSS I'm putting in the Digital Agency theme is make things function or to at least make sure that they don't look broken out of the box. BUT, the actual skin or design is the job of the theme. In my idea world, there might be 3, 4, or more themes that all put different skins on the Digital Agency package. Some of them might look very different from others.


I'm hearing your advice on sub-theming Bootstrap 5. This is an option, but I am somewhat leaning against it, because if I subtheme Bootstrap 5 for Zeever and someone then decides to subtheme Zeever, we now have 3 required themes. The advantage of making Zeever a sub-theme of Bootstrap 5 would be that it would inherit any updates to Bootstrap 5 that are released in the future. But, frankly I don't see that happening that often. Even if it does happen, I could manually add those changes to Zeever anyway.

Making it a sub-theme of Bootstrap would be a good example to other themers, so that is an argument in favor of it. I'm still deciding and appreciate your feedback.

stpaultim commented 4 months ago

Finally started working on the actual theme itself. Decide to try and base it on the Bootstrap5 Lite theme. I started by stripping out some of the features that I don't think necessary for Zeever, such as the Bootstrap sub-themes. Going to open up a new issue for creating the actual theme and put some screenshots there.