Drupal
min read
January 17, 2023

Drupal Front-End Grooming for Beginners

Drupal Front-End Grooming for Beginners
Table of contents

Front-end development takes care of the user interface on the website. It will manage the style, look and feel of the website and everything you see on a webpage, like forms, buttons, links, and more. It is the front-end developer's job to take the design concept from the design file and implement it. 

A themer, also known as a front-end developer, sits between the designer and the developer on a project. They are responsible for the architecture and implementation of the client-facing parts of the website. It includes working with HTML, CSS, JavaScript, and related technologies.

List of prerequisite tech stack for front-end developers

HTML5

CSS3

JavaScript - ES5, ES6, jQuery, Typescript, and JS Frameworks (REACT & Angular)

Templating - Twig

Package managers - NPM and Yarn

CSS Preprocessors - SASS and LESS

CSS Frameworks - BootStrap

Build Tools - Task Runners (Gulp & Grunts), Module Bundlers (Webpack), and Linters & Formatters (ES Lint & JS Lint)

Performance - Chrome Devtools

CMS - Drupal

API Server - Nodejs and Drupal 

 

A front-end developer crafts HTML, CSS, and JS that typically runs on the web platforms (web browsers) delivered from one of the following operating systems.

  • Android
  • Chromium
  • iOS
  • OS X (macOS)
  • Ubuntu (or some flavor of Linux)
  • Windows

These operating systems run on one or more of the following devices:

  • Desktop Computer
  • Laptop
  • Mobile phone
  • Tablet

Setting up development requirements

VS Code intro & setup 

Visual Studio Code, the most popular source code editor, is lightweight but powerful. It is optimized for building & debugging modern web applications. VS Code helps you be instantly productive with syntax highlighting, bracket-matching, auto-indentation, box selection, snippets, and more.

Watch this video on how to set up visual studio code for web developers.

Link:

VS Code Intro & Setup


Learn to use Version Control System

Git is a free & open-source distributed version control system for tracking changes in computer files and coordinating work on those files among the development team. When working on big projects, it is not possible to copy and create multiple versions of the hundreds of files present. The version control system helps to streamline this process.

Watch some videos of Git to understand how it works.

Link:

Git and GitHub Introduction

Learning front-end development from scratch

Create structure with HTML

HTML is a hypertext markup language for creating web pages. We create the structure of the web pages using HTML. Every front-end developer should practically know how to build a web page structure with HTML and all about HTML5 Tags, Semantic Tags, Formatting Tags, HTML Block & Inline Elements, HTML Form Attributes, and HTML Media Tags.

Links:

HTML Element Reference 

Responsive Web Design 

Style with CSS 

CSS stands for cascading style sheets. Learn CSS to set the layout (UI) of the web page with beautiful colors, fonts, styles, and more. Front-end developers should have a strong understanding of setting the web page layout (UI) with attractive styling. Developers should have hands-on practice with all CSS Selectors, like Combinators, Pseudo classes, Pseudo elements, and Attribute Selectors. Learn about Specificity in CSS, Box Model, CSS box-sizing Property, and Units.

Links:

CSS Tutorial 

Basic CSS


SCSS (CSS preprocessor) 

SCSS is a syntactically awesome stylesheet. It is a preprocessor scripting language, interpreted or compiled into cascading style sheets. SCSS lets you use variables, mathematical operations, mixins, loops, functions, imports, and other functionalities that make CSS more powerful.

Links:

Sass Tutorial for Beginners

SASS

JavaScript

JavaScript adds interactivity to web pages. Basic JavaScript is required to make static web pages dynamic and interactive. Learn the scope and difference of Var, Let & Const keywords, Operators, Loops & Arrays, Functions with Arrow & Map function, etc.

Links:

Learn JavaScript

JavaScript Algorithms and Data Structures

jQuery basics for beginners 

jQuery is a small & lightweight JavaScript library. It is designed to simplify HTML DOM tree traversal and manipulation, event handling, animation, and Ajax.

Links:

jQuery Tutorial

jQuery

Responsive design concepts

A front-end developer should know how to make a website responsive on all devices. Developers should know how to write the CSS media query and define different style rules for different media queries.

Learn responsive web design & media query

  • CSS media query in the stylesheet
  • Understand the right approach for media Query
  • Understand Width & Device width


Link:

CSS Media Queries

Gulp

Gulp is a tool often used to do front-end tasks like spinning up a web server, reloading the browser automatically whenever a file is saved, using preprocessors like Sass or LESS, and optimizing assets like CSS, JavaScript, and images. Tools like Gulp are often referred to as “build tools” as they are used to build a website.

Link:

Gulp for Beginners 

Grooming in Drupal front-end development

Drupal themers use PHP in template files, and Twig in Drupal 8. Advanced front-end developers will often create “glue code” modules, or functions in PHP that expose configuration options to site builders.

Links:

Theming Drupal

What Is a Theme 

Essential skills to learn 

Drupal installation

  • Install Drupal on your computer: composer update "Drupal/core-*" --with-all-dependencies
  • Setup the local development environment: ddev or lando


Theming

  • Download, install, and uninstall the contrib theme.
  • Define a new theme with .info file.
  • Create a custom theme, and add & print some regions in your theme.
  • Check the core themes.
  • Make a new sub-theme from the base theme, create some CSS and JS files, attach it, and override any template file.


Asset libraries

Links:

What Are Asset Libraries

Define an Asset Library

Attach an Asset Library


Hooks for Drupal theming

Preprocess functions allow Drupal themes to manipulate the variables used in Twig template files by using PHP Functions to preprocess data before it is exposed to each template. Developers should know how to find the list of valid theme hook suggestions for any template file and enable the Twig debugging mode to discover available theme hook suggestions. 


Twig in Drupal 

Twig is the default engine for Drupal. If you want to make changes to the output markup in Drupal, you need to know Twig. It is a template engine for PHP, that allows an app or system like Drupal to separate the concerns of functional “business” logic and the presentation or markup of the resulting data. 

Links:

Working With Twig Templates

Twig in Drupal

Twig Syntax Delimiters

Arrays & Objects in Twig

Loops & Iterators in Twig

Print Values from a Field with a for Loop

Twig Filters & Functions

Whitespace Control with Twig

Handling Translations in Twig

HTML Classes & Attributes in Twig Templates

Twig Template Inheritance

Make Strings Translatable


JavaScript in Drupal

Developers writing JavaScript in Drupal should use Drupal.behaviors API when writing their custom JavaScript functionality. Doing so ensures that your JavaScript is executed at the appropriate times during the lifecycle of a page, such as when the page loads, or after new DOM elements have been added via an AJAX request.

Links:

Load JavaScript in Drupal with Drupal.behaviors

Wrap your Custom JavaScript in a Closure

Use Drupal.theme for HTML markup in JavaScript

String Manipulation in JavaScript

Use Drupal.t() for Translatable Strings in JavaScript

Pass Data from PHP to JavaScript in Drupal 

Improving front-end performance 

Web performance is all about making websites fast. Web performance refers to how quickly site content loads and renders in a web browser and how well it responds to user interaction.

  • Aggregate JavaScript and CSS.
  • Minify JavaScript, CSS, and HTML.
  • Leverage browser caching and enable gzip compression.
  • Specify image dimensions.
  • Optimize images & leverage breakpoints to download appropriate image sizes.
  • Use lazy loading for site assets.
  • Keep inline background images under ~4KB in size.
  • Remove unused CSS & use efficient CSS selectors.


Link:

Front-End Performance 

Conclusion

Drupal Front-End Development (Theming) primarily focuses on User Experience (UX). Developers can use fewer coding and design techniques to make complex websites and attractive User Interfaces (UI) easily. 

If you want to attempt the Acquia Drupal Front-End Specialist Certification, explore Preparing For Drupal FE Specialization Certificate.

Written by
Artwork by
No art workers.
We'd love to talk about your business objectives