Snap Layouts Example 3



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 h3-black]

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

@snapend

This markdown snippet renders as follows:

SNAP LAYOUTS EXAMPLE SLIDE

The use of the span-40 property ensures that the heading text does not expand beyond the central portion of our sample slide. This snippet also makes use of the h3-black property. This is one of the built-in Heading Color Styles that can be used to customize the color of any markdown heading text on your slides. And of course, as a GitPitch presentation author you can always define your own custom heading colors.


Step 2. Horizontal Split Screen

This step updates our markdown to deliver the split-screen effect for our sample slide:


---?color=linear-gradient(180deg, white 50%, #E71E60 50%)

@snap[north span-40 h3-black]

### GraphQL
@fa[quote-left quote-graphql](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. Code Injection

This final step updates our markdown to inject code from an external file directly into the south of our sample slide:


---?color=linear-gradient(180deg, white 50%, #E71E60 50%)

@snap[north span-40 h3-black]

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

@snapend

@snap[south span-85]
@code[js zoom-13 code-max code-shadow](src/js/graphql.js)
@snapend

The use of the span-85 property here controls the width and height of the code block rendered on our sample slide. The code within that block is injected using a Code Widget.

Beyond simple code injection, the zoom-13 and code-max properties on that widget are taking advantage of powerful code features including Code Step-and-Zoom, Code Revealing, and Code Power Properties.

As a final note, the code-shadow property is a custom CSS style used to deliver a nice shadow effect for our sample code block. This sample custom CSS style is defined as follows:


.code-shadow {
    box-shadow:0 10px 16px 10px rgba(0,0,0,0.2),
            0 6px 20px 10px rgba(0,0,0,0.19) !important;
}

This final markdown snippet renders as follows:

SNAP LAYOUTS EXAMPLE SLIDE

Check out the next Snap Layouts Example for more tips and tricks including experiencing snapped content as slide fragments.