How to start styling in Mendix (Gulp & Sass)

Jason Teunissen
Feb 20, 2018 · 3 min read
Image for post
Image for post

(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.

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Mendix Community

The community-sourced publication for low-code

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store