How to start styling in Mendix (Gulp & Sass)
(Edit: 27 Sept 2019) Mendix just released their Calypso Sass compiler, which needs less setup than the gulp compiler making it easier for most everyday styling needs.)
All credits go to Jelte, the genius that created the Git repo.
Are you here to answer one question: What is the most efficient way to turn my sweet sweet designs into something your browser understands?
For quick guide, visit Jelte’s Git repo here.
If you are like me and not super technical, or not confident with Terminal, Gulp and Sass, then this guide is for you.
What do we want?
- Sass (for styling like a pro)
- Auto-refresh (makes life easy)
- Gulp (makes all the above work)
Prerequisites
1- Install nodeJS from here
2- Install Gulp by typing in the terminal npm install gulp-cli -g
Installation
1- Download gulp.zip here
2- Unzip in your project root folder.
3- In your terminal and go to your project root folder by type cd than dragging your root file into the terminal.
If you do this on Windows and you encounter errors with installing the dependencies, open your CMD or Powershell as Administrator.
4- Install dependencies using npm install
Usage
1- In your root type gulp devYou should still be in your root if you just finished the installation and otherwise type cd than dragging your root file into the terminal.
2- make sure your Mendix project is running
That’s it.
For a quick test to see if everything is working, go to theme/styles/sass/custom/_custom-variables.scss and type:body{ background-color: red; }Your background will be a beautiful red, and that’s it.
Protip: if you are using parallels on Mac, you can access your Mendix project on your mac browser by going to windows-10:3000
Done
Also, don't forget to unlink your node folder with a tortoise (Mendix only works with 1.7 which you can download here)
That’s it, now you are ready to start styling your Mendix app with Sass
Find me on Dribbble
Find Jelte on Github
Learn how to use Sass
Using Atlas UI Building Blocks in Mendix
Download Mendix
