The Australian Government coat of Arms

Communities of practice

Communities of practice

Design System overrides

#1

I am working with the uikit using the govcms8 drupal theme. I am finding overriding some styles kinda frustrating. The level of specificity that has been added feels unnecessary, especially if other developers need to build on top of the design system.

For example I want to remove the margin-top from a li element inside a ol list. My selector is .sidebar ol li but the uikit has this specified which overrides it; .au-body ol:not([class]) > li. I would understand if my ol had the uikit list class attached to it but seeing that is doesn’t have any class I should be able to easily override it with a simple selector.

Happy to keep discussing this with people because I had a similar issue with overriding button styles and my navigation.

1 Like

govCMS Drupal 8 Surveys, Reminders and News Bulletins
Roadmap discussion
#2

Welcome to the community @aj.turtle
Yeah good call. i can see how that could be too specific for your needs.

Ref source code here … I assume the intent here was so that any list inside au-body receives styles by default unless specified otherwise. A use case might be that any generated HTML by a CMS (or similar) doesn’t need classes added manually to style correctly…

CSS Specificity… Maybe your sidebar doesn’t need to be a child of au-body? And a solution to avoid styles leaking into your custom layouts is to isolate au-body to the areas where you do need it?

As far as road map I think there are two important discussions for the community to come out of this:

  1. Customisation: what’s the intended method and level of customisation, and does it suit our needs.
    (I’m assuming using AU:Ds source SCSS in your build-pipeline rather than an overriding stylesheet ¯|(ツ)/¯ was the intent)

  2. should au-body wrap everything - or should it it’s purpose be refactored to something more like au-content-area where it’s a body-copy component and other components don’t rely on it?

Good food for thought AJ :+1:

1 Like

#3

I think the intent behind it is good, but the ol:not([class]) > li is what is currently messing with it, doing simply .au-body ol li would be enough to override the browser default and make it less specific so overriding the value is easier.

Currently the markup is generated by Drupal so not a lot of choice where it is being rendered.

  1. Should the design system be used as a standalone library without customisation or should it be used as a base and built upon. I think make this decision will shape the thought process for the selectors and specificity.
  2. This relates to the first point, if it should be customisable then, a wrapper class shouldn’t exist, similar to other frameworks like bootstrap or foundation. The wrapper class alone can cause issues when trying to override styling.

No worries.

1 Like