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.

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>
</segment>
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>
Breakpoints are defined in the chap/core component,
customizable in the theme options under Chap Theme -> SUI.
Visibility classes
Hidden on AMP pages only
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>

Borderless class can remove borders.

Borderless
Segment
Segment
<segment>Segment</segment>
<segment borderless>Segment</segment>

Paddingless class can remove padding.

Paddingless
Segment
Segment
<segment>Segment</segment>
<segment paddingless>Segment</segment>

Marginless class can remove margin.

Marginless
Text
Text after

Text
Text after
<button>Button</button>
Text
Text after

<button marginless>Button</button>
Text
Text after

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

Shadowless
Segment
Segment
<segment>Segment</segment>
<segment shadowless>Segment</segment>
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>
</grid>
Notes
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

Leave a comment

Your email address will not be published. Required fields are marked *