How Do I Start Styling In Mendix (Gulp & Sass)

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 in to 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 dev
You 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 dont forget to unlink your node folder with 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

Like what you read? Give Jason Teunissen a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.