Snap Layouts Example 1



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 our sample slide looks as follows:


### GraphQL
@fa[quote-left](A query language for your API)
![GRAPHQL](assets/img/graphql.png)

The only new markdown in this snippet that may be unfamiliar to you is the use of the Font Awesome Markdown Widget. This markdown snippet renders as follows:

SNAP LAYOUTS GRID

Something is not quite right. Specifically, the image is overflowing the slide. Based on what we learned about aspect ratios in the Snap Layouts Syntax Guide we quickly realize that the sample image does not match the aspect ratio of our slide.


Step 2. Slide Content Sizing

This step updates the markdown to let us control the horizontal and vertical height of the snapped content to fit within the bounds of our sample slide.

To prevent content overflowing the slide we can wrap our sample markdown block in snap-tags and specify a custom span-xxx property value to control the width and height of the snapped content within the bounds of the space available on our slide.


@snap[midpoint span-40]

### GraphQL
@fa[quote-left](A query language for your API)
![GRAPHQL](assets/img/graphql.png)

@snapend


This final markdown snippet renders as follows:

SNAP LAYOUTS GRID

Much better. As a general rule, you may need to play around with the span-xxx property value until you find the correct sizing for your specific slide content.

While this is a simple slide design it demonstrates an effective solution to a common issue when working with arbitrary image content within GitPitch slide decks. Check out the next Snap Layouts Example for tips on how to achieve more sophisticated slide layouts.