Chap WordPress theme
Chap

Basics

A segment is used to create a grouping of related content.

Segment shortcode arguments
Classes
Typebasic raised stacked piled vertical
Emphasissecondary tertiary
Colorred orange yellow olive green teal blue violet purple pink brown grey black
Sizemini tiny small medium large big huge massive
Paddingpadded very padded
Floatleft floated right floated
Alignmentleft aligned center aligned right aligned
Attachmenttop attached attached bottom attached
Othercompact circular clearing disabled inverted loading fluid
Segment
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
[segment]...[/segment]
Primary segment
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
[segment primary]...[/segment]
[segment inverted primary]...[/segment]
Secondary and tertiary segments
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
[segment secondary]...[/segment]
[segment tertiary]...[/segment]
Raised segment
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
[segment raised]...[/segment]
Stacked segment
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
[segment stacked]...[/segment]
[segment tall stacked]...[/segment]
Piled segment
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare. Cras non velit molestie, vulputate elit vel, ullamcorper urna. Ut sit amet aliquam purus. Suspendisse facilisis tortor at elit accumsan, sed tristique augue placerat. Fusce ut velit pulvinar, aliquam ex et, facilisis felis.
[segment piled]...[/segment]
Inverted segment
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare. Cras non velit molestie, vulputate elit vel, ullamcorper urna. Ut sit amet aliquam purus. Suspendisse facilisis tortor at elit accumsan, sed tristique augue placerat. Fusce ut velit pulvinar, aliquam ex et, facilisis felis.
[segment inverted]...[/segment]
Circular segment
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare. Cras non velit molestie, vulputate elit vel, ullamcorper urna. Ut sit amet aliquam purus. Suspendisse facilisis tortor at elit accumsan, sed tristique augue placerat. Fusce ut velit pulvinar, aliquam ex et, facilisis felis.
[segment circular]...[/segment]
Loading segment
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare. Cras non velit molestie, vulputate elit vel, ullamcorper urna. Ut sit amet aliquam purus. Suspendisse facilisis tortor at elit accumsan, sed tristique augue placerat. Fusce ut velit pulvinar, aliquam ex et, facilisis felis.
[segment loading]...[/segment]
Basic segment
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare. Cras non velit molestie, vulputate elit vel, ullamcorper urna. Ut sit amet aliquam purus. Suspendisse facilisis tortor at elit accumsan, sed tristique augue placerat. Fusce ut velit pulvinar, aliquam ex et, facilisis felis.
[segment basic]...[/segment]

Notes

Basic segment has no special formatting.
Colored segments
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare. Cras non velit molestie, vulputate elit vel, ullamcorper urna. Ut sit amet aliquam purus. Suspendisse facilisis tortor at elit accumsan, sed tristique augue placerat. Fusce ut velit pulvinar, aliquam ex et, facilisis felis.
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare. Cras non velit molestie, vulputate elit vel, ullamcorper urna. Ut sit amet aliquam purus. Suspendisse facilisis tortor at elit accumsan, sed tristique augue placerat. Fusce ut velit pulvinar, aliquam ex et, facilisis felis.
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare. Cras non velit molestie, vulputate elit vel, ullamcorper urna. Ut sit amet aliquam purus. Suspendisse facilisis tortor at elit accumsan, sed tristique augue placerat. Fusce ut velit pulvinar, aliquam ex et, facilisis felis.
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare. Cras non velit molestie, vulputate elit vel, ullamcorper urna. Ut sit amet aliquam purus. Suspendisse facilisis tortor at elit accumsan, sed tristique augue placerat. Fusce ut velit pulvinar, aliquam ex et, facilisis felis.
[segment inverted red]...[/segment]
[segment inverted green]...[/segment]
[segment basic inverted blue]...[/segment]
[segment basic inverted teal]...[/segment]
Sizes
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare.
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare.
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare.
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare.
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare.
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare.
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare.
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare.
[segment mini]...[/segment]
[segment tiny]...[/segment]
[segment small]...[/segment]
[segment]...[/segment]
[segment large]...[/segment]
[segment big]...[/segment]
[segment huge]...[/segment]
[segment massive]...[/segment]
Group of segments
Top segment
Red segment
Center aligned segment
Padded segment
Very padded segment
Secondary segment
Tertiary segment
Disabled segment
Bottom segment
[segments]
  [segment]Top segment[/segment]
  [segment red]Red segment[/segment]
  [segment center aligned]Center aligned segment[/segment]
  [segment padded]Padded segment[/segment]
  [segment very padded]Very padded segment[/segment]
  [segment secondary]Secondary segment[/segment]
  [segment tertiary]Tertiary segment[/segment]
  [segment disabled]Disabled segment[/segment]
  [segment]Bottom segment[/segment]
[/segments]
Attached segment
Lorem ipsum dolor sit amet...
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare. Cras non velit molestie, vulputate elit vel, ullamcorper urna. Ut sit amet aliquam purus. Suspendisse facilisis tortor at elit accumsan, sed tristique augue placerat. Fusce ut velit pulvinar, aliquam ex et, facilisis felis.
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare. Cras non velit molestie, vulputate elit vel, ullamcorper urna. Ut sit amet aliquam purus. Suspendisse facilisis tortor at elit accumsan, sed tristique augue placerat. Fusce ut velit pulvinar, aliquam ex et, facilisis felis.
[message top attached info][icon info]Lorem ipsum dolor sit amet...[/message]
[segment attached]...[/segment]
[segment attached]...[/segment]
[button fluid bottom attached]Read more[/button]
Example

Dogs Roles with Humans

Domestic dogs inherited complex behaviors, such as bite inhibition, from their wolf ancestors, which would have been pack hunters with complex body language. These sophisticated forms of social cognition and communication may account for their trainability, playfulness, and ability to fit into human households and social situations, and these attributes have given dogs a relationship with humans that has enabled them to become one of the most successful species on the planet today.

The dogs' value to early human hunter-gatherers led to them quickly becoming ubiquitous across world cultures. Dogs perform many roles for people, such as hunting, herding, pulling loads, protection, assisting police and military, companionship, and, more recently, aiding handicapped individuals. This impact on human society has given them the nickname "man's best friend" in the Western world. In some cultures, however, dogs are also a source of meat.

[segment vertical stripe]
  [container raised very padded primary text segment]
    [header large]Dogs Roles with Humans[/header]
    [p]Domestic dogs inherited complex behaviors, such as bite inhibition, from their wolf ancestors, which would have been pack hunters with complex body language. These sophisticated forms of social cognition and communication may account for their trainability, playfulness, and ability to fit into human households and social situations, and these attributes have given dogs a relationship with humans that has enabled them to become one of the most successful species on the planet today.[/p]
    [p]The dogs' value to early human hunter-gatherers led to them quickly becoming ubiquitous across world cultures. Dogs perform many roles for people, such as hunting, herding, pulling loads, protection, assisting police and military, companionship, and, more recently, aiding handicapped individuals. This impact on human society has given them the nickname "man's best friend" in the Western world. In some cultures, however, dogs are also a source of meat.[/p]
  [/container]
[/segment]


A container is an element designed to contain page elements to a reasonable maximum width based on the size of a user's screen. This is useful with other UI elements like grid, to restrict it's width to a reasonable size for display.

Container shortcode arguments
Classes
Typetext fluid
Alignmentleft aligned right aligned center aligned justified
Text container
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare. Cras non velit molestie, vulputate elit vel, ullamcorper urna. Ut sit amet aliquam purus. Suspendisse facilisis tortor at elit accumsan, sed tristique augue placerat. Fusce ut velit pulvinar, aliquam ex et, facilisis felis. Cras egestas, ex at porta posuere, libero dolor lobortis odio, a eleifend sem arcu vitae diam. Nam eget odio eget odio convallis pellentesque sit amet suscipit lectus. Morbi fringilla, turpis non blandit viverra, ex diam commodo purus, eu rhoncus mauris arcu id ipsum. Proin eget sem gravida, scelerisque diam eu, aliquam neque. Nam vitae sapien quis elit ornare vestibulum vitae at lorem. Nulla consequat ante ac mauris sollicitudin, sit amet tristique nisl lacinia. Pellentesque scelerisque nec urna sit amet ultricies.
[container text]...[/container]

Notes

A text container is a simpler markup alternative to using a grid with a single column, and is designed to have a reasonable maximum width for displaying flowing text.
Container variations
Left aligned container
Center aligned container
Right aligned container

Justified container

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
[container left aligned text]Left aligned container[/container]
[divider]
[container center aligned text]Center aligned container[/container]
[divider]
[container right aligned text]Right aligned container[/container]
[divider]
[container justified text]...[/container]


Grids can be used to divide content into (16) columns and rows.

Grid shortcode arguments
Classes
Columnsequal width one column two column three column ... sixteen column
Typecelled internally celled divided padded
Alignmentcentered
Mobilestackable doubling
Otherreversed
Row shortcode arguments
Classes
Columnsequal width one column two column three column ... sixteen column
Mobilestackable doubling
Column shortcode arguments
Classes
Widthone wide two wide three wide ... sixteen wide
Floatleft floated right floated
Alignmentleft aligned center aligned right aligned
Colorred orange yellow olive green teal blue violet purple pink brown grey black
Grid
Column 1
Column 2
Column 3
[grid three column]
  [column]Column 1[/column]
  [column]Column 2[/column]
  [column]Column 3[/column]
[/grid]
Grid with rows
A column in a two column wide row. A column in a two column wide row. A column in a two column wide row. A column in a two column wide row.
Column 1
Column 2
Column 3
Column 4
[grid four column]
  [row two column]
    [column]A column in a two column wide row....[/column]
  [/row]
  [column]Column 1[/column]
  [column]Column 2[/column]
  [column]Column 3[/column]
  [column]Column 4[/column]
[/grid]
Clearing content
Left floated column
Right floated column
Column 1
Column 2
Column 3
[grid]
  [row four column]
    [column left floated]Left floated column[/column]
    [column right floated]Right floated column[/column]
  [/row]
  [row]
    [column three wide]Column 1[/column]
    [column eight wide]Column 2[/column]
    [column five wide]Column 3[/column]
  [/row]
[/grid]
Equal width columns
Column 1
Column 2
Column 3
Column 4
Column 5
[grid equal width]
  [row]
    [column]Column 1[/column]
    [column]Column 2[/column]
    [column]Column 3[/column]
  [/row]
  [row]
    [column]Column 4[/column]
    [column]Column 5[/column]
  [/row]
[/grid]
Responsive grid
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
[grid]
  [column four wide]Column[/column]
  [column four wide]Column[/column]
  [column four wide]Column[/column]
  [column four wide]Column[/column]
  [column four wide]Column[/column]
  [column four wide]Column[/column]
  [column four wide]Column[/column]
  [column four wide]Column[/column]
  [column four wide]Column[/column]
  [column four wide]Column[/column]
[/grid]

Notes

A container can be used alongside a grid to provide a responsive, fixed width container for wrapping the contents of a page.
Nested grid
Left
One
Two
Three
[grid equal width stackable]
  [column]Left[/column]
  [column]
    [ui stackable grid]
      [row]
        [div column]One[/div]
      [/row]
      [row two column]
        [div column]Two[/div]
        [div column]Three[/div]
      [/row]
    [/ui]
  [/column]
[/grid]


Paragraphs

This is a simple paragraph.

[p]This is a simple paragraph.[/p]

Notes

Regular HTML paragraph tags are excluded from Chap shortcodes due to issues with TinyMCE. Inside Chap shortcodes you can use 'p' shortcode instead.
Div
This is a regular div.
This div has classes.
[div]This is a regular div.[/div]
[div class1 class2]This div has classes.[/div]
Span
This is a regular span. This span has classes.
[span]This is a regular span.[/span]
[span class1 class2]This span has classes.[/span]
Nesting shortcodes
Container in a container.
[container fluid]
  [div ui fluid container]Container in a container.[/div]
[/container]

Notes

A shortcode cannot contain another instance of itself, so a div shortcode with Semantic UI classes can be used as a substitute. For most shortcodes the Semantic UI class syntax can be achieved by using the shortcode name as the last class and prepending the 'ui' class.
Nesting shortcodes
Container in a container.
[container]
  [ui container]Container in a container.[/ui]
[/container]

Notes

'ui' shortcode is same as 'div', except the .ui class is prepended by default.
Address
Mozilla Foundation
1981 Landings Drive
Building K
Mountain View, CA 94043-0801
USA
[address]
  Mozilla Foundation<br>
  1981 Landings Drive<br>
  Building K<br>
  Mountain View, CA 94043-0801<br>
  USA
[/address]