Backoffice styling for custom package

Questions
, ,
1

I’m working on my custom package. I have a section that includes 3 dashboards.

I want to style these dashboards, and I saw that the most common approach, is to include the CSS in the TypeScript files like this:


	static styles = css`
		:host {
			display: flex;
			flex-direction: row;
		}

		:host > div{
			display: block;
			position: relative;
		}
	`;
}

etc.

This would work and it would be good, however, I want to utilize CSS frameworks, like Bootstrap or Tailwind.

If I see it right, these are not available from the Backoffice right away, so if I use any of the BS or Tailwind classes, I get no results.

Is there an available CSS framework in the Backoffice, or does the Backoffice have classes that I can utilize right away? Or how should I add BS or Tailwind? Do you recommend other approaches?

On a related note: If I want to use Fontawesome in the Backoffice (only in my dashboards), how should I add it?

2

The main thing to remember about Lit elements (web components) is that they are scoped/jailed. No CSS (apart from a few properties such as font and color and a few more) penetrates the shadow dom barrier. That makes it a bit unrealistic to use Bootstrap because it relies on global CSS classes.

You can, of course, import Bootstrap into your elements with the risk of ballooning the output with unneeded CSS.

I helped someone a while ago getting Tailwind to work, however. Tailwind should work better in the scope of shadow DOM since it is “compiled”. To make it work with Lit, you must create a wrapper component from which all your components extend.

I believe we used this guide to make it work:

(The guide also gives an idea of how to use SCSS with Lit elements)

Disclaimer: This is outside Umbraco’s scope and is solely relying on your build setup

1 Like
3

The general idea of Umbraco is to utilize the Umbraco UI Library. It allows you to add components to your custom views, making it look very well integrated with the rest of the Backoffice.

The components are already made ready to use in the Backoffice, and you can get an idea of what’s possible over on https://uui.umbraco.com

1 Like
4

Hi @DemeSzabolcs

I want to underline Jacobs last comment here.

If you are integrating CSS Frameworks, then you are most likely getting a style that is not of the same as the rest of the Backoffice. That is what the UI Library is there for.

But it comes with a change in mindset to use a Component Library and how you work with front-end. We are used to writing html-tags and style them. With Web Components and Component-Libraries this is changed and you will find yourself rarely writing styles.

Instead, it’s about composing components. So if you need to introduce a new layout/element thing, then where you previously made a class that you re-used, you now will be making a Component that you use across.

I hope it makes sense & good luck with your extensions.

2 Likes
5

Thank you! Though this seems outdated.

This no longer works, I have to add ?inline to the end of the import style from "./tailwind.global.css"; and I’m not sure if this doesn’t ruin the whole process.

import {LitElement, unsafeCSS} from "lit";

import style from "./tailwind.global.css";

const tailwindElement = unsafeCSS(style);

export const TailwindElement = (style) =>
    class extends LitElement {

        static styles = [tailwindElement, unsafeCSS(style)];
    
    };

The ts.config file is different, so I would need to merge that, with the current one, to make it functional with Umbraco.

Also for postcss I had to use “@tailwindcss/postcss”

At least in the compiled code, I can see that it tries to add styles:

const Wd = [
  Nl,
  xh,
  gd,
  Vd
], jd = "/*! tailwindcss v4.0.0-alpha.13 | MIT License | https://tailwindcss.com */@tailwind base;@tailwind components;.static{position:static}.block{display:block}.flex{display:flex}.grid{display:grid}.inline{display:inline}.items-center{align-items:center}.rounded-full{border-radius:3.40282e38px}.bg-\\[\\#2c2c30\\]{background-color:#2c2c30}.font-semibold{font-weight:600}";

but these styles are not working on the elements, no matter what.

6

Remember too, you can just include a <link> tag to the css file within your component’s render() function. If going this route, you have to handle pop-in (items shift after css is loaded) and be aware rules like body {} wont work as the component is within a shadow dom.

I think this isn’t a great solution for packages, but is arguable for a customization to a website or two.

1 Like