Template Mastery



This guide is designed to give you the information you need to quickly master the use of powerful layout and styling features that ship within The Template.

Whether you are simply trying to understand the core template syntax, or you plan to extend the template by developing custom CSS styles or even new slide designs, this guide provides invaluable information to help you achieve those goals.


The Template Snap Layouts Foundation

GitPitch supports snap layouts, a unique PITCHME.md layout syntax for markdown that can be used to control the placement of content on any slide. The template makes extensive use of this layout syntax to deliver the wide range of distinctive slide designs on offer.

Therefore, in order to take full advantage of the template you are encouraged to develop a basic understanding of the snap layouts syntax.

With an understanding of snap layouts under your belt, you are ready to move on to the next sections in this guide to learn how to style content on your slides.


The Template CSS Utility Styles

The template makes extensive use of the set of built-in CSS Utility Styles that give presentation authors powerful style controls for slide content. These utility styles are available out-of-the-box to all presentation authors.

The CSS utility styles include the following style rules:

  • Span styles that can be used to control the width and height of slide content
  • Text styles that can be used to control color, size, weight, and alignment
  • Heading styles that can be used to control the color of heading text
  • Background styles that can be used to activate custom background colors

You are strongly encouraged to familiarize yourself with these built-in CSS Utility Styles as they are used extensively to deliver the template slide designs.


The Template List Rendering Styles

The template ships with a number of list-xx classes that deliver flexible styles for different types of ordered and unordered list content.


List Content Concise Style

The following markdown snippet demonstrates the list-content-concise style that is suitable for use when rendering numerous, short bullet points on any slide:

---?color=lightgray

@snap[north-west]
The Agenda
@snapend

@snap[south-west list-content-concise span-60]
@ol[](false)
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Sed do eiusmod tempor
- Ut enim ad minim veniam
- Duis aute irure dolor in
- Excepteur sint occaecat
- Cupidatat non proident
- Sunt in culpa qui officia
@olend
<br><br>
@snapend

This markdown snippet renders as follows:

CONCISE


List Content Verbose Style

The following markdown snippet demonstrates the list-content-verbose style that is suitable for use when rendering a small number of long bullet points on any slide:

---?color=beige

@snap[north-west]
The Key Concepts
@snapend

@snap[west list-content-verbose span-100]
@ul
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@ulend
@snapend

This markdown snippet renders as follows:

VERBOSE


Overriding Template List Styles

Extending the default list-xx classes that ship with the template is as simple as adding new style rules. Giving you maximum flexibility and control. You can read more about activating custom css for your slideshow presentations here.

For example, the following custom CSS snippet defines a class that allows us to override the default background color (#F26225) that is applied for the bullets on list items:

.list-bullets-black li::before {
  background-color: black !important;
}

This custom CSS rule can be applied in your presentation markdown as follows:

---?color=lightgray

@snap[north-west]
The Agenda
@snapend

@snap[south-west list-content-concise span-60]
@ol[list-bullets-black](false)
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Sed do eiusmod tempor
- Ut enim ad minim veniam
- Duis aute irure dolor in
- Excepteur sint occaecat
- Cupidatat non proident
- Sunt in culpa qui officia
@olend
<br><br>
@snapend

Note how our list-bullets-black custom CSS style has been activated on the opening @ol tag. This markdown snippet renders as follows:

BLACK

A similar approach can be used to customize any aspect of the styles used for list-content within your slideshows, including list-item font sizes, margins, colors, etc.


The Template Partial Color Backgrounds

If you look closely at the files shipped within the template repository you will see the following series of image files in the template/img/bg directory:

.
├── PITCHME.md
├── PITCHME.yaml
└── template
    ├── css
    │   └── PITCHME.css
    └── img
        └── bg
            ├── black.jpg
            ├── blue.jpg
            ├── gray.jpg
            ├── green.jpg
            ├── orange.jpg
            ├── pink.jpg
            ├── purple.jpg
            ├── white.jpg
            └── yellow.jpg

These size-optimized, image files are used by the template as background images that are positioned and scaled on slides to create partial colored backgrounds.

This approach is used by a number of slide designs to fill a partial background area with color. A number of the split-screen, sidebar, sidebox, and header-footer slide designs use this approach.

For example, the split-screen slide designs show in the following screenshot are using the background images black.png, pink.png, and orange.png respectively:

SPLIT-SCREEN

As a presentation author you can use any of the slide designs that depend on this technique and then simply tweak the image file used on the background image delimiter in order to customize the color displayed on your custom slide.

You can also create new size-optimized, image files and fill partial background areas with custom colors on your slides.

Important! To fill the entire background area of a slide with color, use a color delimiter.