Drupal Front-End Grooming for Beginners
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.
List of prerequisite tech stack for front-end developers
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.
- OS X (macOS)
- Ubuntu (or some flavor of Linux)
These operating systems run on one or more of the following devices:
- Desktop Computer
- Mobile phone
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.
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.
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.
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.
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.
jQuery basics for beginners
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
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.
Essential skills to learn
- Install Drupal on your computer: composer update "Drupal/core-*" --with-all-dependencies
- Setup the local development environment: ddev or lando
- 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.
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.
- Add a new variable to a template file through the preprocess function & print it in the template file.
- Add the new theme suggestion & use that to override any template file.
- Add a preprocess function in your sub-theme
- Inspect variables available in template: kint(), dump()
- Change variables with preprocess functions
- Add a new variable to a template file
- Discover existing theme hook suggestions
- Add a new theme hook suggestion
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.
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.
- 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.
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.