Custom classes

Overview

The College Drupal distribution supports placing additional classes on most content rows using the “Custom Class” field. This class is applied to the wrapper of the content row. You can add multiple classes by separating them with a space. 
 

Animation classes

Animation classes from https://daneden.github.io/animate.css/ can be used in the Custom Class field. The field should also contain the “animated” class. The usage of the "animate__" prefix is not necessary within the context of our distribution.

By default, the animation will play on page load, so items below the fold will play before you see them. You can prefix the animate.css class with “scroll-” to prevent the animation from playing until the user scrolls into view. This feature is not a part of the animate.css library so they don’t mention it in their documentation.

An example of a content row where the content fades in from below when the user scrolls into view:

Default classes

There are a number of built in classes to further style a content row. This list will grow in the future.

Class name Description
starburst Adds an ASU starburst effect to the background. Works with most colors but not background images.
stripes Adds a subtle striped effect to the background. Works with most colors but not background images.
narrow Reduces the max width of the content. Useful when a paragraph would span the full page width to improve readability.
jumbo Make all the headings and text larger.
height-100vh Makes the height 100% of the current viewport (browser window)
vertical-center Center the content vertically in the container. Works well to put text in the center of an image overlay or in a two column setup.
heading-left Left align the heading field (default is center)
heading-right Right align the heading field (default is center)
hide-heading Hide the heading field, useful if using tabs/accordions to prevent the heading from appearing twice, once in the tab item and once in the content.
hide Hide the whole section from the published page.
edge-to-edge Eliminate margins and make element full width.
img-to-edge Make the first image in the content ignore margins and expand to full width.

Custom classes

In addition to the animation and default classes, you can write your own classes to use in the Custom Class field using the Drupal Asset Injector module included with The College Drupal distribution. Go to /admin/config/development/asset-injector/css to create a new stylesheet for your site. You can specify which pages it applies to or make it global.