How should I approach creating a reusable style module?

Hello,   I am trying to create a reusable core module for custom styling purposes. I was thinking to model (copy) the atlas module structure. And by this I mean two modules with another name instead of Atlas name that I can import/export into another app(s).  I read the "Customize styling" mendix documentation” and followed it regarding web theme. But I am still not sure if this is the right way to go. Is there something I miss? I am not that familiar with scss/css styling or design work. If someone knows any better documentation on how to approach this and is willing to share, I would appreciate it. ​​​​​​​   I was also wondering where do I put the widget styling?  For example, if I were to be able to change Button Styling options from the button widget how can I do that?  How can I change the option names or the options style?  How could I scale this for all the widgets? And what if I different custom variables, or many more custom variables in terms of variety? Where could I specify styling for the disabled state button for example?    :) Sorry for too many other questions that might not be that specific or relevant.   Thanks! 
1 answers

Great question.

before you get started you need to figure out a couple of things:

  • do you know how css works (specificity)?
  • do you know how sass works?
  • how modulair do you want to make your new module?
  • do you want to lean on atlas or completly replace it.


once you have that figured out, you need to think about the front end methodology,

  • do you want to go towards the “seperation of commons” where classes are very semantic?
  • do you want to go more towards tailwind where every class explains something about a design element?
  • or maybe somewhere in between such as the bootstrap utility class framework?


in order to get started I'd recommend reading this blog:

and maybe watch this.

it is for MX8 but the principles still remain strong.