CSS helper classes
Rather than creating a new skin format, apply standard, predefined Cascading Style Sheet (CSS) helper classes to make a minor formatting change to a cell or dynamic layout. Using CSS helper classes saves development time, reduces maintenance by limiting the number of customized skin formats, and improves the consistency of the look and feel of your application. By avoiding the introduction of unnecessary static content, you also improve the initial loading time of your application.
If your application has many formats of the same type, such as inline or stacked formats, and these formats vary only slightly, you might benefit from using CSS helper classes. For example, you might use one of the following helper classes instead of creating a new skin format:
- The center helper class centers an element in its layout.
- The margin-r-2x helper class applies twice the standard margin to the right side of an item.
Skin inheritance
To use the CSS helper classes, make sure that your application skin inherits from the
pyEndUser
skin, which is available in the UIKit. Alternatively, you can
add the CSS file py-common-helper-classes.css
to your application skin on
the Included styles tab of the Skin form.
Standard CSS helper classes
Categorized by layout and cell, standard CSS helper classes make the following types of adjustments possible:
- Center elements horizontally and vertically
- Increase or decrease standard margins and padding
- Set a minimum or maximum height
- Set width or height as a percentage, or make it automatically adjusting
- Apply borders of different widths
- Format text
- Make the cursor an arrow or a pointer
- Specify visibility options (hidden or disabled)
- Set Flexbox layouts
- Adjusting layout styling by using CSS helper classes
Apply a Cascading Style Sheet (CSS) helper class to a dynamic layout to alter the default styling or behavior in a small way, without creating a new skin format. For example, use a helper class to apply twice the standard margin to the right side of an item in the layout.
- Adjusting cell styling with helper classes
Apply a Cascading Style Sheet (CSS) helper class to a cell to alter its default styling or behavior in a small way, without creating a new skin format. For example, use a helper class to center an element in a cell.
- Reviewing standard CSS helper classes
Being familiar with the standard Cascading Style Sheet (CSS) helper classes that are available for making minor changes to the behavior or styling of cells and layouts can save you development time and bring greater consistency to the look and feel of your applications.
- Adding CSS helper classes
If you need to define an additional helper class, you can add a Cascading Style Sheet (CSS) file to your application skin. You can define a helper class for a cell, a layout, or both. The helper class that you define is then available from the helper class picker on the Properties panel.
Previous topic Styling your application Next topic Adjusting layout styling by using CSS helper classes