3.2 Demonstrate knowledge of theming concepts

Previous3.1 Given a scenario, demonstrate ability to create a custom theme or sub theme.Next3.3 Demonstrate ability to use Twig syntax

Last updated 6 years ago

3.2 Demonstrate knowledge of theming concepts

Review Yml syntax. Review how to add libraries to your code base.

A theme is a collection of files that define the presentation layer. You can also create one or more "sub-themes" or variations on a theme.

The big change from Drupal 7 to Drupal 8 for theming is the change from PHP templates to twig and the use of yml "YAML" files. (See more about twig in the next few pages.)

CSS file organization

follows the categorization. (SMACSS = Scalable and modular architecture for css)

Base — CSS reset/normalize plus HTML element styling.
Layout — macro arrangement of a web page, including any grid systems.
Component — discrete, reusable UI elements.
State — styles that deal with client-side changes to components.
Theme — purely visual styling (“look-and-feel”) for a component

CSS file naming conventions

CSS files should be placed in a css/ directory and broken down by module, theme, and admin files.

Note: Modules should never have any base styles. Drupal core's modules do not have any base styles. Instead Drupal core uses the Normalize.css library augmented with a drupal.base.css library.
If a module attaches a CSS file to a template file, the CSS file should be named the same as the template file, e.g. the system-plugin-ui-form.html.twig CSS file should be named system-plugin-ui-form.css

YAML / YML

Syntax for yml is key : value
Use a colon as a separator
Tabs are NOT allowed. Use spaces ONLY.
Properties and lists MUST be indented by two (2) spaces.
Yaml files end in the .yml file extension.
In Drupal 7, modules needed a MODULE_NAME.info file. Now, in Drupal 8 requires a MODULE_NAME.info.yml

Key/Value pairs

For example

name: Hello World Module
description: Creates a page showing "Hello World".
package: Custom

type: module
core: 8.x

Libraries

Sometimes a site will require an external library. Libraries can be defined 3 different ways, within a theme, on a single page, or on a subset of pages with a preprocess function.

Define library within a theme:

slick:
  version: 1.0.0
  css:
    theme:
      stylesheets/ui/slick-rotator.css: {}

In the above example the theme key is for visual styling for a component. You can assign weights, or specify a theme. Therefore, in this example the asset/library slick has defined a css file included inside of the slick module directory.

Define a library on a single template:

External libraries can increase the weight of a project and slow down a site's performance. If a custom javaScript library only needs to load on a single template, it might make sense to attach the library to only that template. For example, if you add attach_library to the top of twig template file, the library will only load whenever that twig template is used.

{# Place attach_library in a twig template. #}

{{ attach_library('THEME_NAME/library-name') }}

Define a library on a subset of pages:

There can also be instances where you only need to add a library to a specific set of pages instead of every page. You can accomplish this with a preprocess function added the THEME_NAME.theme file.

function MY_THEME_page_attachments(array &$attachments) {
  if (!\Drupal::currentUser()->hasPermission('access contextual links')) {
    return;
  }

  $attachments['#attached']['library'][] = 'contextual/drupal.contextual-links';
}

This is comparable to the Drupal 7 method of adding preprocess functions to the template.php file.

Other Resources

Previous3.1 Given a scenario, demonstrate ability to create a custom theme or sub theme.Next3.3 Demonstrate ability to use Twig syntax

Last updated 6 years ago