Drupal Design Systems

In this project, I demonstrate what design system are used and how works with Drupal.

To be able to do that, I used previously developed themes

Table of Contents

• Setting Form Based Most Simplest Design System
• Component Based Design System
• Atomic Design System with Emulsify

Setting Form-Based Most Simplest Design System

Startuprr

Startuprr Landing Page Theme is built for companies that only have one landing page and a contact form. In this theme, I only used core theme functionality and the power of the twig tweak module to be able to get some Drupal settings easily.

Integrating plain HTML to drupal gives all power of drupal to your static website. With drupal's power, you can extend your theme easily even if it's just one landing page. You can integrate your webform to any CRM application or you can do anything with a well-knowledged drupal developer.

Startuprr (Preview)

Startuprr Setting Form

Component Based Design System

This approach is much more appropriate who have lots of similar pages/layouts but don't want to re-develop or re-update the same component again and again. With that approach, you can reuse preexisting components on any page.

TTravel (Preview)

TTravel Component Placement

Easy to reuse components with the power of paragraph module.

TTravel Component Structure

With the power of the Drupal Paragraph module, this approach is possible. This Patch is used for exploring and automatically including sublibraries within theme folders.

Atomic Design System with Emulsify

Atomic Design System is best for big companies that have lots of sub-websites or pages and want to use similar UI components. For more detail please check the Emulsify's Github Page

Thank You!