Drupal Gin Admin Theme: The Past, The Present & The Future

A presentation at DrupalCon Europe 2021 in October 2021 in by Sascha Eggenberger

Slide 1

Slide 1

GIN ADMIN THEME THE PAST, THE PRESENT & THE FUTURE DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 2

Slide 2

Sascha Eggenberger Senior User Experience Designer @ Unic AG sascha.is • @saschaeggi DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 3

Slide 3

STRUCTURE OF THIS TALK 01 02 03 04 DRUPALCON EUROPE 2021 THE PAST THE PRESENT THE FUTURE Q&A @SASCHAEGGI

Slide 4

Slide 4

THE PAST A SHORT HISTORY LESSION DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 5

Slide 5

2019 ☝ HISTORY DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 6

Slide 6

Gin started as a customisation layer for Claro DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 7

Slide 7

Branding needs The initial goal was to brand the UI for specific clients DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 8

Slide 8

DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 9

Slide 9

DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 10

Slide 10

Branch 2.x Compatible with Drupal 8.8+ DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 11

Slide 11

DrupalCon Amsterdam We, the design team behind Claro, showcased Drupal’s «Future UI» DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 12

Slide 12

DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 13

Slide 13

People «need» a Darkmode https://i.giphy.com/media/2W8bEBGjSsRFu/giphy.gif

Slide 14

Slide 14

2020 ☝ HISTORY DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 15

Slide 15

COVID-19 hit the world And I finally had more time to contribute while staying at home DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 16

Slide 16

Development of 3.x-dev started (Gin as we know it today) DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 17

Slide 17

DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 18

Slide 18

2021 ☝ HISTORY DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 19

Slide 19

More people started to contribute and the adaption skyrocked DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 20

Slide 20

THE PRESENT WHAT’S THE CURRENT STATE? DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 21

Slide 21

FEATURES DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 22

Slide 22

Gin evolved as a full-fledged theme with a strong focus on the Editorial Experience DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 23

Slide 23

DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 24

Slide 24

The ability to customise the experience for your (clients) needs DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 25

Slide 25

DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 26

Slide 26

DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 27

Slide 27

User settings Settings can be individually overridden by users DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 28

Slide 28

DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 29

Slide 29

gin-custom.css CSS overrides DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 30

Slide 30

ECOSYSTEM DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 31

Slide 31

Gin Toolbar drupal.org/project/gin_toolbar DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 32

Slide 32

Gin Login drupal.org/project/gin_login DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 33

Slide 33

Gin Layout Builder drupal.org/project/gin_lb by christian.wiedemann DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 34

Slide 34

Gin Gutenberg drupal.org/project/gin_gutenberg by doxigo DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 35

Slide 35

FACTS & FIGURES DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 36

Slide 36

11,000+ Site installations according to Drupal.org DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 37

Slide 37

Most installed Admin Theme for Drupal 9 DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 38

Slide 38

Thanks y’all for using it! 🥳 https://i.imgur.com/Fcc9RR5.gifv

Slide 39

Slide 39

Still Alpha Gin didn’t made the jump to Beta yet DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 40

Slide 40

Beta 1 Was scheduled for Q1 2021 DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 41

Slide 41

But as you might know it didn’t happen https://i.giphy.com/media/T1WqKkLY753dZghbu6/giphy.gif

Slide 42

Slide 42

Beta 1 Was re-scheduled for Q3 2021 DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 43

Slide 43

Nope, didn’t happen either https://i.giphy.com/media/26n6yGZkqLSaShKzS/giphy.gif

Slide 44

Slide 44

Gin Login Stable release is out! DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 45

Slide 45

Yay! 🤘 https://i.giphy.com/media/fsQbx1hX7hPBBpIM5b/giphy.gif

Slide 46

Slide 46

😉 Should work with Drupal 10 already Still mainly untested for now https://dev.acquia.com/drupal10/deprecation_status?names=gin DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 47

Slide 47

THE FUTURE WHAT’S TO EXPECT NEXT? DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 48

Slide 48

3.0 Beta 1 Release coming soon DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 49

Slide 49

I promise ✌ https://i.giphy.com/media/F3BeiZNq6VbDwyxzxF/giphy.gif

Slide 50

Slide 50

Design Refresh Simplified & improved Layout DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 51

Slide 51

DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 52

Slide 52

DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 53

Slide 53

DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 54

Slide 54

DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 55

Slide 55

DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 56

Slide 56

Drupal 10 Making Gin ready for the future of Drupal DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 57

Slide 57

Extend the new entity form layout beyond nodes DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 58

Slide 58

Further enhance the vertical navigation approach DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 59

Slide 59

DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 60

Slide 60

The new vertical navigation will be mobile-first DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 61

Slide 61

We’ll (finally) integrate the collapsible Sidebar feature DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 62

Slide 62

DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 63

Slide 63

DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 64

Slide 64

Ability to resize the vertical navigation and sidebar regions DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 65

Slide 65

Ability to choose from a preset of density settings DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 66

Slide 66

Refactoring of form actions, better compatibility with modules DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 67

Slide 67

Only load the CSS we need, the Drupal way (Component CSS) DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 68

Slide 68

Enhance the developer friendliness CSS3 Variables for content maxwidth, toolbar offset, layout density DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 69

Slide 69

RTL language support Arabic, Hebrew, etc. DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 70

Slide 70

Dashboard A useful & nicely designed dashboard to welcome/inform your editors DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 71

Slide 71

DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 72

Slide 72

WRAP UP IN A NUTSHELL DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 73

Slide 73

Best-in-class editorial expierence DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 74

Slide 74

3.0 Beta 1 Release coming soon DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 75

Slide 75

Download Gin drupal.org/project/gin DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 76

Slide 76

Contribute drupal.org/project/issues/gin DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 77

Slide 77

🚀 Sponsor the development github.com/sponsors/saschaeggi DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 78

Slide 78

DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 79

Slide 79

Drupal Slack Join #gin or write me a PM @saschaeggi DRUPALCON EUROPE 2021 @SASCHAEGGI

Slide 80

Slide 80

THANKS A LOT! THAT’S IT No gifs were harmed during this presentation. DRUPALCON EUROPE 2021 @SASCHAEGGI