The Australian Government coat of Arms

Communities of practice

Communities of practice

CSS conflicts between in-page components


#1

Hi all,

(Not sure the best location for this post - please move as needed. Should it be under “Support” or “Design” …?)

I am new to using the DTA designs, and am setting up a site with all the variable options that can be used into the CMS. I don’t use SCSS (although I plan to look into it more) or React, but rather the standard CSS with variables from the CMS to input classes.

I have put all the CSS for different components into a minimised file - so that editors can put any element on any page as needed. However, this is causing problems with conflicting CSS from them ‘resetting’ the defaults (rather than just the ones with the appropriate classes).

An example is the Page Alerts and Tags CSS.
The Page Alerts set padding to 16px on the left/right. But then the Tags CSS comes along and changes it by resetting the left/right padding to 0 with:
main .au-body {
padding:64px 0;
padding: 4rem 0
}

I can change the order of my CSS compilation, to put the Page Alerts after the Tags, but I expect I will still have conflict problems because of this type of thing in other parts too.

From my experience, usually the CSS would be more specific, so that the Tags’ CSS would be specific to the content within the Tags’ classes.
e.g.
main .au-body .au-tags {…}

Is there a reason it has not been coded more specifically in the CSS files?
Or is it just a mistake that needs fixing when spotted?

Thanks! :slight_smile:
Emily


#2

Hey Emily,

Thanks for noticing this issue. I will investigate it over the next day and get back to you!


#3

@emily thanks for sharing the issues you are experiencing. Welcome to the Design Systems community.

I recommend using sass as it will allow you to customise the components in greater fidelity. However it is not essential or causing the issue you are talking about above.

I have some questions around how you are using the design system, this might help me to help you better:

  • Are you installing the components with npm?
  • Did you get the minified css file from download page?
  • You are talking about variables coming from the CMS. What CMS are you using and what variables are coming from it?

One thing I have noticed is you are talking about some code related to main .au-body. From what I can tell no components in the design system have any css related to the <main> element. Is there any custom styles you have that may be adding this code?

I have created a code pen that tries to replicate what you are talking about. Let me know if you can create a code pen to show me the issue you are facing.


#4

Hi Alex,

The basic snippit works with the CSS, until I add the surrounding containers (with classes) up the tree structure. This is the container structure I am using at the moment (but can modify if need be) - in Codepen below.

I don’t install with npm. I do not have server-level access. I downloaded the files from the download page (CSS & JS) and using the HTML snippets from the components pages (https://designsystem.gov.au/components/).
I use Squiz Matrix CMS, which I have used for 6 years at an advanced level. At the moment I haven’t created variables within the CMS for these designs - other than the basic “put this content into this design template”. I like to check the raw HTML is working before I then make the variables, so I know whether the error is from the variable or the core/original code.

Thanks,
Emily


#5

Hi @emily

Thanks for providing the code snippets. I have noticed a few things that we may need to update or provide better guidance on.

The use of the grid is slightly incorrect. You want to follow this type of pattern when implementing it .container-fluid > .row > .col-sm-12 you currently have your .row inside the .col-sm-12 which is causing the content to overlap the icon.

The uikit-starter project comes with some additional css, it looks like you are using this code as well. I would recommend removing this code and making it more specific as it is causing issues with the page-alerts. The code adds additional spacing for main .au-body. I have made an issue to update this in the uikit-starter as it may break users projects who use that page alerts.

My recommended way to resolve the issue:

  • Remove the main .au-body padding and add it to a more specific element ( either main or main > section ).
  • Move the div.row outside of the .col-sm-12 but inside the .container-fluid
  • Remove the .au-body .au-body--dark class from the page alert as you already give it the body styles from the parent element. If you want it to be dark you may want the parent element to have .au-body.au-body--dark.

Here is an updated codepen using your markup. I have moved the .row to the correct location. This codepen does not have the main .au-body padding, so I would try and remove that first.


#6

Hi Alex,

Thanks for looking into that. The row vs col-sm-12 issue was just a poor copy over from my version into codepen (I wondered why it had the overlap in codepen, but figured it may just have been a codepen rendering issue. Oops - nope, I pasted my Row div in the wrong line! I have updated my CodePen demo now to correct that)

Removing the main .au-body padding in my “extra css” does remove the problem for the padding on the Page Alerts, but it creates a problem with no padding above the breadcrumbs, which I expect is why I copied it over from the design layout demos…
(screenshot attached)

If I move the “au-body au-body–dark” classes up the tree, then the outside of the container is dark - rather than just the inside. Is the intent for it to only be used with a dark background around it, or (as I had assumed) as a dark feature on a light background to stand out?
(The latter requiring the au-body au-body–dark to the div with role=alert)
(see: https://codepen.io/EInglis/pen/PXwewa)

I am also working on setting up a demo of the “Progress Indicator” elements, and am having problems with the “dark version”. Mine does not give the dark background or white text, because it is being over-ruled by other CSS. (https://designsystem.gov.au/components/progress-indicator/)
I notice from inspecting the dark example, that it is using a .col-dark class that does not exist in the downloaded CSS to give the dark background, however it still leaves me with black text on-hover as the white text colour css is being overruled. This occurs when I add the section class of au-body.
See CodePen: https://codepen.io/EInglis/pen/RENyrQ

Edit: I had forgotten to make sure there was an au-body–dark in the structure! Now it works. Can ignore.

(I have the structure of the Body -> Main -> Section class=“au-body” id=“content” -> div class=“container-fluid” -> div class=“row” as part of my design template applied to every page around the core page content, and the optional side nav & breadcrumbs… I don’t want editors to have to code this by hand on every page)

Thank you very much for helping & looking into this. :slight_smile:
Want to make sure I set it up in the way it was intended, and the most robust for future. Hopefully having it in the forum will also help others in the future if they incur a similar hiccup! :slight_smile:

Emily


#7

No problems. It sounds like you have a good solution for now.

We have logged the issue and I will post back when it is resolved with some guidance on how we would approach it.

Let me know if you have any more problems happy to help :smiley: !


#8

What do you recommend for the spacing between the breadcrumbs & the menu?


#9

Oh sorry, I missed that. There is two options I can think of:

Use main > .au-body

This code will add spacing to all .au-body elements where the direct parent is a main element. This should work as you use main then .au-body directly after each other. The additional children with .au-body would not be affected by this selector as there direct parent will not be the main element.

Add a new class to <section>

You could add a new unique class to the section element and add the padding above it. You could call it .content and add the padding on this. This would give you more control what areas you want the padding to be on.

main > .au-body {
  // If you are using sass you should use 
  // @include AU-space( padding-top, 2unit );
  padding-top: 32px;
}

.content {
  padding-top: 32px;
}

#10

I’ll add in the main > .au-body CSS. I already have an ID of “content” on a different element level, which I use for the accessible “skip to content” link for screen-readers.

It may be worth considering including this into the base CSS file for the design, assuming there is meant to be the padding there as per the visual demo provided. :slight_smile:

Thank you again Alex!
If you have anyone with questions about how to implement these into Squiz Matrix specifically, feel free to tag me to bring it to my attention and I can see if I can help.

Emily