Duration
40 min
Speaker(s)
Full name
Alexandros Pertsinidis
Gender Pronouns
He/Him
Company
Web-Thread,
Drupal name link
LinkedIn url
Session track
Coding & Site Building
Experience level
Intermediate
Stop over-engineering your UI! Learn how to ship high-impact features—like auto-anchors, node navigation, color library swatches, and JS-free widgets—using modern CSS and Drupal Recipes. Elevate your site-building game with lightweight, accessible solutions that users (and developers) will love.
Prerequisite
Participants should have an intermediate understanding of Twig, Drupal Site Building, and a basic familiarity with the Drupal Recipes API, Modern CSS (Flexbox/Grid) and Vanilla JS.
Outline
In this session, we move away from "heavy" contrib modules and complex JS libraries in favor of native web standards and Drupal’s new Recipe system. We will explore three practical areas of enhancement:
- The Contextual Anchor System: A dive into creating automatic anchor links within Drupal’s contextual framework, utilizing
scroll-behavior: smoothfor a seamless UX without the JS overhead. - The Color Library: How to transform a standard taxonomy into a robust Color Library. I will demonstrate how to render real color swatches within node edit forms using custom Twig templates and CSS.
- Node Navigation: How to build high-performance Next/Previous links using Vanilla JS and Views. I will demonstrate how to offload navigation logic to the client side using a hidden data block to create circular navigation without heavy database queries.
- The "No-JS" Widget Library: A showcase of essential UI components (Partner Carousels, Modals and Modern Lightweight Share Widget) built exclusively with modern CSS.
- The Package Delivery: I will show how these are packaged into Drupal Recipes + Files + Instructions, providing a GitHub repository so you can "apply" these features to your site.
Learning Objectives
- How to implement smooth-scrolling internal anchors with minimal code.
- Techniques for creating visual "Swatch" selection widgets using Taxonomy and Twig.
- Techniques for implementing lightweight, looping navigation using hidden Views and Vanilla JavaScript.
- Building interactive components (Modals/Carousels/Share) using CSS-only logic to improve performance and accessibility.
- How to package and share site-building configurations using the Drupal Recipe API.
