Frontend development at Axelerant #

When building Frontend interfaces for Drupal or JavaScript applications, we like to use the right tools and practices. These help reduce cycles in development and assist us in delivering the consistent solutions.

Theme

Theme #

When generating a new theme, we recommend using the create-drupal-theme tool. This will help generate the theme with all the relavant configurations and tools.

You can find a detailed video walkthrough of the tool here.

Guideline

Review Guidelines #

HTML and Twig #

Indent by 2 spaces at a time. Don’t use tabs or mix tabs and spaces for indentation. Rely on tools like editorconfig.
All code has to be lowercase. This applies to HTML element names, attributes, attribute values (unless text/CDATA), CSS selectors, properties, and property values (with the exception of strings).
Remove trailing white spaces. Trailing white spaces are unnecessary and can complicate diffs.
Explain code as needed, where possible. Use comments to explain code: What does it cover, what purpose does it serve, and why is the respective solution used or preferred?
(This should be required along with HTML, CSS, Javascript ….)
Use HTML according to its purpose. Use elements for what they have been created for. For example, use heading elements for headings, p elements for paragraphs, an a element for anchors, etc.
Using HTML according to its purpose is important for accessibility, reuse, and code efficiency reasons.
For multimedia, such as images, videos, and animated objects via canvas, make sure to offer alternative access. For images that means the use of meaningful alternative text (alt) and for video and audio transcripts and captions, if available.
For file size optimization and scannability purposes, consider omitting optional tags. The HTML5 specification defines what tags can be omitted.

CSS and Sass #

Separate words in class names by hyphens or underscores. Do not concatenate words and abbreviations in selectors by any characters other than hyphens or underscores, in order to improve understanding and scannability.
Use transform animations instead of width, height, top, and left to optimize rendering.
Avoid qualifying class names with type selectors. Unless necessary (for example with helper classes), do not use element names in conjunction with classes.
As CSS supports variables, it must declare root variables where it is required.
For complex DOM placements to show the difference between desktop and mobile prefer CSS Grid instead of Javascript.
Try to avoid !important.
Avoid id attributes. Prefer class attributes for styling and data attributes for scripting.
Avoid unnecessary ancestor selectors as it affects the rendering performance.
Use shorthand properties where possible as it helps with code efficiency and readability.
Do not use units after 0 values unless they are required.

Declaration order #

If declarations are to be consistently ordered, they should be simple to understand among the team. CSS properties order is enforced through a stylint rule package.