Theme 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.


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 span-{width} styles in the range of 1..100 are currently available out-of-the-box:

.span-1   { width:  1% !important }
.span-2   { width:  2% !important }
.span-3   { width:  3% !important }
.span-4   { width:  4% !important }
.span-5   { width:  5% !important }
.span-6   { width:  6% !important }
.span-7   { width:  7% !important }
.span-8   { width:  8% !important }
.span-9   { width:  9% !important }
.span-10  { width: 10% !important }
.span-11  { width: 11% !important }
.span-12  { width: 12% !important }
.span-13  { width: 13% !important }
.span-14  { width: 14% !important }
.span-15  { width: 15% !important }
.
.
.
.span-95  { width: 95% !important }
.span-96  { width: 96% !important }
.span-97  { width: 97% !important }
.span-98  { width: 98% !important }
.span-99  { width: 99% !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 Markdown List Widget 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.


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:


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 availableo ut-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:


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:


Text Font Family Styles

Note, the Font Family styles are available to decks using the Theme Template only.

The set of available font-{family-name} styles can be used to activate a custom font family for a specific block of plain-text or list-item text.

The font-{family-name}-{weight} styles are currently available out-of-the-box:


.font-lato         	{ font-family: "Lato" !important; }
.font-montserrat   	{ font-family: "Montserrat" !important; }
.font-nunito-sans  	{ font-family: "Nunito Sans" !important; }
.font-open-sans    	{ font-family: "Open Sans" !important; }
.font-oswald       	{ font-family: "Oswald" !important; }
.font-poppins      	{ font-family: "Poppins" !important; }
.font-prompt       	{ font-family: "Prompt" !important; }
.font-quicksand       	{ font-family: "Quicksand" !important; }
.font-raleway      	{ font-family: "Raleway" !important; }
.font-roboto       	{ font-family: "Roboto" !important; }
.font-source-sans-pro 	{ font-family: "Source Sans Pro" !important; }
.font-ubuntu       	{ font-family: "Ubuntu" !important; }
.font-work-sans    	{ font-family: "Work Sans" !important; }
.font-bubblegum    	{ font-family: "Bubblegum" !important; }
.font-concert-one  	{ font-family: "Concert One" !important; }
.font-righteous    	{ font-family: "Righteous" !important; }

.font-lato-medium         { font-family: "Lato Medium" !important; }
.font-montserrat-medium   { font-family: "Montserrat Medium" !important; }
.font-nunito-sans-medium  { font-family: "Nunito Sans Medium" !important; }
.font-open-sans-medium    { font-family: "Open Sans Medium" !important; }
.font-oswald-medium       { font-family: "Oswald Medium" !important; }
.font-poppins-medium      { font-family: "Poppins Medium" !important; }
.font-prompt-medium       { font-family: "Prompt Medium" !important; }
.font-quicksand-medium    { font-family: "Quicksand Medium" !important; }
.font-raleway-medium      { font-family: "Raleway Medium" !important; }
.font-roboto-medium       { font-family: "Roboto Medium" !important; }
.font-source-sans-pro-medium { font-family: "Source Sans Pro Medium" !important; }
.font-ubuntu-medium       { font-family: "Ubuntu Medium" !important; }
.font-work-sans-medium    { font-family: "Work Sans Medium" !important; }

.font-lato-heavy         { font-family: "Lato Heavy" !important; }
.font-montserrat-heavy   { font-family: "Montserrat Heavy" !important; }
.font-nunito-sans-heavy  { font-family: "Nunito Sans Heavy" !important; }
.font-open-sans-heavy    { font-family: "Open Sans Heavy" !important; }
.font-oswald-heavy       { font-family: "Oswald Heavy" !important; }
.font-poppins-heavy      { font-family: "Poppins Heavy" !important; }
.font-prompt-heavy       { font-family: "Prompt Heavy" !important; }
.font-quicksand-heavy    { font-family: "Quicksand Heavy" !important; }
.font-raleway-heavy      { font-family: "Raleway Heavy" !important; }
.font-roboto-heavy       { font-family: "Roboto Heavy" !important; }
.font-source-sans-pro-heavy { font-family: "Source Sans Pro Heavy" !important; }
.font-ubuntu-heavy       { font-family: "Ubuntu Heavy" !important; }
.font-work-sans-heavy    { font-family: "Work Sans Heavy" !important; }

Each font is made available at regular, medium, and heavy font-weight. For example, font-prompt, font-prompt-medium, and font-prompt-heavy respectively.

For example, the following sample markdown demonstrates the use of regular font-{family-name} styles on distinct blocks of text:


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

@snap[north span-100 font-righteous]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
@snapend

@snap[south span-100 font-montserrat text-white]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
@snapend

This markdown snippet renders as follows:


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:


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:


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:


List Bullet Styles

Note, the List Bullet styles are available to decks using the Theme Template only.

The set of available list-{type}-bullets styles can be used to set a custom bullet style for list content.

The following list-{type}-bullets styles are currently available out-of-the-box:


.list-circle-bullets    { list-style-type: circle !important; }
.list-square-bullets    { list-style-type: square !important; }
.list-alpha-bullets     { list-style-type: upper-alpha !important; }
.list-roman-bullets     { list-style-type: lower-roman !important; }
.list-spaced-bullets li { margin-bottom: 1em; }
.list-no-bullets        { list-style-type: none !important; }

For example, the following sample markdown demonstrates the use of list-{type}-bullets styles to customize a sample list:


---?color=#1D1E22

@ul[list-square-bullets list-spaced-bullets font-righteous text-pink](false)
- Lorem ipsum dolor sit amet.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Nunc dignissim risus id metus.
- Cras ornare tristique elit.
@ulend

This markdown snippet renders as follows:


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.