Using Parallel in combination with Bootstrap

[RebockraAtAtos]

Hallo @ALL,

the AMS STC-5 department is currently developing an Angular application for an internal project and we are committed to using the Atos Design System.

Link to our project repository --> https://github.com/DE-AMS-AD-TECUNIVERS/STC5-TCM

However, for development, we also rely on the well established components and styling that the Bootstrap framework provides to maximize developer convenience.

The first thing we noticed when development started is that Bootstrap's styling takes precedence over Parallel's styling and there is no easy way to use the styling for e.g. Card and Button elements from Parallel, short of uninstalling Bootstrap.

There are a number of ways to address this, of course.

Our first approach would have been to selectively remove the Bootstrap styling for the elements we would like to have styled the 'Parallel way'. But we found that to be too messy and hard to maintain consistently.

Another approach would be to use the recently introduced @layer CSS-rule but we are unsure how to do this properly with Parallel.

Can you give us some tips how to best go about this?

Cheers
STC5-DEV-Team

[Th3S4mur41]

Since Parallel was designed to be easily overwritten/customized, most of its styles come with a 0 specificity.
The downside is that every other style your application will import will most probably take precedence, no matter the order.

Cascade layers are indeed probably the best solution to avoid those specificity issues when combining Parallel with other 3rd-party stylesheets.
It's even a best practice worth documenting in our README.

In your example you would simply import both CSS in separate layers like this:

@import url('~bootstrap/dist/css/bootstrap.min.css') layer(bootstrap);
@import url('~@atos-parallel/core/dist/style.css') layer(parallel);

/*... the rest of your CSS*/

This will put parallel in a higher layer than bootstrap and make its styles take precedence on bootstrap regardless of the specificity.

This will not overwrite all bootstrap styles though, so you might still need to customize some of bootsrap's variables to achieve the desired designs.

As of today, all major browsers on the Desktop already support it, and support is also growing fast in the rest of the field

[MikeKronewald]

Hey,
I have a similar issue. The difference is that we are using TailwindCSS.
Your answer for Bootstrap do not work for my issue.
Is there another solution?

[Th3S4mur41]

The same approach should work too, the syntax is just a bit different with @tailwind directives...

Try this:

@layer tailwind {
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
}
@import url('~@atos-parallel/core/dist/style.css') layer(parallel);

/* ... the rest of your CSS */