[FEEDBACK] Advanced Stylesheet Setup Videos on IU

Ignition
1

I've only just started watching these vidoes, but they look to be really informative for people looking to take the dive into more advanced styling of their components.

I have a suggestion in the first video though. When creating custom class selector rules, the video mentions that the class won't be selectable from the style.classes dropdown menu, so you have to type it in manually without the psc-. This is the reason I always add (and recommend adding) a blank style class into the Perspective Styles for each and every custom class selector rule that you add into the stylesheet or CSS theming files. Otherwise, onboarding newbies onto a project just takes more time and it takes transparency and ease of use away from the developer.

This would be good to mention in the videos imo.

It would also be good to identify that you can open the dev tools directly in the Designer as well from the Tools menu.

1 Like
2

I actually agree with that, I have the same approach to the blank classes.

3

This is soooo smart! I just always bounce over to the stylesheet to copy the name.

Definitely going to to use this!

1 Like
4

Whaaaat.

I learnt something today.

5

Just to add to this since I have been playing with it:

If you like organization in your styles you will have to escape the / in your names. so as an example

.psc-SomeFolder1\/SomeFolder2\/skeleton {
	background-color: #e0e0e0;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
}

This is kind of ugly to look at but felt like maybe useful to others coming to this in the future.

Also if there is a better way please chime in!

6

Nope, this is exactly what we're doing on the backend. CSS doesn't really have folders, so this is how we're 'faking' them.

7

If you're generating your CSS outside Ignition, we've made this postcss plugin available:

1 Like
8

Amazing solutions as always❤️

Will definitely look into this!