Guide to Profitable Sales
Front-end Overview
What you are about to read is an overview of front-end in the context of a Content Management System like Drupal. If you aren’t familiar with front-end, it generally is considered the skeleton (HTML), skin (CSS), and actions (JS) of a website. It is distinguished from the backend where significan content is stored in databases and logic code is applied by some program like PHP at a server. If you want to know about front-end tools and development consider taking or reviewing this free video course.
Drupal Content Management System (CMS) is an integrated website platform. You select it because you have ‘Content’ that you wish to ‘Display’ in a user’s ‘Browser’ in a ‘Templated’ manner which has some consistency. A common example might be a newspaper which presents articles that have a title, subject, author, date, and story element consistently included in a template. You might use the ‘subject’ to reference the sports, financial, lifestyle, business, and other sections in your newspaper. In each of those sections you might ‘present’ the article in a slightly different style; font, color, size, etc. Drupal has all the parts needed to control and manage the integrated workflow of all this stuff.
Think of the workflow like this:
CSS & JS→Display in BrowserThe 'Content' is what you would write and it is stored in the 'Database' for each article in your newspaper. The Drupal 'PHP' core has the code not only for a content type called 'Article' but you probably have other content types for, the newspaper’s name, for advertisements, for your about the editor/publisher and contact each department type information, etc. And all that defines your newspaper to the database so it knows where to store different parts. And that also talks to the 'TWIG' layer which are templates for what goes in each region or section of your newspaper. How the look and feel of each section appear in their 'presention' is further managed by CCS or JavaScript(JS) that interact with the reader’s browser.
When we talk about the “Front-end” we are referencing the TWIG, HTML, CSS, and JS parts of your Drupal website that are key to managing how the content of your website is displayed. Drupal core offers a ‘theme’ layer for this display called “Olivero”. You might also use themes offered by others and “Bootstrap” is a common powerhouse. Underlying such themes is the “TWIG” templating engine and you can work with it directly. At a more advanced level, there is “Decoupled” Drupal which might use Vue, React, or some other browser level framework that reaches back into Drupal to grab content but that does a lot more independently. Consider your range of Drupal theming options
Olivero
Drupal comes with a standard theme automatically. The most current version of Drupal is using a presentation theme called Olivero. It is a relatively new addition that looks clean and modern. It has a nice menu approach, is responsive for different devices, and it known for its accessiblity. It is going through further updates but is ready out of the box for many uses. If you have come from things like Wix or are a frustrated WordPress user, Olivero as the default theme is the most current version of Drupal is well worth your trying.
Bootstrap
Bootstrap is one of the more common and powerful front-end frameworks. It opens up a ton of flexiblity to go your own way with the look and feel of your website. Flexibility is usually at the price of complexity and there is a little more to go this way. However, because it is so commonly used, a version of Bootstrap called Barrio is set up specifically for use in Drupal.
Alternatives
There are other alternatives that can be installed with Drupal. Right on the Drupal website under the ‘build’ menu option you will find themes listed and a search function to look at some. There are also commercially available themes but a watch out is that you need to be careful that the version of Drupal is supported before you buy one. And, you might end up doing as much work with these commercial themes as just using the free ones as your starting point.
Install Themes
Installing a base theme is a straightforward process. First, one theme came as default when you installed Drupal. To install a Drupal theme after you find it, you use composer just like you do to install Drupal modules. Keep in mind that you not only have to install it, but you need to set it as ‘default’ before it is the one that your website will be using. To do that you go into ADMINISTRATION/APPEARANCE and install and make default.
Customize It
The default theme files from Core are underneath the Core/themes subdirectory; YOU DO NOT EDIT ANYTHING IN CORE EVER! You can, however, copy stuff from core or from most ‘contributed themes’, into your own custom theme’s templates sub-directory (see last sub-directory listed in the red line section on this map). That is where any TWIG templates you will edit for your own unique proposes should be located. In addition to doing things to the TWIG template files, it is actually more likely that you will want to simply edit the CSS and JS (JavaScript) in your custom theme like this.
TWIG
PHP itself renders a first level of HTML output by delivering it to TWIG templates. Those TWIG templates really goose things up a notch in terms of HTML display of your content. Then, like in most website work, CSS and JS really leverage the power of display control.
Drupal themes have TWIG templates. Those templates are located in sub-directories under Drupal core are to display anything that you haven't overridden. You override them by installing ‘contributed themes’ in your themes sub-directory (see above note for location). YOU DO NOT EDIT EITHER THE CORE OR CONTRIBUTED THEMES! This is because any updates to either as you refresh your site would then overwrite your edits and your work is screwed… Rather, you make a custom theme in its own sub-directory. Drupal, being as smart as it is, starts looking first in your custom theme sub-directory for a template, then falls back to the base contributed theme, and finally to the core base theme for any template backups it needs. What that customization for your own unique purpose is called is creating a subtheme.
It is very common that you might find a template under your base theme that you might want to tweak in some way; either across all places it is used on your site or on a specific page or node. You are going to edit a copy of a twig template. TWIG templates are very similar to HTML with just three additional basic TWIG specific pieces of syntax; how to proceed with your own TWIG edits is outlined here.
Decoupled
Think of a de-coupled Drupal site as using something like a JavaScript(JS) framework like React or Vue and having it grab content from Drupal. There are some performance benefits of a JS client inactive deployment. There are also some breadth of device opportunities when we think of moving past computers, tables, and mobile to watches, smart TV’s, vitual, other devices, and AI. But all of these need the data or content and this brings in a real Drupal strength.
You probably should think of decoupled as a continuum rather than a cleaver. The front-end and back-end need to talk one way or another. There have been some bleeding edge attempts at decoupled Drupal and interesting bumps along the way. Excitement and reality have some tendency to diverge, so be careful on your approach.
Render Arrays
If you are more of a back-end developer and want to understand how Drupal is sending PHP messages to the front-end, you want to userstand Render Arrays.