Best way to sync styling across apps?

2
We have pretty much the same styleguide, especially basics (list view appearances, navigation layouts, margins and typography sizes, etc.) and use that across multiple apps. One update in one of the apps does not appear automagically in another. Sometimes that would be nice for consistency. However, what is the best way to sync all SASS files across all apps? Can we use Github with one library across multiple apps for this? Doubt so, but would be nice. 
asked
5 answers
1

You can use the private appstore voor the UI resources or try to create a github repo indeed and exclude this in your SVN repo with tortoise.

maybe grunt scripts will also help you to automate this workflow (detect changes in github repo and update or something)

answered
1

You could follow these tutorial to create and share your company styling elements across projects.

  1. https://docs.mendix.com/howto/atlasui/create-company-atlas-ui-resources
  2. https://docs.mendix.com/howto/atlasui/share-company-atlas-ui-resources
answered
1

Hi Sander,

When you have 1 general CSS file that you want to distribute over all of your apps, you can embed it in the index.html file of your project. You can link to the external CSS file, for example: 

<link rel="stylesheet" href="https://<YourGeneralCSSFileURL>/styles/css/custom/custom.css?{{cachebust}}">

You can put this between the <link rel="stylesheet" href="mxclientsystem/mxui/ui/mxui.css?{{cachebust}}"> and {{themecss}} line. This way the CSS is used a global CSS and the custom app CSS is loaded after the global CSS.

This way you can embed any external CSS file that is public on the internet.

 

Note: Mendix will generate the following when applying this method:

<link rel="stylesheet" href="mxclientsystem/mxui/ui/mxui.css?636788265701963126">
<link rel="stylesheet" href="https://<YourGeneralCSSFileURL>/styles/css/custom/custom.css?636788265701963126">

<link rel="stylesheet" href="styles/css/lib/lib.css?636788265701963126">
<link rel="stylesheet" href="styles/css/custom/custom.css?636788265701963126">

Note 2: It is possible to overwrite all the CSS rules by the custom app CSS.

Perhaps this helps.

EDIT: Updated the instruction.

Cheers,

Jeffrey

Disclaimer: I've tested this on my local device only.

answered
1

"However, what is the best way to sync all SASS files across all apps?"

I'd say github. If you sync the css stuff (not just the sass) everything should fall into place.

are you also syncing buildingblocks? layouts? and other stuff?
 

Then you should create 1 main styling module, sort of depends on the scope and size of your project

answered
0

I have documented some exploration my UI team has done to solve this issue and added an idea to the Mendix forum. Please upvote it here: https://forum.mendix.com/link/ideas/1218

answered