Reference of Theme Classes used in Responsive Web Applications

The following is a reference of Theme Classes used in RWA: 

• Container Theme Class for RWA
• ResponsiveImage Theme Class for RWA
• BtnTextBlock. Descendant of Textblock class. Maps to Bootstrap's btn-default class, making a TextBlock look like a Button.
• BtnEnter. Descendant of Button. Maps to btn-primary BootStrap class.
• BtnDelete. Descendant of Button. Maps to btn-danger BootStrap class.
• VerticalCenteredCell. Descendant of Section. Helps to center the contents of a cell. See How to vertically align the contents of a cell
• AdvancedContainer. Descendant of Table. See HowTo: Display a menu in a responsive application 
• Attribute. It's a conditional class which sets a width of 100% for extra small screen devices.

             
             Attribute conditional class

• WWColumn. Allows you to determine which columns will be hidden for extra small screen devices. See How to design a Responsive Web Application: Hiding a column in a grid for more information.

           
           WWColumn conditional class

Notes

1. The custom node of the Theme is used to configure some settings that cannot be achieved using classes; for example, the effect of hovering over some buttons is configured as follows:

2. Some elements are also associated with internal CSS classes which belong to BootStrap. Those classes are not mapped to a GeneXus class; instead, they are associated with the element in such an order of priority that the GeneXus class overrides its settings.

For example, the confirm button of web transactions is associated with the classes "btn btn-default  btn-primary  BtnEnter".
The first ones are BootStrap classes, but the last one is defined in the GeneXus Theme and overrides the settings of the others.

Note:

The BootStrap.css file includes the following definition which is a hover effect over the buttons associated with the btn class:

.btn:hover,
.btn:focus {
  color: #333;
  text-decoration: none;
}

If the hover effect is not wanted, the user has to define the following custom node in the Theme, so as to override the default settings of BootStrap.

.btn:hover{
}

An alternative is to define the following, considering that the BtnEnter is the class associated with the button:

.BtnEnter:hover{
}

As since GeneXus 15 you can use the predefined classes on the Theme for that purpose : How to configure control effects in WEB apps.

See Also

Responsive Web Design in GeneXus

Responsive Web Design in GeneXus