GitPitch Presentation Of The Day #7

Learn how a little custom CSS can be used to create entirely new layouts for your GitPitch slides.

Welcome to this maiden post of the new year. I’d like to take this opportunity to wish everyone in the GitPitch community health and happiness in 2018.

This is also the latest post in the Presentation of the Day series. This series highlights some of the great work developed within the GitPitch community. You can find a link to earlier posts in this series along with related content on this blog here.

Drum Roll Please…

Without further ado let me introduce the latest GitPitch Presentation of the Day:

[ GitPitch Presentation of the Day ] — Click To Focus

Tip! Once the presentation has focus, press the F key to open the presentation for fullscreen viewing.

This presentation was created by Miguel Alho who can be found on GitHub here. This presentation was prepared for a recent DevOpsPorto Meetup. What makes this presentation perfect for the start of the new year is the message it delivers. It encourages a positive approach to Lifelong Learning and concludes with a very simple yet powerful challenge which I share with you here:

In 2018, go learn something new!

You can start your learning in 2018 by going directly to the GitHub repo for this GitPitch presentation to look over the presentation PITCHME.md markdown and PITCHME.yaml to see exactly how the presentation was created:

MiguelAlho/LearningChallenge2018_LearningChallenge2018 - Slide deck for the DevOpsPorto December 2017 meetup - challenging attendees to learn something…_github.com

Presentation Tips & Tricks!

One of my goals for this Presentation of the Day series is to use each post to highlight some powerful GitPitch features used by today’s featured presentation.

Today I’m going to highlight the use of custom CSS to create new and interesting layouts for your slides.

Side-by-Side Image Slide Layout

Here is something you don’t see everyday within most GitPitch presentations:

What makes this slide special? It was defined using standard Markdown yet the default top-to-bottom rendering of content on the slide has been replaced with side-by-side content rendering.

The Markdown found within the PITCHME.md for this slide is shown here:

#### Code Quality/Change Trend Analysis

<div class="left">

[codescene.io](https://codescene.io)

</div>

<div class="right">

[sonarqube.org](https://www.sonarqube.org)

</div>

As you can see, this is all valid Markdown. The addition of the HTML div elements allowed Miguel to activate custom CSS classes left and right respectively to partition his slide content into side-by-side blocks.

This rendering trick was achieved using pretty simple CSS. You can see the full custom CSS file for this presentation here.

Side-by-Side Mixed Content Slide Layout

Using the same left and right custom CSS classes Miguel was able to deliver a number of variations of side-by-side slide content, including side-by-side lists:

And side-by-side mixed image and list content:

Slide content presented in this way is commonly used by numerous presentation tools and today’s Presentation of the Day is a great example showing how GitPitch presentation authors can use this popular slide layout too.

Simple Custom CSS?

Just how simple is the custom CSS need to activate this type of custom slide layout?

I’m using a similar layout myself to deliver the following slide within the GitPitch introductory presentation:

The entire custom CSS I needed to deliver this side-by-side layout for this slide looks like this:

.reveal div.left {float: left; z-index: -10; width: 45%;}

.reveal div.right {float: right; z-index: -10; width: 55%;}

Simple! You can view the complete custom CSS file for the GitPitch introductory presentation here. Feel free to reuse any or all of it as needed :)

Presentations for Everyone on Git.

That’s it for today. I hope you were able to take some inspiration or helpful tips from today’s featured presentation. And thank you again Miguel Alho for your inspiring talk.

GitPitch lets you effortlessly craft and share beautiful content about the things you care about. Use it to promote, pitch or present absolutely anything ;)

If you have your own presentation that you think would be a good candidate for GitPitch Presentation of the Day please get in touch.

You can follow me right here on Medium or on Twitter for more news, tips and unique creations from the GitPitch community.