Drupal8 concept for selecting templates form the ui

template-choser.md

template chooser

Drupal8 is pretty awesome, but its a problem that you cant choose fromt the ui which template to use. Sure you can overwrite whats there (node--article.html.twig) but that dont give the end user a chance to later change in the site & can end up in even more templates & clutter.

template suggestions

Make it easy to provide a template suggestion for entities, blocks, pages, nodes, fields, menues, username, everything that have a template you should be able to give a suggestion.

class selector

A prepopulated list of classes that can be selected for a template.

The modules userbase is sitebuilders & themes that wants to provide variations for a site, developers dont have to provide templates after a site is build, and can rely on the theme to provide all the variations.

user stories

sitebuilder

1. sitebuilder have a site where a new content type have been added, he wants to change the new type to another layout than article & page, in the ui he chooses "node layout: orange" for the content type.

2. sitebuilder wants a field to have classes "green width-20" added to it.

3. sitebuilder wants to be save the configuration

the theme

1. Theme provides predefined template variations for a sitebuilder to choose from in the ui, so they follow "the design".

2. Theme want to provide predefines css classes for a sitebuilder to select from

3. Theme wants to be able to later update a template or make new variations

4. themes wants to change classnames that have been selected, a user should not select the classnames but a machine name ex: "class__name__foo--variation" is ugly to read but "layout-wide" is readable

Template-chooser.yml

a theme supporting the template chooser includes a yml file. Each template will be grouped by machine name, so end user dont end up selecting templates that are not usable.

**[themename]/template-chooser.yml: **

yml

formation:
[machine-name]:
[name] : template-suggestion.html.twig
[othername] : template-othersuggestion.html.twig

template suggestions :

node: 
orange : node--orange.html.twig
blue : node--blue.html.twig

field-image
field-image : image-awesome.html.twig
field-image : image-notsoawesome.html.twig

field-text
field-text : field-text-my-variation.html.twig

css class selector

class sugestions:

template: 
group-name: 
 - name: classname
 - name2: classname2
otherelement: 
group-name-two: 
 - name3: classname3
 - name4: classname4

** [themename]/templace-class.yml:

node: 
layout: 
 - small: grid-10
 - large: grid-30
 - xlarge: grid-100
colors: 
 - thorns: red
 - timbers: green

the content type interface have an ui that shows layout & colors with the readable names.

Templates can add in the classes that is provided from the yml file template-choser-classes

examplate template:

<div {{ attributes.addClass(classes, template-choser-classes) }}>

Have you taken a look at what https://www.drupal.org/project/layout_plugin is? kinda seems like it is a similar approach or at least a close approximation of it.