Question

Custom CSS styling best practices

0

Hi all, I’m trying to apply custom CSS styling to my project and I wanted to learn more about some best practices that I could follow. One example that I’m aware of is that no changes should be made to the core files – a separate custom css file should be created if you want to overwrite any of the default Mendix styles. Besides that, are there any other best practices that you know of?

asked 2021-12-17

Jisa Zachariah

3 answers

Rene van Hofwegen · Answer 1 · 2021-12-17

This is a great write-up of Jason

https://medium.com/mendix/setting-up-your-modular-design-system-in-mendix-9-6-eed2d0063411

Marius van der Knaap · Answer 2 · 2021-12-17

Hi Jisa,

Great that you're focusing on this often overlooked part! I recommend starting with the learning path in the Mendix Academy: https://academy.mendix.com/link/paths/105/Style-your-App-with-CSS. It has some great learning to get you started on this path. If you have some questions afterwards, feel free to comment on it here.

Lenny Puente · Answer 3 · 2021-12-17

I think a good one would also be using SCSS Variables.

If e.g. you have a color that you want to reuse you can just create a variable in your file → ”$variablename: #ffee22” and use that in e.g “background-color: $variablename”.

If you want to read more on custom styling you can always go to the docs: (https://docs.mendix.com/howto/front-end/customize-styling-new). I imagine you may have been there already though.