Snap Layouts Example 4



Snap Layouts Learn By Example

This guide demonstrates the use of GitPitch Snap Layouts to create the following sample slide.

SNAP LAYOUTS EXAMPLE SLIDE

Step 1. Initial Markdown

The initial markdown snippet for the north of our sample slide looks as follows:


@snap[north span-40]

### GraphQL
@fa[quote-left quote-graphql text-white](A query language for your API)

@snapend

This markdown snippet renders as follows:

SNAP LAYOUTS GRID

The use of the span-40 property ensures that the heading text is constrained to the central portion of our sample slide.


Step 2. Gradient Background

This step updates our markdown to deliver the color-gradient background effect for our sample slide:


---?color=linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 35%, rgba(0,212,255,1) 100%)

@snap[north span-40]

### GraphQL
@fa[quote-left quote-graphql text-white](A query language for your API)

@snapend

This intermediate markdown snippet renders as follows:

SNAP LAYOUTS EXAMPLE SLIDE

This effect is achieved by activating a color gradient on a color delimiter for the sample slide.


Step 3. Image Vertical Sizing

This step updates our markdown with the addition of an image centered and sized around the midpoint of our sample slide:


---?color=linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 35%, rgba(0,212,255,1) 100%)

@snap[north span-40]

### GraphQL
@fa[quote-left quote-graphql text-white](A query language for your API)

@snapend

@snap[midpoint span-60]
![GATEWAY](assets/img/gateway.png)
@snapend

This intermediate markdown snippet renders as follows:

SNAP LAYOUTS EXAMPLE SLIDE

The use of the span-60 property here ensures the architecture diagram fits vertically between the heading text in the north and the soon-to-be-added descriptive details in the south of our sample slide.


Step 4. Step-by-Step Content

This step updates our markdown with a series of descriptive steps across the south regions of our sample slide:


---?color=linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 35%, rgba(0,212,255,1) 100%)

@snap[north span-40]

### GraphQL
@fa[quote-left quote-graphql text-white](A query language for your API)

@snapend

@snap[midpoint span-60]
![GATEWAY](assets/img/gateway.png)
@snapend

@snap[south-west span-30 text-06]
@box[rounded text-white box-graphql](Step 1.#Describe your data.)
@snapend

@snap[south span-30 text-06]
@box[rounded text-white box-graphql](Step 2.#Ask for what you want.)
@snapend

@snap[south-east span-30 text-06]
@box[rounded text-white box-graphql](Step 3.#Get predictable results.)
@snapend

The updated markdown in this snippet makes use of the Boxed Text Widget. It also makes use of built-in Text Font Size Styles to customize the size of the text appearing in the Boxed Text Widgets.

This snippet also makes use of a sample custom CSS style called box-graphql that allows us to activate a custom background color for our Boxed Text Widgets. This sample custom CSS style is defined as follows:


.box-graphql { background: rgba(0,212,255,1); }

You can define your own custom CSS styles to be used as properties on any Markdown Widget in the same way. This intermediate markdown snippet renders as follows:

SNAP LAYOUTS EXAMPLE SLIDE


Step 4. Step-by-Step Fragments

This final step updates our markdown in order to reveal individual details on the slide one-by-one. As distinct to revealing all details on the sample slide at once:


---?color=linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 35%, rgba(0,212,255,1) 100%)

@snap[north span-40]

### GraphQL
@fa[quote-left quote-graphql text-white](A query language for your API)

@snapend

@snap[midpoint span-60]
![GATEWAY](assets/img/gateway.png)
@snapend

@snap[south-west span-30 text-06 fragment]
@box[rounded text-white box-graphql](Step 1.#Describe your data.)
@snapend

@snap[south span-30 text-06 fragment]
@box[rounded text-white box-graphql](Step 2.#Ask for what you want.)
@snapend

@snap[south-east span-30 text-06 fragment]
@box[rounded text-white box-graphql](Step 3.#Get predictable results.)
@snapend

The updated markdown in this snippet makes use of the fragment property on each of the south snap-regions.

This final markdown snippet renders our sample slide as follows:

SNAP LAYOUTS EXAMPLE SLIDE

Check out the next Snap Layouts Example for more sophisticated snap-layouts tips and tricks.