MA!N Web CSS library

Last updated: September 16, 2022

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.

<Control ID='Panel Overview'>
    <Type>Panel</Type>
    <CssClass>item-group</CssClass>

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.
ClassDescription
group-itemA container for the different components
item-30Takes up 30% of the default width.
item-50Takes up 50% of the default width.
item-60Takes up 60% of the default width.
item-100Takes 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.

ClassDescription
spaceTop25Adds 25 pixels before the element.
spaceTop50Adds 50 pixels before the element.
spaceTop100Adds 100 pixels before the element.
spaceBottom25Adds 25 pixels add the bottom of the element.
spaceBottom50Adds 50 pixels add the bottom of the element.
spaceBottom100Adds 100 pixels add the bottom of the element.

Buttons

ClassDescription
btnGroupA container for buttons
btnApplies layout for buttons
btnDefaultDefault styling for buttons
btnCancelStyling for a cancel buttons

Tables

ClassDescription
clickableRowAdds a pointer and highlights rows on hover.
selectableRowHighlights selected rows.

Mobile and responsive

ClassDescription
hideMobileHides an item on smaller displays. You can also apply this to columns in grids.

Text formats

ClassDescription
pageTitleThe page title
sectionTitleTitle of a section on a page
subTitleSub title