Where are the instructions/examples for setting the Class?

1
I don’t know to read/code/program java script, bootstrap or .css files.  All I need is some document or web link that shows how to format containers and widgets etc using the Class property.  A few examples are: aligning object in a cell vertical (top, center, bottom), horizontally, etc.  What objects/widgets do these classes work with?  Does the parent (or outer) containers settings apply to inner ones?  And what does the Style property do and where I find information/examples on how to use it?  I haven’t been able to find anything of substance, just little teasers.   Apologies for sounding frustrated...that’s because i am unbelievably frustrated.      
asked
2 answers
0

Ted,

At the risk of making you more frustrated…..I think a good place to start might be atlas.mendix.com

All current Mendix apps are created with a bunch of styling options built in.  The website above has information about many of them.

As an example, if you go to that website and click on About Atlas in the top bar, then expand the Widgets section in the left bar, you can navigate to the Container widget and see several classes (they are highlighted in pink) that can be applied to Container widgets.  

Also, on this same page, expanding Resources in the left bar and clicking on Helpers will display a number of classes that can be applied to many widgets.

A few notes: 

  • first, these classes should be applied in the Class property of widgets, not the Style property
  • the classes should always be used in the Modeler without the leading period (the Helpers page shows a leading period, don’t use that in the Modeler)
  • if you want to use more than one class on a widget, put them all in the Class property separated by spaces

Finally, the Style property is a place to put CSS that will apply to your widget.  If you want to try that out, you could enter the following on a Text widget:

font-style: italic;

and your text will be changed to italics.  There are a lot of websites that have CSS info for common things like that.  I end up on this one pretty often: https://www.w3schools.com/css/default.asp

Hope that helps a bit,

Mike

answered
0

Hi Ted,

To follow onto Mike’s answer here, I also agree that CSS is generally confusing and frustrating when you’re new to it. CSS is quite powerful, but that power comes with complexity and that makes it confusing.

That’s why Mendix introduced Design Properties (see section 1.5) to Mendix Studio some time ago, and recently added it to Studio Pro in 8.0 (see release notes for details). The idea of Design Properties is provide a set of styling properties to a Mendix developer without needing to remember all of these class names. It’s extensible too, so someone skilled with CSS can add properties for other Mendix developers to use.

answered