Markdown List Widgets



This guide introduces GitPitch list widgets, a special syntax for activating custom styles and custom behaviors for markdown list content on your slides.


Unordered List Widget Syntax

To activate a list widget on unordered list content simply wrap any standard markdown list block in opening @ul and closing @ulend tags as shown here:


@ul
- Markdown
- Modular
- Git Native
- Speaker Ready
- Cross Platform
@ulend

This markdown snippet is rendered as follows:

UNORDERED LIST WIDGET

As you can see the widget automatically activates slide fragments for your list content. To understand and control this behavior, see the section on Widget Slide Fragment Behaviors.

The widget can also wrap unordered nested list content as shown here:


@ul
- Markdown
    - GFM
    - Widgets
- Git Native
    - GitHub
    - GitLab
    - Bitbucket
- Cross Platform
    - Linux
    - MacOS
    - Windows 10
@ulend

You must indent nested list content using 4 spaces in your markdown file.

This same widget can also wrap a mix of unordered list content with nested ordered content as shown here:


@ul
- Markdown
    1. GFM
    1. Widgets
- Git Native
    1. GitHub
    1. GitLab
    1. Bitbucket
- Cross Platform
    1. Linux
    1. MacOS
    1. Windows 10
@ulend

You must indent nested list content using 4 spaces in your markdown file.


Ordered List Widget Syntax

To activate a list widget on ordered list content simply wrap any standard markdown list block in opening @ol and closing @olend tags as shown here:


@ol
1. Markdown
1. Modular
1. Git Native
1. Speaker Ready
1. Cross Platform
@olend

This markdown snippet is rendered as follows:

ORDERED LIST WIDGET

As you can see the widget automatically activates slide fragments for your list content. To understand and control this behavior, see the section on Widget Slide Fragment Behaviors.

This widget can also wrap ordered nested list content as shown here:


@ol
1. Markdown
    1. GFM
    1. Widgets
1. Git Native
    1. GitHub
    1. GitLab
    1. Bitbucket
1. Cross Platform
    1. Linux
    1. MacOS
    1. Windows 10
@olend

You must indent nested list content using 4 spaces in your markdown file.

This same widget can also wrap a mix of ordered list content with nested unordered content as shown here:


@ol
1. Markdown
    - GFM
    - Widgets
1. Git Native
    - GitHub
    - GitLab
    - Bitbucket
1. Cross Platform
    - Linux
    - MacOS
    - Windows 10
@olend

You must indent nested list content using 4 spaces in your markdown file.


List Widget Slide Fragments Behavior

By default, list widgets activate slide fragments behavior for your list content. Causing each item in your list to be revealed step-by-step on your slide:

LIST WIDGET DEFAULT BEHAVIOR

You can disable this default behavior, for example, when you are using the widget for the sole purpose of activating custom style properties on your list content. To disable the default slide fragments behavior specify false as the value on the widget as shown here:


@ol[...](false)
- Markdown
- Modular
- Git Native
- Speaker Ready
- Cross Platform
@olend

Note, in the above snippet custom properties on the widget are represented by the ... ellipsis. The following snippet is a concrete demonstration of the list widget being used to display static list content with custom style properties:


@ol[text-17 text-bold font-quicksand](false)
- Markdown
- Modular
- Git Native
- Speaker Ready
- Cross Platform
@olend

This markdown snippet renders as follows:

LIST WIDGET DISABLED BEHAVIOR

As you can see the custom properties on the widget have activated custom styles for the list content while slide fragments have been disabled so the content has been rendered statically on the slide.


List Widget Built-In Styles Activation

GitPitch ships with a wide range of built-in CSS Utility Styles. These styles can be used to override the default styles for your slide deck. By simply referencing these utility styles by name you can quickly customize the appearance of content on any slide, including list content.

There are built-in utility styles for a wide range of text colors, font sizes, font styles, even font families. Plus a built-in set of styles that can be used to change the style of bullet icons used by your lists. Details in the CSS Utility Styles Guide.

The following markdown snippet demonstrates the activation of a number of these utility styles on a sample slide that uses a list widget:


@snap[west span-45 text-center]
Slide Decks<br>for Developers
@snapend

@snap[east span-55 text-center]
@ul[list-square-bullets list-spaced-bullets font-concert-one text-12 text-italic text-yellow](false)
- Markdown
- Modular
- Git Native
- Speaker Ready
- Cross Platform
@ulend
@snapend

This markdown snippet is rendered as follows:

LIST WIDGET BUILT-IN PROPERTIES

Any combination of built-in and custom CSS styles can be activated on the list widget by specificying the class names as properties on the widget.


List Widget Custom Styles Activation

If you want complete control over the appearance of list content on your slides you can use Custom CSS. For example, the following CSS snippet declares a custom style rule that activates a striped effect using alternating colors on list items:


ul.striped-list-items {
  color: #001F3F;
}

ul.striped-list-items > li:nth-child(even){
  color: white;
}

This custom style rule can be activated as a property on a sample list widget as shown here:


@snap[west span-45 text-center]
Slide Decks<br>for Developers
@snapend

@snap[east span-55 text-center]
@ul[list-square-bullets striped-list-items](false)
- Markdown
- Modular
- Git Native
- Speaker Ready
- Cross Platform
@ulend
@snapend

This markdown snippet is rendered as follows:

LIST WIDGET CUSTOM PROPERTIES

Any combination of built-in and custom CSS styles can be activated on the list widget by specificying the class names as properties on the widget.


List Widget Speaker Mode Fragment Behaviors

If you are a regular speaker at tech conferences or meetups you already understand that simple, distracation free slides allow for a more focused and engaged audience.

To help you create simple, distraction free slides GitPitch supports two special behaviors for list content that ensure laser focus for speakers and audiences alike.

The first speaker beahvior is called list-hide-fragments and can be activated as a property on a list widget as shown here:


@snap[west span-45 text-center]
Slide Decks<br>for Developers
@snapend

@snap[east span-55 text-center]
@ul[list-spaced-bullets list-hide-fragments]
- Markdown
- Modular
- Git Native
- Speaker Ready
- Cross Platform
@ulend
@snapend

This markdown snippet is rendered as follows:

LIST WIDGET HIDE FRAGMENTS

This behavior causes exlusive focus on one and only one list item on the slide at any given time. All other items in the list are hidden. A great way to focus 100% of your audience’s attention on your current talking point.

The second speaker beahvior is called list-fade-fragments and can be activated as a property on a list widget as shown here:


@snap[west span-45 text-center]
Slide Decks<br>for Developers
@snapend

@snap[east span-55 text-center]
@ul[list-spaced-bullets list-fade-fragments]
- Markdown
- Modular
- Git Native
- Speaker Ready
- Cross Platform
@ulend
@snapend

This markdown snippet is rendered as follows:

LIST WIDGET FADE FRAGMENTS

This behavior ensures clear focus is always maintained on the current list item. While previous list items are still visible, but muted. Muted list items provide useful context for your audience without creating an unnecessary distraction on the slide.


List Widget Speaker Mode Fragment Notes

GitPitch slide decks provide extensive speaker support. Including speaker mode fragment notes on the list widget as described here.

The following sample slide markdown demonstrates the use of one slide-specific note plus a series of list item fragment-specific speaker notes:


@ul
- Markdown @note[GFM. Plus GitPitch Markdown Widgets.]
- Modular  @note[Supports modular design of slide decks using modular markdown.]
- Git Native @note[Manage slide decks as code. On GitHub, GitLab, and Bitbucket.]
- Speaker Ready @note[Dedicated speaker window, previews, timer, speaker notes.]
- Cross Platform @note[Available on Linux, MacOS, and Windows 10.]
@ulend

Note:

What makes GitPitch the perfect slide deck solution for developers? 

This markdown snippet is rendered as follows:

LIST WIDGET SPEAKER MODE FRAGMENT NOTES

This feature gives you list item specifc speaker notes to refer to when you are live on stage. These notes are optional. If a list item does not have it’s own custom speaker note, then the slide-specific speaker note is displayed in the speaker window.