Problem/Motivation

Classy, which is the current base theme provided by core is stale because most changes are not allowed to retain backwards compatibility. We need to retain backwards compatibility because some design requirements of themes depending on Classy could depend on markup and/or CSS provided by Classy.

While reviewing different approaches, we talked to members of the frontend community. Something that came up was that many of them recognize themselves in a situation where they are using Classy, but they've ended up overriding most if not all templates. This is a good practice since markup should be adjusted specifically to the design requirements of the theme. If theme overrides all of the CSS and markup, it would be possible to make changes safely in Classy. However, this is not something enforced by Drupal so we cannot rely on that at the moment.

Proposed resolution

Provide a starterkit theme in core. This will give us more freedom for the maintenance of the theme since making changes to the starterkit doesn't affect any production themes directly. The contrib space contains multiple examples of this that we could look into as part of figuring out the specific. The key change will be that in the process of creating a new theme based on starterkit, all templates are copied to the new theme, rather than them being loaded run time from a base theme.

The starterkit theme should include a command line tool that allows generating a new theme. The CLI tool should allow configuring the name and the machine name of the theme.

Recommended videos

lauriii's session on StarterKit at DrupalCon Global July 2020:

Demonstration video and status update from March 15, 2021:

Remaining tasks

  1. Decide whether the theme should extend Stable or not (by default)? Should this be configurable?
  2. Should we add a way to recognize themes generated using starterkit (potentially useful for statistics and other purposes)?

API changes

New command for generating theme using latest default markup.

Example command:

php core/scripts/drupal generate-theme <machine-name>

Reference help to see all configuration options:

php core/scripts/drupal generate-theme --help

Release notes snippet

New starterkit theme generator has been added as an experimental new tool in core. The starterkit theme generator allows developers to create a starting point for their theme. The generated theme has similar markup and CSS previously provided by Classy base theme including common CSS classes and markup. Instead of inheriting the markup and CSS from a base theme, the starterkit theme generator copies the defaults into a new theme.

Issue fork drupal-3050384

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

lauriii created an issue. See original summary.

lauriii’s picture

lauriii’s picture

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

xjm’s picture

Issue summary: View changes
FileSize
75.25 KB
lauriii’s picture

Issue summary: View changes

lauriii’s picture

Issue summary: View changes

I've started writing new command for generating themes from a starterkit theme. The command currently only allows using a starterkit theme as the source theme, but it could be easily modified to support other themes such as Olivero. I added some documentation to the issue summary to make it easier for people to test this.

Next up I think we should decide whether themes generated from the starterkit theme should extend stable9 or not. Once we have made a decision on that, we should upgrade starterkit from using Drupal 8 stable to either using stable9 or the latest core markup (so called wild wild west) because stable should be deprecated before Drupal 10.

lauriii’s picture

Status: Active » Needs review

Moving to needs review as the MR is ready for review

mherchel’s picture

I took a quick look at this, and it's wonderful!

I would love to see a sample JavaScript file included with some Drupal behaviors (including some documentation on what Drupal behaviors are).

Thoughts?

ipwa’s picture

Amazing work!!!

It would be amazing to have some example Drupal behaviors.

lauriii’s picture

Thank you for the encouraging feedback! I think including some JavaScript in the starterkit theme is a great idea. We should probably have something related to behaviors and theme functions since those are probably the most commonly used JavaScript APIs. I'm not working on the MR right now so feel free to give it a stab if you wish!

alexpott’s picture

Issue tags: +Needs tests

I've reviewed the MR. Looks like a fantastic start! (wink) - I've left some comments on the code

  • We need to add test coverage. It might be good to use a build test here as we can test running the command without an installed Drupal. And then we can do the install and enable the new theme.
  • I asked @lauriii about why we where adding the starterkit theme. It turns out this theme is a copy of classy and will allow us to remove classy in D10. This means we need to duplicate classy's tests and to ensure that it is tested when we do generic theme testing. One problem is that this conflicts a bit with using the hidden property. Also I think we need a follow-up to replace protected $defaultTheme = 'classy'; with starterkit. We also need to add it to lists like the one found in \Drupal\Tests\block\Functional\BlockDemoTest::testBlockDemo and potentially we should consider adding a trait to list themes to test. We might want to do that in a blocking issue.
  • There are a lot of tests using classy - there's #3083275: [meta] Update tests that rely on Classy to not rely on it anymore - would it be the worst solution to change them to use starterkit?
lauriii’s picture

Issue tags: +Needs followup

I don't think we can add Starterkit Theme as it is to \Drupal\Tests\block\Functional\BlockDemoTest::testBlockDemo because Drupal\block\Controller\BlockController::demo calls for \Drupal\Core\Extension\ThemeHandlerInterface::hasUI on the theme which essentially excludes base themes that have been hidden. The current test is very confusing because Classy is included in the list but later excluded because it is the base theme. I don't think we can add the new theme there and we should probably remove Classy from there too to avoid confusion. Can we handle that in a separate issue?

I actually like the idea of replacing $defaultTheme = 'classy' with 'starterkit_theme' at least in some tests because it would be a lot of work to fully decouple from Classy and we could benefit from the test coverage on the Starterkit Theme. Is that something we should look into after the theme has been marked stable?

lauriii’s picture

Issue tags: -Needs tests

We need follow-ups for:

  1. Handling Twig extends, includes and embeds
  2. Using starterkit_theme in markup heavy tests
  3. Adding JavaScript examples
  4. Allowing starterkit themes to extend the build process
rootwork’s picture

Since lauriii asked for thoughts on the starterkit theme idea in a core blog post, I just wanted to add my hearty +1 to this initiative, as a Drupal themer from 4.6 days forward.

And from the issue summary, my opinion on this remaining task:

Should we add a way to recognize themes generated using starterkit (potentially useful for statistics and other purposes)?

is yes. Even if it's something like a meta tag or HTML comment that could be removed, in the same way you can remove mentions of Drupal itself in site code. I think being able to both a) show success/adoption of a core initiative in the future and b) help guide where to go next, can only be helped by having this kind of information.

alexpott’s picture

@lauriii +1 to removing classy and documenting the list better in \Drupal\Tests\block\Functional\BlockDemoTest::testBlockDemo

Gábor Hojtsy’s picture

Issue summary: View changes
FileSize
648.29 KB

Adding demo video from yesterday to issue summary.

Gábor Hojtsy’s picture

Issue summary: View changes

Make it even more obvious that it is clickable.

rachel_norfolk’s picture

I love this!!

Given that we have an abundance of starterkit-style themes in contrib, I do think it would be useful to provide a way of specifying another source starterkit theme in the cmd. Then, we will hopefully see those other starter kit themes adopt a consistent pattern for theme creation.

I guess the script would need a way to detect if a specified theme is indeed "compatible" with being used as a starterkit. Maybe something in the .info.yml?

ipwa’s picture

+1 for being able to specify another source in the command this would open very interesting possibilities. There could be different starter kit source themes in contrib for using different front-end tools (sass, postcss, gulp, webpack).

marcel66’s picture

I love to have one/more theme starter kits in core!...
To theme a Drupal site is still not so easy yet. Theme starter kits in core may help us be more productive - different best practices....

As Drupal is based on Symfony and Twig what do you think about Webpack Encore.... a starter kit theme based on Symfony solution...

ressa’s picture

The command currently only allows using a starterkit theme as the source theme, but it could be easily modified to support other themes such as Olivero.

This would be awesome, let us know how we can help with that.

brianperry’s picture

Very excited about this feature in general, and also wanted to +1 the idea of specifying a different starter kit source. Many contrib themes have a command to generate a new theme, and they approach it in slightly different ways. Using this to encourage a standard would be great.

rex.barkdoll’s picture

I'd like to recommend Drush support for the automatic deployment of the theme.

Gábor Hojtsy’s picture

For the record, as a Drupal core product manager, I discussed product requirements with @lauriii on February 16, and reviewed a demo of the tool then. I think that some solution for tracking changes to the source theme after the copy was made would be needed for beta, but that is not necessarily a solution within the tool itself. It could be a release process addendum. Either way, I expect people will come up with that requirement in the testing process and make suggestions. I am not attached to a specific solution but IMHO some kind of solution would be needed. Since this may require changes to the tool itself, I think it is not possible to make the tool beta without knowing how this would work. (I think you need some way to tell which version of the source theme you used to generate your copy and the tool may need to copy that info over from your source).

As a Drupal core product manager, I think the current functionality is sufficient for alpha inclusion in core. (I did not do a code review though and will not do one).

ressa’s picture

Would generating a sub-theme based on for example Olivero be in scope here? I imagine that could become a very popular tool, like what https://github.com/acquia-pso/cog_tools does, which can be used for inspiration.

alexpott’s picture

ressa’s picture

Thanks @alexpott, but if I understand this issue and #3206219: Allow configuring which theme is used as a starterkit theme correctly, the method is to copy all the code of a base theme (or another theme, like Olivero) to form a complete theme, and in effect detach this newly created theme.

From the Issue Summary:

The key change will be that in the process of creating a new theme based on starterkit, all templates are copied to the new theme, rather than them being loaded run time from a base theme.

In my thinking, a sub-theme should rely on the base theme for most files, inheriting the parent theme's resources, but allow overrides by copying files from the base theme to the sub-theme, and modifying them. In this way, the parent theme can be updated during the regular updates. Of course, the user needs to make sure that nothing breaks after an update.

If a sub-theme based on Olivero could be created by running a command, it would allow users to quickly go from 0 to 60, by simply updating the logo and color scheme of the new sub-theme, and have a great looking web site.

alexpott’s picture

@ressa that point of starter kits is to decouple from the other theme. That way the starter kit can make changes with the confidence that they are not going break other themes. Base theme introduce a tight coupling that makes change in the base theme impractical because the ramifications of a change are impossible to work out.

ressa’s picture

@alexpott: I understand the difference between starterkit and sub-theming, but @laurii specifically mentions sub-theming as an option in his answer in the "Drupal 10 theming starterkit demo on March 15, 2021" presentation, using Olivero as base for a sub-theme (question and answer starting at 29:30 min):

https://www.youtube.com/watch?v=gkUAjQ5xKT8&t=1770s

That's why I am asking if offering an Olivero sub-theming feature would be out of scope for this issue, or perhaps another issue should be created?

Gábor Hojtsy’s picture

Issue tags: +Drupal 10, +NorthAmerica2021

Tagging for DrupalCon North America 2021 contribution.

dorianwinterfeld’s picture

Successfully tested on a Mac running lando.

mherchel’s picture

Status: Needs review » Reviewed & tested by the community

Did a review. A couple notes

  • Template files are copied over from Classy. I didn't review each template file (there are a lot!)
  • There are a lot of components that IMHO we don't need in the starterkit (like forum), but that's another issue
  • Command line works as expected (MacOS Big Sur)
  • There are both ES6 and ES5 versions of media_embed_ckeditor.theme.js. There is no build process to convert the ES6 to ES5 included.

Since this is going in as alpha, though, this is great and looks amazing. I can't wait for people to start using this as it gets more capabilities!

RTBC!

Gábor Hojtsy’s picture

Adding for (expected) 9.2.0 release highlight.

alexpott’s picture

After agreeing with @lauriii, as part of this issue was to canvas for thoughts on the idea crediting everyone who contributed.

Also crediting Joel and David as contributors to the idea of starterkit themes.

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

Committed f521770 and pushed to 9.2.x. Thanks!

  • alexpott committed f521770 on 9.2.x
    Issue #3050384 by lauriii, Gábor Hojtsy, xjm, alexpott, ressa, mherchel...
lauriii’s picture

Issue summary: View changes

Added draft release note highlight.

rachel_norfolk’s picture

Awesome! Do we have a documentation plan for this? Feels like it needs to be in the curated guide(s)...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

Gábor Hojtsy’s picture

Since this was removed from 9.2.x due to the alpha state, I am moving the tag tentatively to 9.3.0 highlights assuming it will be beta then. Not going to be released in 9.2.x at this point.

ressa’s picture

ahmedsayeed1982’s picture

Question, can stable(8) extend from stable9, so that we don't have the duplication?

i.e. where there is no difference between stable8 and stable9, it comes from stable9

JamesOakley’s picture

When I tried, just now, moving a site over to 9.3.0-beta2 and running drupal generate-theme, I got an error that the command did not exist. drupal list | grep theme suggested that I should be using drupal generate:theme instead (alias drupal gt).

The only documentation I've found for a new starterkit theme is the existence of this Drupal Console command in the API Changes section of this issue summary. Does this section need changing to point to the correct Drupal Console command? Or have I misunderstood how to use the proposed starterkit theme?

Chi’s picture

@JamesOakley That command is part of Drupal core which means it has nothing to do with Drupal Console project.

OMD’s picture

I also consistently get an error that the command does not exist. I'm on drupal 9.3.5.

Was this removed from 9.2 onward? This issue seems to say so:

https://www.drupal.org/node/3206389

Gábor Hojtsy’s picture

@OMD: we don't include alpha experimental features in releases. They are included in the development versions though as they get to at least beta.