Snap Layouts Example 2



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 text-center]

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

@snapend

This markdown snippet renders as follows:

SNAP LAYOUTS EXAMPLE SLIDE

The use of the span-40 property controls the width and height of the snapped content, ensuring it fits within the west bounds of our slide. For a more detailed discussion of content sizing see this Snap Layouts Example.

The use of the text-center property sets a custom alignment for the snapped content creating a nice centered stack. By default, the following content alignment rules are active on the grid:

  1. Content in west grid-positions are automatically text-left aligned.
  2. Content in central grid-positions are automatically text-center aligned.
  3. Content in east grid-positions are automatically text-right aligned.

The full set of built-in alignment properties are documented in the CSS Utility Styles Guide.


Step 2. Vertical Split Screen

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


---?color=linear-gradient(90deg, white 50%, black 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 EXAMPLE SLIDE

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


Step 3. Boxed Title-and-Text

This step updates our markdown to deliver the boxed title-and-text in the east of our sample slide:


---?color=linear-gradient(90deg, white 50%, black 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-08]
@box[](Step 1. Schema # Define types using SDL)
@snapend

@snap[east span-40 text-08]
@box[](Step 2. Query # Fetch data with Queries)
@snapend

@snap[south-east span-40 text-08]
@box[](Step 3. Mutate # Modify data with Mutations)
@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 intermediate markdown snippet renders as follows:

SNAP LAYOUTS EXAMPLE SLIDE


Step 4. Colored Boxed Title-and-Text

This final step updates our markdown to deliver the colored boxed title-and-text in the east of our sample slide:


---?color=linear-gradient(90deg, white 50%, black 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-08]
@box[bg-green](Step 1. Schema # Define types using SDL)
@snapend

@snap[east span-40 text-08]
@box[bg-blue](Step 2. Query # Fetch data with Queries)
@snapend

@snap[south-east span-40 text-08]
@box[bg-gold](Step 3. Mutate # Modify data with Mutations)
@snapend

The updated markdown snippet makes use of the bg-green, bg-blue, and bg-gold properties on the Boxed Text Widgets to add a splash of color. These are just some of the built-in Background Color Styles available to all GitPitch presentation authors. And of course, as a GitPitch presentation author you can always define your own custom background colors.

This final markdown snippet renders as follows:

SNAP LAYOUTS EXAMPLE SLIDE

Check out the next Snap Layouts Example for more tips and tricks including the display of code within the snap-layouts grid.