Choosing a theme isn’t easy. There are a lot of choices including various free starter kits, non-standard page-builder themes, low cost commercial themes, and higher cost premium themes, such as what we sell.
Below we created a checklist you can use for any theme, regardless of vendor. We’ve included notes on how Dripyard addresses each topic so you can compare objectively.
Features
Does the theme style the normal Drupal user interface items such as pagers, breadcrumbs, the node preview toolbar, etc?
Like most content management systems, Drupal will expose various patterns on the front-end including items like the node preview toolbar, exposed filters, as well as more standard components like pagers, breadcrumbs, etc.
All Dripyard themes come with built-in styling for all of these items to make sure your site looks and operates as your customers expect.
Does the theme properly style Drupal’s plethora of table options, such as sticky headers, sorting, responsive tables?
Drupal core comes with many options when creating table based Views. This includes sticky headers, the ability to sort columns, hiding less important columns at smaller screen widths, etc.
Dripyard themes support all of these out of the box with no additional configuration needed (which is no small feat!). We go above and beyond what Drupal core provides to ensure a beautiful appearance, amazing functionality that your customers expect.
Are the components in your theme responsive only to the screen size, or their container size?
Modern page building tools such as Drupal Canvas mean that your theme’s components might be nested within other components. This makes the design much more flexible, but the components need to be ready for this. Can they adapt to the size of the container that they’re placed in?
All relevant Dripyard components heavily utilize container queries (and other methods where appropriate) that allow our themes’ components to behave like you and your customers expect when placed into smaller areas such as a sidebar, or another component.
What level of nesting do the themes support within its navigation?
It’s important to properly categorize your website’s content so your customers can easily find what they need. All Dripyard themes support a minimum of three levels of nesting in our navigation components, which is even more that Drupal core provides.
Can you easily adjust the theme to support your company’s brand?
Dripyard themes come with various theme settings where a content editor can change the primary colors, upload a logo, change border radiuses, and many other options. Hundreds of more options are exposed as CSS variables that allow you to easily override design tokens at a macro or micro level.
Can the theme adapt to your content architecture?
Dripyard themes are completely component driven, which means you can wire your data into the components, no matter what architecture you’re using, be it the Paragraphs module, Layout Builder, or something else.
Is the theme compatible with Drupal Canvas?
Dripyard themes aren’t just compatible with Canvas, they’re built for Canvas. We’re not just following best practices, we’re creating them when it comes to Canvas.
Does the theme support commonly used modules?
Dripyard’s themes have additional styling for when commonly used modules are invoked such as Better Exposed Filters, Coffee, Search API, etc.
Accessibility
It’s vitally important that your website is available to all potential customers. And in many jurisdictions, such as the US, or EU, this is mandated.
What level of Accessibility conformance does the theme meet (if any)?
WCAG, or Web Content Accessibility Guidelines, are internationally recognized guidelines for making web content more accessible to people with disabilities. Various laws in the US and EU make conformance with certain levels mandatory.
Dripyard themes meet or exceed WCAG 2.2 AA guidelines (see our accessibility page for more information and limitations). We don't just do the minimum for accessibility, we go above an beyond to exceed expectations, guidelines, and make your site a delight to use for everyone.
Are the focus states apparent?
Focus states let the user know what control (link, button, text input, et al) currently is available to use with the keyboard. This is vitally important for those using keyboard navigation (tabbing) or using a myriad of accessible technologies such as switches.
All Dripyard themes are thoroughly tested for accessibility focus states to ensure that they are apparent and go above and beyond to meet the WCAG 2.2 AAA requirements for focus thickness and contrast ratio.
Do all controls have labels?
Buttons with icons need to have accessible names to ensure they’re understandable to users with assistive tech such as screen readers.
All Dripyard themes' controls are tested to make sure that every control is understandable to those with assistive technology through use of visually hidden text, aria labels, and other techniques.
Does the theme support forced colors mode / Windows high contrast?
Windows High Contrast is an operating system setting that enables all websites to use “forced colors” mode. This mode changes background, text, and border colors to use system colors that are defined by the OS. According to Microsoft, over 4% of Windows users have used this.
All Dripyard themes are tested in forced colors mode (in both light and dark themes) to ensure that they are usable in forced-colors mode. We heavily utilize techniques such as transparent borders, the forced-colors media query, and more to make sure they’re compliant.
Are the menu systems keyboard navigable?
Menu systems are without a doubt the most complicated and important component on your website. They are on every page, and are typically two components in one: one for mobile and one for desktop. It’s vitally important that users of accessible technologies can navigate around your website and understand it.
All Dripyard themes’ menu systems are navigable as expected. We inject <button> elements where necessary to provide disclosure toggles, and use ARIA states as appropriate to indicate states to assistive tech.
Does your theme’s color system provide guardrails to help maintain proper WCAG contrast?
WCAG 2.2 AA standards dictate that text must meet minimum contrast standards.
All Dripyard components utilize a color system that helps ensure proper 4.5:1 text contrast levels meeting and exceeding the minimum requirements.
Does your theme limit animations to those who indicate that they want them disabled?
Most operating systems come with settings to reduce animation. It’s vitally important (and required for WCAG conformance) to respect this.
All Dripyard themes respect this setting though the prefers-reduced-motion media query. We limit animations, and even use this media query to stop autoplaying videos, smooth-scroll, and JavaScript animations.
In the code sample below, you can see how JavaScript is checking for prefers-reduced-motion before animating the statistics component.
/**
* Looks through the element and sets up each individual stat if browser
* setting is not set to reduce motion.
*
* @param {HTMLElement} el - The entire stats component's HTML element.
*/
function init(el) {
if (!window.matchMedia('(prefers-reduced-motion)').matches) {
el.querySelectorAll('.stat__stat').forEach(incrementNumberWithinText);
}
}
Drupal.behaviors.statCounter = {
attach(context) {
once('statistics', '.stat', context).forEach(init);
},
};Best practices & architecture
Best practices ensure that your theme is maintainable for the long term, and make it easy for new developers to get up to speed on your codebase.
Is the theme componentized?
Drupal 10.1 introduced the concept of Single Directory Components to Drupal core. This paradigm allows you to group markup, JavaScript, CSS, and component definitions into one directory, which makes development radically easier, improves performance, and allows easier integration with multiple content architectures.
All Dripyard themes heavily utilize Single Directory Components where appropriate to take advantage of all these benefits.
Does the theme properly utilize JavaScript APIs such as Drupal behaviors and Drupal.displace()?
Drupal behaviors ensures that JavaScript correctly processes markup that gets injected into the page via AJAX (nowadays HTMX). Drupal.displace() ensures that the theme can detect and respond to Drupal admin components that are fixed to the top of the page.
All Dripyard themes heavily utilize Drupal behaviors and use Drupal.displace() when necessary, which ensures that the theme behaves exactly as you’d expect!
Support
What type of support can you get for this theme?
How easy is it for you to get bugs fixed, or get updates?
Dripyard themes come with 2 months of support included with purchase, with options to extend. This gives you access to continuous updates, and a private Slack instance. For more detailed information, checkout our support page.
Are there recurring costs or licensing fees?
Many themes have a licensing server, where as soon as you stop payment, they can disable functionality of the theme.
Dripyard themes have no licensing server, and the only recurring costs are for optional support.
How can you update the theme if you’ve customized it?
More often than not, you’ll want to customize your theme to make it your own.
Dripyard themes ship with a built in subtheme that allow you to override any of the parent theme’s settings or styles. Because all changes are kept within the subtheme, you’re free to update the parent theme as needed.
What type of documentation is available?
Documentation is vital to your customization of the theme, and saves you valuable time during your development process. Every single Dripyard component comes with its own documentation explaining its slots, props, CSS variables, accessibility considerations and more!
Performance
Web performance guru Steve Souders has a famous golden rule that says “80-90% of the end-user response time is spent on the frontend.” How does your Drupal theme stack up?
Does the theme load the CSS and JS granularly?
Loading the theme’s CSS and JavaScript only when needed ensures that page load times are quicker, and the browser spends much less time processing expensive JavaScript and doing layout operations.
All Dripyard themes are componentized, and will load the respective CSS and JavaScript only when necessary.
Does the theme depend on outdated libraries such as Bootstrap or JQuery?
Libraries such as Bootstrap, JQuery were useful many years ago, but modern CSS and JavaScript techniques negate the need for these legacy libraries. Furthermore older libraries, can add performance hits as the browser needs to download, parse, and execute them prior to displaying the page.
All Dripyard themes are built on the web standard. This means we use vanilla CSS and JavaScript with no build steps. This means quicker downloads and rendering, and much less technical debt from maintaining the older libraries.
Does the theme preload fonts and utilize the font-display property?
Preloading fonts ensures that the browser pulls in the fonts as soon as possible. This negates any layout shifts or flashes of unstyled content that can occur if the page loads prior to the fonts being downloaded.
All Dripyard themes make use of font preloading, as well as the font-display CSS property to ensure that critical fonts are downloaded in time to be rendered during the browser's first paint.
Conclusion
Your website’s users deserve to be delighted by the beauty, performance, and usability of your website. Building a beautiful, accessible, and properly architected Drupal theme isn’t an easy task, but with the checklist above, you can evaluate your choices and learn how Dripyard’s themes will meet your requirements.
Thank you to James Sansbury from Tugboat for suggesting this topic.
