CSS Utility Styles



This guide documents the full set of CSS utility-styles that are available out-of-the-box to GitPitch presentation authors. While you can create your own custom css for any slide deck, these utility-styles are built-in to support common use-cases.

To override any of the utility styles documented in this guide, see overriding utility styles.


1. Span (Width) Styles

The set of available span-{width} styles can be used to constrain the horizontal-space used by content on your slides. Note, by constraining the horizontal width of specific slide content, the vertical height of that same content is adjusted automatically.

The following span-{width} styles are currently available out-of-the-box:

.span-5   { width:  5% !important }
.span-10  { width: 10% !important }
.span-15  { width: 15% !important }
.span-20  { width: 20% !important }
.span-25  { width: 25% !important }
.span-30  { width: 30% !important }
.span-35  { width: 35% !important }
.span-40  { width: 40% !important }
.span-45  { width: 45% !important }
.span-50  { width: 50% !important }
.span-55  { width: 55% !important }
.span-60  { width: 60% !important }
.span-65  { width: 65% !important }
.span-70  { width: 70% !important }
.span-75  { width: 75% !important }
.span-80  { width: 80% !important }
.span-85  { width: 85% !important }
.span-90  { width: 90% !important }
.span-95  { width: 95% !important }
.span-100 { width: 100% !important }

The span-{width} styles can be applied to a wide range of content types on your slides. The most frequent use-case for these styles is to control the width of content within different regions on the slide when you are using snap-layouts. But the span-{width} styles are also very useful when working with list content, and inline images as the following examples demonstrate.


Example: Snap-Layouts Span Style Activation

The following markdown snippet demonstrates standard snap-layouts syntax where span-{width} styles have been activated to constrain the width of content in each snap-region:


+++?color=black

@snap[west span-45]
# Step by Step
@snapend

@snap[north-east span-60]
@box[bg-purple text-white](Step 1.#Lorem ipsum dolor sit amet, consectetur adipiscing elit.)
@snapend

@snap[east span-60]
@box[bg-orange text-white](Step 2.#Sed do eiusmod tempor incididunt ut labore ut enim ad.)
@snapend

@snap[south-east span-60]
@box[bg-pink text-white](Step 3.#Cupidatat non proident sunt in culpa officia veniam quis.)
@snapend

The following screenshot shows the slide generated by the sample markdown snippet:

The above screenshot demonstrates how the text content in the western region of the slide has been constrained by the span-45 style while the width of the boxed content in the eastern regions have all been constrained by the span-60 style.


Example: List Content Span Style Activation

The following markdown snippet demonstrates standard list shortcut syntax:

---?color=linear-gradient(to top, #a1c4fd, #c2e9fb)

@ol
- Lorem ipsum dolor sit amet, consectetur elit
- Ut enim ad minim veniam, quis exercitation
- Duis aute irure in reprehenderit in voluptate
@olend

The following markdown snippet demonstrates the same list shortcut syntax where a span style has been activated to constrain the width of the list content on the slide:


---?color=linear-gradient(to top, #a1c4fd, #c2e9fb)

@ol[span-50]
- Lorem ipsum dolor sit amet, consectetur elit
- Ut enim ad minim veniam, quis exercitation
- Duis aute irure in reprehenderit in voluptate
@olend

The following screenshots show the slides generated by the above sample markdown snippets:

While the list content is identical on both slides, the space given to rendering the list content on the second slide is controlled by the activation of the span-50 style.


Example: Inline Image Span Style Activation

The following markdown snippet demonstrates standard image shortcut syntax:


---?color=linear-gradient(to top, #93a5cf, #e4efe9)

@snap[west]
## Earthrise
@snapend

@snap[east]
@img[](template/img/moon.jpg)
@snapend

The following markdown snippet demonstrates the same image shortcut syntax where a span style has been activated to constrain the width of the inline image on the slide:


---?color=linear-gradient(to top, #93a5cf, #e4efe9)

@snap[west]
## Earthrise
@snapend

@snap[east]
@img[span-65](template/img/moon.jpg)
@snapend

The following screenshots show the slides generated by the above sample markdown snippets:

While the slide content is similar on both slides, the space given to rendering the inline image on the second slide is controlled by the activation of the span-65 style.


2. Text Color Styles

The set of available text-{color} styles can be used to set custom colors for plain text rendered on your slides.

The following text-{color} styles are currently available out-of-the-box:


.text-black  { color: #000000 !important; }
.text-blue   { color: #4487F2 !important; }
.text-gray   { color: #777777 !important; }
.text-green  { color: #8EA33B !important; }
.text-orange { color: #F26225 !important; }
.text-gold   { color: #E58537 !important; }
.text-pink   { color: #E71E60 !important; }
.text-purple { color: #643B85 !important; }
.text-yellow { color: #F5DB2E !important; }
.text-white  { color: #FFFFFF !important; }

For example, the following sample markdown demonstrates the use of text-{color} styles in a number of distinct use-cases:


---?color=linear-gradient(to top, #868f96, #596164)

@snap[north text-gold]
GitPitch
@snapend

@css[text-white](The Markdown Presentation Service on Git)

@snap[south text-black span-100]
For Everyone on GitHub, GitLab, and Bitbucket.
@snapend

This markdown snippet renders as follows:


3. Text Font Size Styles

The set of available text-{size} styles can be used to change the font size of plain text rendered on your slides. Sizes represent CSS em values.

The following text-{size} styles are currently available out-of-the-box:


.text-01 { font-size: 0.1em !important; }
.text-02 { font-size: 0.2em !important; }
.text-03 { font-size: 0.3em !important; }
.text-04 { font-size: 0.4em !important; }
.text-05 { font-size: 0.5em !important; }
.text-06 { font-size: 0.6em !important; }
.text-07 { font-size: 0.7em !important; }
.text-08 { font-size: 0.8em !important; }
.text-09 { font-size: 0.9em !important; }
.text-10 { font-size: 1.0em !important; }
.text-11 { font-size: 1.1em !important; }
.text-12 { font-size: 1.2em !important; }
.text-13 { font-size: 1.3em !important; }
.text-14 { font-size: 1.4em !important; }
.text-15 { font-size: 1.5em !important; }
.text-16 { font-size: 1.6em !important; }
.text-17 { font-size: 1.7em !important; }
.text-18 { font-size: 1.8em !important; }
.text-19 { font-size: 1.9em !important; }
.text-20 { font-size: 2.0em !important; }
.text-21 { font-size: 2.1em !important; }
.text-22 { font-size: 2.2em !important; }
.text-23 { font-size: 2.3em !important; }
.text-24 { font-size: 2.4em !important; }
.text-25 { font-size: 2.5em !important; }
.text-30 { font-size: 3.0em !important; }
.text-35 { font-size: 3.5em !important; }
.text-40 { font-size: 4.0em !important; }
.text-45 { font-size: 4.5em !important; }
.text-50 { font-size: 5.0em !important; }

For example, the following sample markdown demonstrates the use of text-{size} styles in a number of distinct use-cases:


---?color=linear-gradient(to top, #868f96, #596164)

@snap[north text-15 text-gold]
GitPitch
@snapend

@css[text-25 text-white](The Fastest Way from Idea to Presentation)

@snap[south text-06 text-gray span-100]
For Everyone on GitHub, GitLab, and Bitbucket.
@snapend

This markdown snippet renders as follows:


4. Text Font Weight Styles

The set of available text-{weight} styles can be used to change the weight or style of plain text rendered on any slide.

The following text-{weight} styles are currently available out-of-the-box:


.text-bold       { font-weight: bold !important; }
.text-italic     { font-style: italic !important; }
.text-italics    { font-style: italic !important; }
.text-uppercase  { text-transform: uppercase !important; }
.text-lowercase  { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-smallcaps  { font-variant: small-caps !important; }

For example, the following sample markdown demonstrates the use of text-{weight} styles in a number of distinct use-cases:


---?color=linear-gradient(to top, #c79081, #dfa579)

@snap[north text-smallcaps text-white]
GitPitch
@snapend

@css[text-bold text-25 text-white](The Fastest Way<br>from<br>Idea to Presentation)

@snap[south text-italics text-white span-100]
For Everyone on GitHub, GitLab, and Bitbucket.
@snapend

This markdown snippet renders as follows:


5. Text Alignment Styles

The set of available text-{alighment} styles can be used to change the alignment of text rendered on your slides.

The following text-{alignment} styles are currently available out-of-the-box:


.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

For example, the following sample markdown demonstrates the use of the text-{right} alignment style:


---?color=linear-gradient(to top, #1e3c72, #2a5298)

@snap[midpoint text-right text-white]
The Moon Rise
@img[](template/img/moon.jpg)
@snapend

This markdown snippet renders as follows:


6. Heading Color Styles

The set of available h{level}-{color} styles can be used to set custom colors for markdown headings rendered on your slides.

The following h1-{color} styles are currently available out-of-the-box:

.h1-black  h1 { color: #000000 !important; }
.h1-blue   h1 { color: #4487F2 !important; }
.h1-gray   h1 { color: #777777 !important; }
.h1-green  h1 { color: #8EA33B !important; }
.h1-orange h1 { color: #F26225 !important; }
.h1-gold   h1 { color: #E58537 !important; }
.h1-pink   h1 { color: #E71E60 !important; }
.h1-purple h1 { color: #643B85 !important; }
.h1-yellow h1 { color: #F5DB2E !important; }
.h1-white  h1 { color: #FFFFFF !important; }

The following h2-{color} styles are currently available out-of-the-box:

.h2-black  h2 { color: #000000 !important; }
.h2-blue   h2 { color: #4487F2 !important; }
.h2-gray   h2 { color: #777777 !important; }
.h2-green  h2 { color: #8EA33B !important; }
.h2-orange h2 { color: #F26225 !important; }
.h2-gold   h2 { color: #E58537 !important; }
.h2-pink   h2 { color: #E71E60 !important; }
.h2-purple h2 { color: #643B85 !important; }
.h2-yellow h2 { color: #F5DB2E !important; }
.h2-white  h2 { color: #FFFFFF !important; }

The following h3-{color} styles are currently available out-of-the-box:


.h3-black  h3 { color: #000000 !important; }
.h3-blue   h3 { color: #4487F2 !important; }
.h3-gray   h3 { color: #777777 !important; }
.h3-green  h3 { color: #8EA33B !important; }
.h3-orange h3 { color: #F26225 !important; }
.h3-gold   h3 { color: #E58537 !important; }
.h3-pink   h3 { color: #E71E60 !important; }
.h3-purple h3 { color: #643B85 !important; }
.h3-yellow h3 { color: #F5DB2E !important; }
.h3-white  h3 { color: #FFFFFF !important; }

The following h4-{color} styles are currently available out-of-the-box:


.h4-black  h4 { color: #000000 !important; }
.h4-blue   h4 { color: #4487F2 !important; }
.h4-gray   h4 { color: #777777 !important; }
.h4-green  h4 { color: #8EA33B !important; }
.h4-orange h4 { color: #F26225 !important; }
.h4-gold   h4 { color: #E58537 !important; }
.h4-pink   h4 { color: #E71E60 !important; }
.h4-purple h4 { color: #643B85 !important; }
.h4-yellow h4 { color: #F5DB2E !important; }
.h4-white  h4 { color: #FFFFFF !important; }

For example, the following sample markdown demonstrates the use of h{level}-{color} styles in a number of distinct use-cases:


---?color=linear-gradient(to bottom, #B7F8DB, #50A7C2)

@snap[midpoint h1-purple h3-white]
# GitPitch
### The Markdown Presentation Service on Git
@snapend

This markdown snippet renders as follows:


7. Background Color Styles

The set of available bg-{color} styles can be used to set a custom background color for any container element on your slides.

The following bg-{color} styles are currently available out-of-the-box:


.bg-black  { background: #000000 !important; }
.bg-blue   { background: #4487F2 !important; }
.bg-gray   { background: #777777 !important; }
.bg-green  { background: #8EA33B !important; }
.bg-orange { background: #F26225 !important; }
.bg-gold   { background: #E58537 !important; }
.bg-pink   { background: #E71E60 !important; }
.bg-purple { background: #643B85 !important; }
.bg-yellow { background: #F5DB2E !important; }
.bg-white  { background: #FFFFFF !important; }

For example, the following sample markdown demonstrates the use of bg-{color} styles in a number of distinct use-cases:


---?color=black

@snap[north-west bg-green text-center span-40]
North West
@snapend

@snap[north-east bg-orange text-center span-40]
North East
@snapend

@snap[west bg-gray text-center span-30]
West
@snapend

@snap[midpoint text-white]
North<br><br>
@fa[compass fa-5x]
<br><br>South
@snapend

@snap[east bg-gray text-center span-30]
East
@snapend

@snap[south-west bg-pink text-center span-40]
South West
@snapend

@snap[south-east bg-blue text-center span-40]
South East
@snapend

This markdown snippet renders as follows:


8. Override Utility Styles

All CSS utility styles can be overridden using custom css.

The current set of CSS utility styles provide a useful template for creating new or derived styles that may be needed by your slide decks. Simply define a new style class and customize the properties on that class to meet your needs.

For example, the span utility styles are defined as a series of relative widths defined at 5% intervals… span-10, span-15, span-20, etc.

For a specific slide you may need greater precision when controlling the width of a slide element. For example, you may require a span-67. That can be easily achieved using custom css as follows:

.span-67  { width: 67% !important }

This same approach can be adopted to override or extend the set of utility styles available to your slide decks.