Drupal 8 Theming

Opdracht PE

Briefing

Goal

  • Build own custom D8 theme
    • built on the Umami Demo content
  • Understand structure of a D8 theme
  • Understand how to apply and modify twig templates
  • Understand how to integrate javascript in a D8 theme
  • Using best practices and coding standards

Briefing

Requirements

  • Selfmade theme

  • Apply correct structure

  • Use modified twig templates

    • no excess: f.e. include title in node.twig.html

  • Implement a javascript solution

    • F.E.: slideshow, colorbox, codeblock, ​etc

    • Using module solutions is not allowed, unless it requires CMS modification: a good reason is required (for this course)

  • Using best practices and coding standards

Briefing

Requirements cont.

 

  • Website pages

    • Homepage

    • Recipes

    • Articles

    • Detail pages

    • Contact page

 All these pages need to be properly styled.

Briefing

Scoring points

Basic

Intermediate

Advanced

Basic - 6/12

  • Create working theme
    • .info.yml
    • .libraries.tml
  • Add CSS/JS
  • Define regions
    • In page.html.twig & .info.yml

Intermediate - 10/12

  • Use basic twig debugging
    • for template suggestions
  • Use templates
    • Define theme template files
    • Add own markup html
  • Define specific libraries
    • and include in template
    • F.E.: for a slideshow
  • Use behaviors for JS

Advanced - 12/12

  • Use kint debugging
    • Printing specific items
    • F.E.: Link to url; content.field_image['#items'].entity.uri.value
  • Use .theme file
    • Add theme suggestions
    • Alter output
  • Define custom settings
  • Apply code standards

Briefing

Submit by

05/11/2018

Through Toledo

 

What to submit?

  1. Upload theme contents as a zip-file

    • Optional:

      • Include .txt file with link to hosted site

  2. Bring code to the oral evaluation (January)

Briefing

Evaluation will be on

TBD

 

More information to follow later

Made with Slides.com