Starting from the bottom, Drupal 8 Theming with Twig will walk you through setting up and configuring a new Drupal 8 website. Navigate across the admin interface, learn how to work with core themes, and create new custom block layouts. Take a real-world project and create a Twig theme that adopts best practices to implement CSS frameworks and JavaScript libraries. See just how quick and easy it is to create beautiful and responsive Drupal 8 websites along with avoiding some of the common mistakes many frontend developers run into.
If you consider yourself a frontend developer, you will be right at home. However, since no PHP knowledge will be necessary, anyone who can create HTML websites with basic HTML5 and CSS3 skills will learn how to create a great Drupal 8 theme.
Chapter 1, Setting up Our Development Environment, will begin with walking you through setting up a development workflow. You will learn how to use an AMP (Apache, MySQL, PHP) stack to configure a local web server. We will introduce the process of installing Drupal 8 and walk through the admin interface in preparation for working with the new Twig templating engine.
Chapter 2, Theme Administration, provides a glance at the Appearance page, where you will learn how to install, uninstall, and configure various themes and settings. We will take a look at the new Block layout system as we explore how to add fields to blocks, reuse blocks, and assign chunks of content to various regions. Learn how Drupal 8 has reconfigured files and folders, where themes are now placed, and how to find core themes.
Chapter 3, Dissecting a Theme, begins with discussing the importance of a proper development environment and the steps involved to ensure that you're ready for Drupal 8. This will help you learn the differences and similarities between core and custom themes and how configuration has changed. Break down the metadata that makes up a theme, libraries, and regions. You will learn the role of templates and how the theme layer interacts with the Twig templating engine.
Chapter 4, Getting Started – Creating Themes, starts with creating a starter theme that allows us to work with assets while learning common techniques to integrate various CSS frameworks. You can learn how to rethink layout strategies as we dive into the theme layer and work with Twig. Then, we will wrap up with creating a subtheme that extends the new Classy base theme.
Chapter 5, Prepping Our Project, covers reviewing a real-world project that we will be building and how to break down how design and functionality should come together in Drupal 8. We will create the new theme structure, define metadata, add regions, and implement several CSS and JavaScript libraries.
Chapter 6, Theming Our Homepage, begins with working with the site branding block to add a logo. We will create a basic HTML wrapper and homepage template using Twig as we convert our homepage mockup into a fully functioning Drupal 8 front page. You will learn how to convert static markup into Twig variables as we theme global components, such as the Search block, menus, and custom blocks. Use the new libraries.yml file to work with assets, such as Twitter Bootstrap and Flex Slider and then attach them to specific templates using the new {{ attach_library() }} function.
Chapter 7, Theming Our Interior Page, will show you how to review mockups and identify what regions, blocks, content types, and views will need to be developed to recreate functionality. You will learn how to reuse Drupal 8 regions, work with the new Page title block, and how Twig plays an important part in rewriting Views output.
Chapter 8, Theming Our Blog Listing Page, starts with the best practice approaches to managing content types. From adding new display modes to enabling and formatting fields, learn how to use content display modes with Views to display data in lieu of using fields directly. You can work with Node templates to add CSS classes directly to our markup, work with content variables, and learn how to suppress fields. You will use Twig filters to format dates and manage individual field templates while creating a listing page.
Chapter 9, Theming Our Blog Detail Page, teaches us how to reuse Twig templates and display different content simply by using file name suggestions to target-specific display modes. You will work with the new comment types to add commenting functionality to pages as fields, learn how to alter comment display using field templates to theme comment threads, and add social sharing functionality to pages using custom blocks and JavaScript libraries that we can attach directly to a block.
Chapter 10, Theming Our Contact Page, introduces contact forms in Drupal 8 that we can use to create fieldable forms that users can interact with. You will learn how to integrate Google Maps into custom blocks that take advantage of library assets and vendor JavaScript.
Chapter 11, Theming Our Search Results, covers core search functionality, how to index database content, and work with search results templates. Core search can sometimes be limited, so we will take a more advanced look at the Search API module to create a better search experience. You will learn how to add individual fields to search and use display modes to output content while creating a Search view that allows us to expose filters to the users to find exactly what they are looking for.
Chapter 12, Tips, Tricks, and Where to Go from Here, introduces how to theme common admin sections of Drupal 8. You will learn how to modify the markup for local tasks and status messages. Reuse Twig templates using extends to share layouts while working with pages and blocks. Finally, we will leave you with some great contributed modules to take a look at and introduce you to the Drupal community.