CSS helper classes
Helper classes are CSS classes that are included with the Chap theme and can be used with shortcodes or plain HTML to tweak the content to suit your needs.
Text color
Color classes use Semantic UI color values defined in globals/site component,
customizable in the theme options under Chap Theme -> SUI.
Text color classes

Gray text

Red text

Orange text

Yellow text

Olive text

Green text

Teal text

Blue text

Violet text

Purple text

Pink text

Brown text

Muted text

Black text

White text

[p gray text]Gray text[/p]
[p red text]Red text[/p]
[p orange text]Orange text[/p]
[p yellow text]Yellow text[/p]
[p olive text]Olive text[/p]
[p green text]Green text[/p]
[p teal text]Teal text[/p]
[p blue text]Blue text[/p]
[p violet text]Violet text[/p]
[p purple text]Purple text[/p]
[p pink text]Pink text[/p]
[p brown text]Brown text[/p]
[p muted text]Muted text[/p]
[p black text]Black text[/p]
[segment inverted compact]
  [p white text]White text[/p]
Text style
Text style classes

Bolding removed

Bolding added

Italic added

Bolding and italic added

Color, bolding and italic added

[p normal text]Bolding removed[/p]
[p bold text]Bolding added[/p]
[p italic text]Italic added[/p]
[p bold italic text]Bolding and italic added[/p]
[p red bold italic text]Color, bolding and italic added[/p]
Borderless class can remove borders.
[segment borderless]Segment[/segment]

Paddingless class can remove padding.

[segment paddingless]Segment[/segment]

Marginless class can remove margin.

Text after

Text after
Text after

[button marginless]Button[/button]
Text after

Shadowless class can remove text-shadow (useful in slides) and box-shadow.

[segment shadowless]Segment[/segment]
Breakpoints are defined in the chap/core component,
customizable in the theme options under Chap Theme -> SUI.
Visibility classes
Shown only on AMP pages
Hidden on mobile breakpoint
Shown on mobile breakpoint
[div invisible]Hidden text[/div]
[div amp-invisible]Hidden on AMP pages only[/div]
[div amp-only]Shown only on AMP pages[/div]
[div mobile-invisible]Hidden on mobile breakpoint[/div]
[div mobile-only]Shown on mobile breakpoint[/div]
Responsive visibility
Mobile invisible
Mobile only
  [header]Mobile invisible[/header]
  [button mobile-invisible]Button[/button]
  [header]Mobile only[/header]
  [button lg-invisible sm-invisible tablet-invisible]Button[/button]
Tablet invisible
Tablet only
  [header]Tablet invisible[/header]
  [button tablet-invisible]Button[/button]
  [header]Tablet only[/header]
  [button lg-invisible sm-invisible mobile-invisible]Button[/button]
Small screen
Small screen invisible
Small screen only
  [header]Small screen invisible[/header]
  [button sm-invisible]Button[/button]
  [header]Small screen only[/header]
  [button lg-invisible tablet-invisible mobile-invisible]Button[/button]
Large screen
Large screen invisible
Large screen only
  [header]Large screen invisible[/header]
  [button lg-invisible]Button[/button]
  [header]Large screen only[/header]
  [button sm-invisible tablet-invisible mobile-invisible]Button[/button]
Mobile alignment
Mobile text alignment
Left aligned text, mobile right aligned.
Center aligned text, mobile left aligned.
Right aligned text, mobile center aligned.
Center aligned text, mobile justified.
[grid equal width stackable]
  [column left aligned mra]Left aligned text, mobile right aligned.[/column]
  [column center aligned mla]Center aligned text, mobile left aligned.[/column]
  [column right aligned mca]Right aligned text, mobile center aligned.[/column]
  [column center aligned mj]Center aligned text, mobile justified.[/column]
Mobile alignment classes allow to specify different alignment at mobile resolutions.
Class name Meaning
mla mobile left aligned
mca mobile center aligned
mra mobile right aligned
mj mobile justfified
Exit mobile version