Publii Default Generated CSS: A Cheat Sheet for Everyone

When we started developing Publii and defining how its theme-building process would work, we tried to minimize CSS class generation. Almost all of them are generated by the editors, with just a few others that are generated by other components such as menus.

In this tutorial, you'll find a complete list of all of Publii’s default CSS classes, separated by the components that generate them with examples of HTML markup so that you can see how they work and where are used.

Editor-Generated Classes:

Images

When uploading images via an editor (i.e. when editing or writing a post in Publii), users are given the option to specify how the image should be aligned, with five variants available (excluding the default one): full, wide, left-aligned, right-aligned and centered. 

Some of these variants will require an additional container around the image to work correctly; for this reason, we decided to wrap all instances of an image in Publii in a <figure> element. The image caption, if it exists, is added into a <figcaption> element without any class attached.

When an image is added into a post, it is assigned the .post__image class, with additional sub-classes that define the alignment, as follows:

.post__image--left {}
.post__image--right {}
.post__image--center {}
.post__image--wide {}
.post__image--full  {}

SCSS example:

.post {
   &__image {
         &--left { float: left; max-width: 50%; }
         &--right { float: right; max-width: 50%;}
         &--center { display: block; margin: auto; text-align: center;}
         &--wide {} // depending on the theme design
         &--full {} // depending on the theme design
   }
}

The generated HTML markup:

<figure class="post__image post__wide">
    <img src="image.jpg" alt="Alternative text">
    <figcaption> Caption / Credits </figcaption>
</figure>

Video

When video media elements are inserted into a post by providing the source URL or Embed code, they are generated with a <figure> element that, like with images, uses a .post__video class:

.post__video {} 

SCSS example:

.post {
    &__video {} 
}

The generated HTML markup:

<figure class="post__video">
   <video>
      <source>
    </video>
</figure>

Iframe

Iframe When iframe media elements are inserted by providing an Embed code, they are generated into a <div> element that uses the .post__iframe class.

.post__iframe {} 

SCSS example:

.post {
    &__iframe{} 
}

The generated HTML markup:

<div class="post__iframe">
   <iframe> … </iframe>
</div>

Text

To set the text alignment to left, right, center, or justified the following classes are generated by editors:

.align-left {} 
.align-right {} 
.align-center {} 
.align-justify {}

SCSS example:

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

The generated HTML markup:

<p class="align_left">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit
</p>

Table of contents (TOC)

The table of contents is a snapshot of the headings in a post and is generated with the following class:

.post__toc {}

SCSS example:

.post {
    &__toc {} 
}

The generated HTML markup:

<div class="post__toc">
    <h3>Label</h3>
    <ul>
       <li>Item</li>
       <li>Item</li>
       <li>Item</li>
    </ul>
</div>

Separator 

To enhance the readability of your content you can use a separator. By default Publii does not generate any CSS class for this element, however in the block editor you can choose from several separator types. Because of this functionality, the <hr> element is given a .separator class, with the sub-classes for each separator type being as follows:

.separator--dot {}
.separator--dots {}
.separator--long-line {}

SCSS example:

.separator {
    &--dot {} 
    &--dots {} 
    &--long-line {}
}

The generated HTML markup:

<hr class="separator separator--dots">

Gallery

When you upload images into the gallery, Publii generates a <figure> element for each image and the caption is generated without any class into a <figcaption> element. All these items are packed into two <div> containers as they are required to apply the two available gallery layout options: --wide and --full:

.gallery-wrapper {}
.gallery-wrapper--wide {}
.gallery-wrapper--full {}
.gallery {}
.gallery__item {}

SCSS example:

.gallery {
	&-wrapper {
		&--wide {}
		&--full {}
	}
	&__item {}
}

The generated HTML markup:

<div class="gallery-wrapper gallery-wrapper--wide">
    <div class="gallery">
       <figure class="gallery__item">
          <a href="original-image.jpg">
              <img src="thumbnail.jpg">
          </a>
          <figcaption> Caption </figcaption>
       </figure>
   </div>
</div>

Classes generated by other elements:

Menu

In general, we are free to generate a menu structure with its own classes. In case, when the partials/menu.hbs file is not included in your theme,  Publii generates the following classes :

.menu {}
.menu-level-x {} // where 'x' is a menu level number
.submenu {}
.submenu-level-x {} // where 'x' is a submenu level number
.active {}
.has-submenu {}
.active-parent {}

The exact HTML markup that will be generated depends on how it is implemented by the theme creator; the below example only demonstrates where and how the above classes are generated by default:

<nav>
  <ul class="menu menu-level-1">
    <li>
       <li>Item</li>
       <li class="active-parent has-submenu"> Item
          <ul class="submenu submenu-level-2">
             <li class="active"> Item </li>
             <li> Item </li>
          </ul>
       </li>
       <li>Item</li>
    </li>
  </ul>
</nav>