Examples - Snap Inspirations



The GitPitch Quickstart Template provides a wide variety of slide designs delivered using snap-layouts. We recommend the template as the perfect starting point for any slideshow presentation.

The GitPitch Quickstart Template slide designs are directly inspired by some of the most popular slide templates widely used by established tools like Powerpoint, Keynote, and Google Slides. Learn more.

The following section provides a number of additional examples of common slide patterns to demonstrate the snap-layouts system for real-world use-cases.



Example 1. Present Architecture Plus Details

The following sample slide markdown demonstrates the use of snap-layouts to present an architectural diagram (or any image) alongside a paragraph of descriptive text:

---?color=#E6E8EC

@snap[north-west]
@size[1.5em](GraphQL)
@snapend

@snap[west graphql-details]
GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
@snapend

@snap[east graphql-arch]
![](assets/images/graphql.png)
@snapend

This markdown snippet renders as follows:

SNAP-INSPIRATION-IMAGE-INTRO

This sample slide uses custom css classes - named graphql - to style and size the content on the slide. Here is the full definition of the custom css styles used to create this sample slide:

.graphql-details {
  width: 50%;
  color: gray;
  font-size: 0.7em !important;
  line-height: 1.5em !important;
}

.graphql-arch img {
  width: 50%;
  border: none !important;
  box-shadow: none !important;
}


Example 2. Present Architecture Plus Bullets

The following sample slide markdown demonstrates the use of snap-layouts to present an architectural diagram (or any image) alongside a series of related bullet points:

---?color=#E6E8EC

@snap[north-east graphql-title]
@size[1.5em](GraphQL)
@snapend

@snap[east graphql-bullets]
@ul[](false)
- Query is a read-only operation
- Mutation is a read-write operation
- Resolver provides a mapping between a portion of a GraphQL operation and a backend handler
- Schema defines what queries and mutations can be performed
- Type defines the shape of response data that can be returned
@ulend
@snapend

@snap[west graphql-arch]
![](assets/images/graphql.png)
@snapend

This markdown snippet renders as follows:

SNAP-INSPIRATION-IMAGE-BULLETS

This sample slide uses custom css classes - named graphql - to style and size the content of the slide. Here is the full definition of the custom css styles used to create this sample slide:

.graphql-title {
  width: 50%;
  text-align: center;
}

.graphql-bullets {
  width: 50%;
  color: gray;
  font-size: 0.7em !important;
  line-height: 1.5em !important;
}

.graphql-arch img {
  width: 50%;
  border: none !important;
  box-shadow: none !important;
}


Example 3. Introduce Speaker Biography

The following sample slide markdown demonstrates the use of snap-layouts to create a sample speaker bio - a slide type that commonly appears in decks for meetups and conferences:

---?color=black

@snap[west]
@css[bio-about](Freelance Developer<br>Founder / Maker)
<br><br><br>
@fa[terminal fa-3x bio-fa](geek)
<br><br><br>
@css[bio-about](OSS Contributor<br>Conference Speaker)
@snapend

@snap[east bio]
@css[bio-headline](David Russell)
<br>
@css[bio-byline](@fa[github pad-fa] gitpitch @fa[twitter pad-fa])
<br>
![](assets/img/ram.jpg)
<br>
@css[bio-tagline](A face made for radio!)
@snapend

This markdown snippet renders as follows:

SNAP-INSPIRATION-BIO

This sample slide uses custom css classes - named bio - to style different elements of the speaker biography. Here is the full definition of the custom css styles used to create this sample slide:

.bio {
  text-align: center;
}

.bio img {
    width: 80%;
    border-radius: 50%;
}

.bio-headline {
  color: white;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 1.0em !important;
}

.bio-byline {
  color: darkgray;
  font-size: 0.6em !important;
}

.bio-tagline {
  color: gray;
  font-size: 0.8em !important;
  font-style: italic !important;
}

.bio-contact {
  color: white;
  font-size: 0.7em !important;
}

.bio-about {
  font-size: 0.8em !important;
}

.bio-fa {
  color: #E49436;
}


Example 4. Present Steps In A Process

The following sample slide markdown demonstrates the use of snap-layouts to present a series of steps in a sample process - each step revealed on the slide one at a time using snap-layout slide fragments:

---?color=silver

@snap[north]
@css[message black](The Process)
@snapend

@snap[west process fragment]
Step 1.
<br><br>
Ready
@snapend

@snap[midpoint process fragment]
Step 2.
<br><br>
Steady
@snapend

@snap[east process process-go fragment]
Step 3.
<br><br>
Go!
@snapend

This markdown snippet renders as follows:

SNAP-INSPIRATION-PROCESS

This sample slide uses custom css classes - named process - to style each step of the process. Here is the full definition of the custom css styles used to create this sample slide:

.process {
  width: 25%;
  color: white;
  background-color: black;
  border-radius: 20px;
  padding: 30px 20px !important;
}

.process-go {
  color: black;
  background-color: white;
}
Power Feature!

Note the use of the snap-layouts fragment class. You can use this class to reveal individual pieces of snapped-content in a step-by-step manner on any slide.


Example 5. Present Events On A Timeline

The following sample slide markdown demonstrates the use of snap-layouts to present distinct events in a sample timeline:

---?color=black

@snap[north-west]
@color[white](@fa[clock-o fa-4x])
@snapend

@snap[north-east]
@css[message white](The Timeline)
@snapend

@snap[south-west timeline idea]
@fa[calendar](Nov 2017)
<hr><br><br>
@fa[lightbulb-o](Idea)
@snapend

@snap[midpoint timeline prototype]
@fa[calendar](May 2018)
<hr><br><br>
@fa[cog](Prototype)
@snapend

@snap[south-east timeline launch]
@fa[calendar](Oct 2018)
<hr><br><br>
@fa[rocket](Launch!)
@snapend

This markdown snippet renders as follows:

SNAP-INSPIRATION-TIMELINE

This sample slide uses custom css classes - named timeline - to style each event in the timeline. Here is the full definition of the custom css styles used to create this sample slide:

.timeline {
  color: black;
  width: 25%;
  border-radius: 20px;
  padding: 30px 20px !important;
}

.timeline hr {
  border-top: 1px solid black;
}

.idea {
  background-color: #F7977A;
}

.prototype {
  background-color: #FFF79A;
}

.launch {
  background-color: #82CA9D;
}

.message {
  color: black;
  letter-spacing: 4px;
  text-transform: uppercase;
}


Example 6. Thank The Sponsors

The following sample slide markdown demonstrates the use of snap-layouts to thank conference sponsers, organizers, etc. - a slide type that commonly appears in decks for meetups and conferences:

---?color=#E49436

@snap[north-west]
@fa[stack-overflow fa-4x]
@snapend

@snap[midpoint thanks]
Big Thanks To The Conference Sponsors
@snapend

@snap[north-east]
@fa[reddit fa-4x]
@snapend

@snap[south-west]
@fa[hacker-news fa-4x]
@snapend

@snap[south]
@fa[apple fa-4x]
@snapend

@snap[south-east]
@fa[amazon fa-4x]
@snapend

This markdown snippet renders as follows:

SNAP-INSPIRATION-THANKS

This sample slide uses custom css classes - named thanks - to style the thank-you message on the slide. Here is the full definition of the custom css styles used to create this sample slide:

.thanks {
  width: 80%;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 1.1em !important;
}

You could easily replace the sample logos on this slide with logos and brand images for your own sponsors.