Helpers

Helpers classes are a set of secondary classes to use in very specific cases. Usually default classes are made to fit a large range of interface design. But sometimes your class requires a particular behavior. That is why you can complete your container's class attribute by adding a helper class, instead of writing a new class with only one or two different rules.

Words helper classes

Several classes are already available to change words behaviour. Some of them have already been described in the Messages and Tables sections.

  • .bold : if you need to get a bold font-weight,
  • .nobold : if you need to stop a bold font-weight inheritance,
  • .nowrap : if you need to force a word or a sentence to not be broken by a carriage return. Useful for tags for example, as you need them to be identified as one block so you don't want them to appear on two lines.

Paragraphs helper classes

Sometimes the text needs to be aligned in a particular way. Here is the set of classes to modify the default behavior.

  • .textAlignR : aligns your paragraph to the right,
  • .textAlignL : aligns it to the left,
  • .textAlignC : aligns it to the center.

Positions helper classes

Containers may be block-level elements or inline elements, depending of their role.

  • .displayB : switches the behavior by a display:block;,
  • .displayI : switches it to display:inline;,
  • .displayIB : switches it to display:inline-block;.
  • .displayN : doesn't display your element with a display:none; style.

You may also want an element to float on the right, or the left side of your layout, or stop a floating behavior.

  • .floatR : floats to the right,
  • .floatL : floats to the left,
  • .clear : clears the floating behavior with a clear:both; style.

Don't forget that each element has a behavior for a reason. Changing its behavior can be useful, but you always have to use it with precaution, as an isolated case, the exception that proves the rule.

Widths helper classes

You can force the width of elements if you want to make them take all the width of their container, or on the contrary constrain them to take less place than expected.

To force a full width:

  • .fullWidth : adds a width:100%; to your element,
  • .fullMaxWidth : forces the full width only if the content is larger than its container with a max-width:100%; style,
  • .autoWidth : resets the width inheritance by adding a width:auto;.

To constrain a container, you can still use the percent classes, that will add a width in percentage to your element.

.tenPercent .twentyPercent .thirtyPercent .fortyPercent .fiftyPercent .sixtyPercent .seventyPercent .eightyPercent .ninetyPercent

Visibility, display and overflow helper classes

For a contextual menu or another element associated with JavaScript, you may want to hide something by default. There are four available classes:

  • .displayB : switches the behavior by a display:block;,
  • .displayN : doesn't display your element with a display:none; style,
  • .visibilityH : hides your element with the visibility:hidden; style,
  • .visibilityV : doesn't display your element with a visibility:visible; style.

You can also control the overflow of an element by using these classes:

  • .overflowV : adds an overflow:visible;,
  • .overflowH : adds an overflow:hidden;,
  • .overflowS : adds an overflow:scroll;,
  • .overflowA : resets the inheritance by an overflow:auto;.

The overflow:scroll; can also limited to an horizontal or vertical behavior only, by using the overflow-x:scroll; or overflow-y:scroll; styles. In this case, use the overflowXS and overflowYS helpers classes.