Transitions and Modifiers classes

User Guide for Transitions and Modifiers classes

UNDP Project

April 15, 2021

Element Transitions

All elements that need to be transitioned should have a “scroll-track” class for initialization, followed by the direction class (explained below). Additionally, you can modify the delay for each individual transition by assigning a delay class. All transitions will execute once the element in question is within the user’s viewport (explained below).

There is no default treatment, all elements require a “scroll-track” class to be initialized and the direction class at minimum.

The available motion classes and direction are:

• Direction options (left to right, center-out, etc.)

  • Left to Right - Class name is “left-right”
  • Right to Left - Class name is “right-left”
  • Scale up - Class name is “scale-up”
  • Opacity only - Class name is “opacity-only”

• Delay options

  • To provide more flexibility when using transition delays, we have set dynamic classes that assign transition delays based on 50 and 100 milliseconds multipliers, from 1 to 20. Nomenclature goes as follows:
    • delay-: 100ms * multiplier
    • small-delay-: 50ms * multiplier

NOTE: If a wider required range of multipliers is required, the limit can be changed in the _animations.scss file.

 

These transitions can be applied to either the element or container, depending on the need. For example:

• If you want the whole section to appear at once, you can just assign the transition classes to the container.
• If you need the section elements to appear at a different timing or have different transitions, you can add the classes to each individual element.
  • Example implementation:
    • <p class=”scroll-track left-right”>Lorem</p>
    • <p class=”scroll-track left-right delay-1”>Lorem</p>

 

Element transition trigger

A library called “Appear” is being used to help track when elements are in viewport based on the scroll. This will track any element that contains the class “scroll-track” and once it’s in viewport, it will append the class “in-viewport”, which will trigger the transitions mentioned in the points above. For more information about the library refer to: https://github.com/creativelive/appear

 

Component Modifiers

There are two types of modifiers Global and Local. There are some details below.

Global modifiers

Only global modifier classes are for accent colors. If you’d like to change fonts, font-weights and so on, you will need to modify the _variables.scss file.

• Accent color

The way to go would be adding the accent color class to the page body. The accent color classes used globally are:

• .accent-yellow (if not class is added this should be the default)
• .accent-green
• .accent-red
• .accent-blue

Local

The rest of the modifiers available are just available for components. For example, no-arrow modifier used for buttons:

The base class for buttons is “btn”, this takes into account the arrow animation. The modifier to remove this behavior would be “no-arrow”:

<a href=”#” class=”btn”>

<a href=”#” class=”btn no-arrow”>

In this case, it would require a change in markup as well, to render or not the arrow image. For this purpose, there are two molecule templates implemented.

Other components that can use modifiers are:

• Stat Cards - The base class is “stat-card”, and it can modify its size, fonts, and spacings based on the following classes:

  • .small
  • .medium
  • .large
  • NOTE: Requires at least one of the above to be rendered properly.

• Article Cards - The base class is “article-card”, and it can modify its size, fonts, and spacings based on the following classes:

  • .tall
  • .wide
  • .large
  • .no-image

• Article Cards, Single Content Cards (All variations), Callout Article, Featured Content Card, Photo CTA, Parallax Stat Cards & Country Hero 1 - These components share the same accent color behavior, but although they can be modified using the body class, they can also be changed individually by adding the accent color class to them.

  • .accent-yellow (Default)
  • .accent-green
  • .accent-red
  • .accent-blue

 

Positional modifiers

In order to allow this foundation is used for this purpose. Please refer to https://get.foundation/sites/docs/grid.html#offsets.

Typography modifiers

Here you will find a list of typography modifiers included on the project:

• For headings, we have a .heading class which will set the base font family used in most of our headings. Also, we will need to add the heading size modifiers: .h1, .h2, .h3, .h4 and .h5.
  • Example:
  • <h1 class=”heading h1”>Lorem ipsum</h1>
  • <h2 class=”heading h2”>Lorem ipsum</h2>
  • We also can add modifiers to toggle between black or white headings using the following classes: .dark or .light.
    • <h1 class=”heading h1 dark”>Lorem ipsum</h1>
    • <h1 class=”heading h1 light”>Lorem ipsum</h1>
• For paragraphs or other content types, we have the following classes:
  • .large-copy
    • font-size: 3.5rem
    • line-height: 1.14
    • font-weight: 400
  • .big-copy
    • color: #000
    • font-size: 2rem
    • line-height: 1.3
    • font-weight: 400
  • .medium-copy
    • font-size: 1.6rem
    • line-height: 1.3
    • font-weight: 400
  • .small-copy
    • font-size: 1.4rem
    • line-height: 1.4
    • font-weight: 400
  • .nav-item
    • cursor: pointer
    • font-size: 1.4rem
    • line-height: 1.14
    • font-weight: 600
  • .tag
    • font-size: 1.2rem
    • line-height: 1.33
    • font-weight: 700
    • text-transform: uppercase