Snap Layouts Example 5



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


@snap[west span-40 -center]

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

@snapend

And identical markdown snippet has been used and described in detail in an earlier Snap Layouts Example. The markdown snippet renders as follows:

SNAP LAYOUTS GRID


Step 2. Tilted Split Screen

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


---?color=linear-gradient(100deg, white 50%, #567AD2 50%)

@snap[west span-40 text-center]

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

@snapend

This intermediate markdown snippet renders as follows:

SNAP LAYOUTS GRID

This effect is achieved by activating a color gradient on a color delimiter for the sample slide. The degree of tilt is determined by the value passed on the first parameter to the linear-gradient function.


Step 3. Heading Text

This step updates our markdown with the addition of heading text in the north-east of our sample slide:


---?color=linear-gradient(100deg, white 50%, #567AD2 50%)

@snap[west span-40 text-center]

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

@snapend

@snap[north-east span-40 text-center]
#### Deployment as a REST API Gateway
@snapend

This intermediate markdown snippet renders as follows:

SNAP LAYOUTS GRID

The use of the span-40 property constrains the heading text to wrap within the bounds of north-east region of the slide. The use of the text-center property sets a custom alignment for the snapped content creating a nice centered heading. The full set of built-in alignment properties are documented in the CSS Utility Styles Guide.


Step 4. PlantUML Generated Diagram

This final step updates our markdown to inject a PlantUML Diagram generated from a plain-text description into the east of our sample slide:


---?color=linear-gradient(100deg, white 50%, #567AD2 50%)

@snap[west span-40 text-center]

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

@snapend

@snap[north-east span-40 text-center]
#### Deployment as a REST API Gateway
@snapend

@snap[south-east span-40]
@uml[bg-white code-shadow](src/uml/graphql.puml)
@snapend

The use of the span-40 property here controls the width and height of the PlantUML SVG image rendered on our sample slide. This SVG image is generated using the UML Widget for Diagrams.

As a final note, the code-shadow property is a custom CSS style used to deliver a nice shadow effect for our sample UML diagram. 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 GRID