Some extra's for block components.

Better classes

The classes on block has been changed to:

{%
  set classes = [
    'block',
    'block--' ~ configuration.provider|clean_class,
    'block--' ~ plugin_id|clean_class,
    'block--' ~ elements['#id']|clean_class,
  ]
%}

Which gives you the following classes:

.block {}
.block--my-custom-module {}
.block--my-block-id-block {}
.block--myblockid {} 

Extra functions

Create the possibility to have plugin-specific preprocess functions.

So inside block--page-title-block.theme you could now have this function:

<?php

/**
 * Implements template_preprocess_hook().
 */
function compony_preprocess_block__page_title_block(&$variables, $hook) {
  // Do custom preprocessing here, 
  // only for the page-title block. 
}

(Docs: Extending hooks yourself)

This is the same as the Form component but with very basic CSS added.

Better classes

The classes on a form has been changed to:

{%
  set classes = [
    'form',
    'form--' ~ element['#form_id']|clean_class
  ]
%}

Which gives you the following classes:

.form {}
.forn--user-login-form {}

Extra template suggestions

Added a more specific template suggestion. One based upon the ID of the form.

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'form' -->
<!-- FILE NAME SUGGESTIONS:
   x form--user-login-form.html.twig
   * form.html.twig
-->

In above example:

• user-login-form is the ID of the form

Extra functions

Create the possibility to have form-specific preprocess functions.

So inside form--user-login-form.theme you could now have this function:

<?php

/**
 * Implements template_preprocess_hook().
 */
function compony_preprocess_form__user_login_form(&$variables, $hook) {
  // Do custom preprocessing here, 
  // only for the user-login-form. 
}

(Docs: Extending hooks yourself)

Some basic styling for local menu inks with a toggle for smaller screens.

Some extra's for node components.

Better classes

The classes on node has been changed to:

{%
  set classes = [
    'node',
    'node--type-' ~ node.bundle|clean_class,
    node.bundle|clean_class,
    node.isPromoted() ? node.bundle|clean_class ~ '--promoted',
    node.isSticky() ? node.bundle|clean_class ~ '--sticky',
    not node.isPublished() ? node.bundle|clean_class ~ '--unpublished',
    view_mode ? node.bundle|clean_class ~ '--' ~ view_mode|clean_class,
  ]
%}

Which gives you the following classes:

.node {}
.node--type--faq {}
.faq {}
.faq--promoted {} 
.faq--sticky {} 
.faq--unpublished {} 
.faq--full {} 

Extra functions

Create the possibility to have content-type-specific preprocess functions.

So inside node--faq.theme you could now have this function:

<?php

/**
 * Implements template_preprocess_hook().
 */
function compony_preprocess_node__faq(&$variables, $hook) {
  // Do custom preprocessing here, 
  // only for FAQ nodes. 
}

(Docs: Extending hooks yourself)

Extra template suggestions: one for entity type and one for the content type.

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'page' -->
<!-- FILE NAME SUGGESTIONS:
   x page--node--article.html.twig
   * page--node--37.html.twig
   * page--node--%.html.twig
   x page--node.html.twig
   * page.html.twig
-->

In above example:

• article is the content type of the node entity type 
• page--node.html.twig is already in place by Drupal, but doesn't always follow the correct BEM naming structure. For taxonomy-terms, Drupal will output page--taxonomy--term instead of page--taxonomy-term.

Some very basic theming for the pager component.

Some extra's for region components.

Better classes

The classes on paragraph has been changed to:

{%
  set classes = [
    'region',
    'region--' ~ region|clean_class,
  ]
%}

Which gives you the following classes:

.region {}
.region--footer {}

A flat approach to theming Drupal's status messages by the use of emoji SVG's.

Some extra's for taxonomy-term components.

Extra template suggestions

Added 2 more specific template suggestions. One for view mode and one for vocabulary name and view-mode for all taxonomy terms

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'taxonomy_term' -->
<!-- FILE NAME SUGGESTIONS:
   x taxonomy-term--faq--full.html.twig
   x taxonomy-term--full.html.twig
   * taxonomy-term--556.html.twig
   * taxonomy-term--faq.html.twig
   * taxonomy-term.html.twig
-->

In above example:

• full is the view-mode
• faq is the vocabulary name

Better classes

The classes on taxonomy-terms has been changed to:

{%
  set classes = [
    'taxonomy-term',
    'taxonomy-term--' ~ term.bundle|clean_class,
    view_mode ? 'taxonomy-term--' ~ view_mode|clean_class,
    view_mode ? term.bundle|clean_class ~ '--' ~ view_mode|clean_class,
  ]
%}

Which gives you the following classes:

.taxonomy-term {}
.taxonomy-term--faq {}
.taxonomy-term--full {}
.faq--full {} 

Extra functions

Create the possibility to have vocabulary-specific preprocess functions.

So inside taxonomy-term--faq.theme you could now have this function:

<?php

/**
 * Implements template_preprocess_hook().
 */
function compony_preprocess_taxonomy_term__faq(&$variables, $hook) {
  // Do custom preprocessing here, 
  // only for FAQ taxonomy-terms. 
}

(Docs: Extending hooks yourself)

Some extra's for views-view components.

Extra template suggestions

Added 2 more specific template suggestions. One for the name of the view and one for the display name of that view.

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'views_view' -->
<!-- FILE NAME SUGGESTIONS:
   x views-view--articles--last-published.html.twig
   x views-view--articles.html.twig
   * views-view.html.twig
-->

In above example:

• articles is the name of the view
• last-published is the name of the display used of the articles view

Better classes

The classes on taxonomy-terms has been changed to:

{%
  set classes = [
    'views-view',
    'views-view--' ~ id|clean_class,
    'views-view--' ~ id|clean_class ~ '--' ~ display_id,
    dom_id ? 'js-view-dom-id-' ~ dom_id,
  ]
%}

Which gives you the following classes:

.views-view {}
.views-view--articles {}
.views-view--articles--overview {}

// Drupal-supplied unique idendifier to be used by JS
.js-view-dom-id-683eb5bba {} 

Removes divs without classes, when using unformatted list in your view settings (screenshot 1) in combination with no views row classes (screenshot 2).

This is a CSS-only component to theme the output of wysiwyg.

This component can be loaded in conditionally from other components. 

It can be used for both frontend as backend when people are working in the wysiwyg.