MA!N web contains a library with classes that adjusts the layout and styling. This page contains the default classes.
Add a class
Applying a class requires adding them to the XML. You do this with the CssClass tag. In the tag, you add one or more of the default CSS classes. When you add more than one class, you separate the class with a only a space.
When a control uses the Type tag, you should place it before the CSS tag.
Layout items
To layout items requires you to put them in a group (class ‘group-item’). This aligns the different items according to their dimensions based on their class.
You can place groups within groups. For example, when you have a grid with data and a describing text element. By putting these in one group, MA!N aligns them as one item.
Class
Description
group-item
A container for the different components
item-30
Takes up 30% of the default width.
item-50
Takes up 50% of the default width.
item-60
Takes up 60% of the default width.
item-100
Takes up 100% of the default width.
Adding space
You can add additional space before or after an item simply by adding a class. MA!N currently supports the spacing options below.
Class
Description
spaceTop25
Adds 25 pixels before the element.
spaceTop50
Adds 50 pixels before the element.
spaceTop100
Adds 100 pixels before the element.
spaceBottom25
Adds 25 pixels add the bottom of the element.
spaceBottom50
Adds 50 pixels add the bottom of the element.
spaceBottom100
Adds 100 pixels add the bottom of the element.
Buttons
Class
Description
btnGroup
A container for buttons
btn
Applies layout for buttons
btnDefault
Default styling for buttons
btnCancel
Styling for a cancel buttons
Tables
Class
Description
clickableRow
Adds a pointer and highlights rows on hover.
selectableRow
Highlights selected rows.
Mobile and responsive
Class
Description
hideMobile
Hides an item on smaller displays. You can also apply this to columns in grids.
