Contrib.social

Make css modular / easier to overwrite

Open on Drupal.org →
Created on 29 January 2025, 2 months ago

This is not a specific issue. I'd just want to give an impulse, what I would want a drupal admin theme to be like.

Problem/Motivation

I like the look of gin but for individual projects I often need to make adjustments. Which in drupal is easy when working with modules but traditionally hard with themes.

As an example: my backed features a table that needs to be somewhat compact. Unfortunaly the css from gin applies to all tables (not just those with a specific class) so I have to individually reset the padding on td and th, borders on table tbody tr, as well as the width of table. (not knowing if my overwrites break in the next update of gin)

I prefer not to reset previously assigned css but only assign css if it is needed in the first place. Here are my approaches to solve issues like this:

CSS namespaceing

So it would be nice if the css in of each component was namespaced (i.e. has a class that describes the style: admin-table, fullwidth-table etc.)

Now I am aware that this hard to do in Drupal especially considering contrib modules, that would have to implement the those classes.

Modular CSS

In other projects I would simply overwrite the css component and from that point on handle the tables myself in a subtheme:

libraries-override:
  gin/table:
    css:
       component:
          gin/css/tables.css: my-css/my-tables.css

But in gin, everything is merged into a giant gin.css. I suggest that at least for css with a global scope (styling of vanilla html elements, rather then classes) those should be deliverd in small modular chunks.

The nice thing about this is also you only have to embedd the css that is needed currently:

{{ attach_library('gin/tables') }}

<table{{ attributes }}>

or even better 

{{ attach_library('gin/admin-table') }}

<table{{ attributes.addClass('admin-table' }}>

On one of my projects the gin.css on /admin/content is unsed by 81.8%.Having the css modular could drastically reduce that number.

✨ Feature request
Status

Active

Version

4.0

Component

Code

Created by

🇩🇪Germany loominade

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @loominade
  • Comment 2 months ago →
    🇨🇭Switzerland saschaeggi Zurich

    I'd agree with most being written here. There are certain things we can't control as we're dependent on Core and other modules or would be complete overkill for Gin to handle like the granularity you're looking for with class names. This eventually would need to be placed in the ideas issue queue to make this change in Core itself.

    While the scope of Gin has organically grow drastically in recent years there are certain things which are awaiting a refactoring – and this is one of them. We've modularized already a fair bit of the CSS we ship but not just yet the basic styles like you mentioned. Eventually we would also want to override CSS from Claro completely instead of just extending it at some point in the future – so there is some refactoring planned in that regard at least. But It's currently something which is not of the highest priority unfortunately. That being said you or anyone else is more than welcome to contribute towards this goal though! It's something that can be worked on a component basis, file by file.

    We'd happily take any contributions in that regard.

    I hope this helps,
    Cheers

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024