Utility

Utility classes define small and simple styles used to adjust minimal style changes that are difficult to or not appropriate to define in the Object modifiers of Component and Project layer.

Utility classes can prevent Object modifiers in the Component and Project layer from increasing inexhaustibly. In addition, Utility classes can be used to apply margins such as .mbs { margin-bottom: 10px; } that the Object itself should not hold.

In addition, helper classes that define the rule sets such as the clearfix technique should also be included in this layer.

You must use .u- prefix for Utility.

Typical Utility classes

note

There is a possibility to created unique Utility classes for each web site, so please check this just a reference.

.u-{**}-only

Display only each break points layout.

Class Name	<= 750px	750px < and <= 1060px	1060px <
.u-pc-only	❌	❌	✅
.u-under-pc-only	✅	✅	❌
.u-tb-only	❌	✅	❌
.u-over-sp-only	❌	✅	✅
.u-sp-only	✅	❌	❌

info

The above breakpoint is just an example. You can change the breakpoint according to your project.

note

Before, we used these styles as .pc and .sp class names.

.u-font-sans / .u-font-serif

Display text as Sans-serif or Serif font.

.u-anchor-tel

Style for tel link. This class is used to prevent to click the tel link on the PC devices.

And more...

There are many Utility classes that are used in each project. Please check the Utility classes that are used in your project.