How to style Responsive Apps
I often get asked how I style apps, and usually my response is, “what kind of app are you styling?”. In the world of Mendix there is a massive difference in styling for responsive web apps and styling for native mobile apps.
For instance, responsive apps are styled using using either inline styles, via a style sheet using SCSS (or a combination both), meanwhile native mobile apps are predominantly styled using design properties on widgets, as well as using javascript to create any custom classes.
Don’t be discouraged by how much there is to learn though, as this series is mostly aimed at beginners, for this piece I will be focusing on the basics of styling in responsive apps.
So strap in and let’s go on a journey of discovery and learn how to make beautiful, stylish apps.
What do I need to get started?
In order to start styling apps in Mendix 8 you will need to have any version of Mendix Studio Pro 8 installed, as well your preferred IDE of choice, I prefer to use VSCode.
I also recommend you download and setup Calypso on your machine. Calypso is Mendix’s alternative tool to using Gulp and Sass, and it eases your work by:
- Checking SCSS files for errors.
- Compiling SCSS files to CSS.
- Showing notifications on errors.
- Moving compiled files to your deployment folder.
- Injecting the compiled CSS files into your browser so you can preview your changes instantly.
SCSS vs CSS
Mendix 8 uses SCSS, which isn't quite full SASS but it does support both SASS and CSS formats. This means if you don’t know SASS, you can still create your regular style classes using plain CSS. A few benefits of using SCSS are:
- SCSS has more advanced features.
- SCSS contains all the features of CSS and even more features that aren’t available in CSS.
- SCSS offers variables, you can shorten your code by using variables.
- Knowing SCSS helps you to customize Bootstrap.
- SASS adds the feature of @import which lets you import your customized SCSS files.
- SASS enables developers to use a nested syntax in the code.
- It’s well documented.
Start Calypso
Once you have everything setup you will need to start Calypso so it can watch for changes in your style sheet. Simply open Calypso, browse for your Mendix app folder, make sure its watching “styles\web\sass**\*.scss”
and click “Start”.
Creating a custom style class
Now open up your project folder in your code editor I used VSCODE.
Navigate to your Theme folder in your and look inside styles -> web->sass->app.
In your app folder, create a file and name it what_ever_you_want.scss
You can now add any css styles you want, as well as you can make use of any SASS code you would like to. Heres a few custom classes in the image below, which I created as an example
Importing your new file
Before you can add your class name to any element in studio pro, we need to make sure this new file is being imported into your app correctly. To do this navigate to _custom.scss located in the app folder.
Now you just need to add @import “yourfileName”. There’s no need to include the file extension here.
Make sure to save all these changes!
Add class names to widgets
Now you can add any class names you have created to any element on any page! With Calypso listening to changes in your app, you should see the changes appear in the browser instantly when ever you save your work, so theres no time wasted having to constantly re-run your app to test any style changes.
Read more
From the Publisher -
If you enjoyed this article you can find more like it at our Medium page or at our own Community blog site.
For the makers looking to get started, you can sign up for a free account, and get instant access to learning with our Academy.
Interested in getting more involved with our community? You can join us in our Slack community channel or for those who want to be more involved, look into joining one of our Meet ups.
