Component-based Development
  • Welcome!
  • What you will build
  • Chapter 1
    • Local Setup
  • Chapter 2
    • Drupal theme and Front-End Tools
  • Chapter 3
    • Components architecture
    • Best practices
    • Drupal attributes
    • Twig embeds
  • Chapter 4
    • Building Components
      • Eyebrow
      • Heading
      • Button
      • Components Variations
      • Movie Card
      • Drupal Libraries
      • Featured Movie
      • Movie Card Collection
      • Movie List
      • Other components
  • Chapter 5
    • Building the back-end
      • Taxonomy
      • Image Styles
      • Content Types
      • View
      • Paragraph Type
  • Chapter 6
    • Integrating components
      • Movie Card
      • Featured Movie
      • Movie Card Collection
      • Movie List
      • Movie full display
  • Chapter 7
    • Resources
Powered by GitBook
On this page

Was this helpful?

  1. Chapter 2

Drupal theme and Front-End Tools

PreviousLocal SetupNextComponents architecture

Last updated 6 years ago

Was this helpful?

In a fast moving industry like ours, it is imperative that we have tools that allow us to build environments (front and back-end), quickly while providing consistency. The same way we have DevOps processes for quickly spinning off a complete Drupal website built with composer, Drush, Drupal Console and more, we need a system that automates the Drupal theme creation process in an effort to provide all the essential tools needed for a modern, best practices, and standards compliant front-end environment.

The local environment we provide for this training already includes a fully functional Drupal 8 theme, which includes the following Front-End tools:

  • : Design system to build a living style-guide.

  • : A Javascript runtime system used by most modern apps today.

  • : Node Version Manager .

  • : Node Package Manager to manage node dependencies.

  • : Task runner to automate repetitive tasks such as code compile and more.

  • : Allows to generate breakpoints using media queries.

Pattern Lab
NodeJS
NVM
NPM
Gulp
BreakpointsJS