Origami Frontend Components & Services

Readme: o-visual-effects

This Origami component provides CSS visual effects via a set of Sass variables and mixins.

Markup

o-visual-effects provides helper classes to style with different levels of box shadow:

<div class="o-visual-effects-shadow-high">Box content</div>

o-visual-effects also provides timing functions for slide, expand, or fade animations and transitions as CSS custom properties (CSS Variables). Sass users may use Sass variables to apply these timing functions instead.

CSS Custom Properties

Build Service users may use CSS Custom Properties (CSS Variables) to apply consistent timing functions within custom CSS. The variables avalible are:

E.g.

.transition--slide {
    transition: all 0.5s var(--o-visual-effects-timing-slide);
}

.transition--expand {
    transition: all 0.5s var(--o-visual-effects-timing-expand);
}

.transition--fade {
    transition: all 0.5s var(--o-visual-effects-timing-fade);
}

Sass users should use Sass variables instead for improved browser support.

Sass

To include all o-visual-effects css call the oVisualEffects mixin. This will include box shadow styles and CSS custom properties for transition timing functions.

@include oVisualEffects();

o-visual-effects may also be output granularly. For example ommit the CSS custom properties if you are using Sass variables such as $o-visual-effects-timing-slide instead:

@mixin oVisualEffects($opts: (
    'shadows': ('ultralow', 'low', 'mid', 'high')
));

If you are not using o-visual-effects CSS, and instead are using other Sass mixins or variables directly there is no need to call oVisualEffects.

Shadows mixin

The oVisualEffectsShadowContent mixin is used to add a consistent shadow to your element. There are 4 levels of shadow available: ultralow, low (default), mid, and high.

Example:

.my-element {
    @include oVisualEffectsShadowContent('mid');
}

Output:

.my-element{
    box-shadow: 0 1px 3px rgba(77, 72, 69, 0.2), 0 6px 10px rgba(77, 72, 69, 0.15);
}

Transition variables

When adding transitions to elements in CSS, you should use o-visual-effects variables for consistent timings for slide, expand, and fade effects.

Example:

.transition--slide {
    transition: all 0.5s $o-visual-effects-timing-slide;
}

.transition--expand {
    transition: all 0.5s $o-visual-effects-timing-expand;
}

.transition--fade {
    transition: all 0.5s $o-visual-effects-timing-fade;
}

Output:

.transition--slide {
    transition: all 0.5s cubic-bezier(1, 0, 0.5, 1.275);
}

.transition--expand {
    transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.transition--fade {
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

Migration

State Major Version Last Minor Release Migration guide
✨ active 3 N/A migrate to v3
⚠ maintained 2 2.1 migrate to v2
╳ deprecated 1 1.0 N/A

Contact

If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.


Licence

This software is published by the Financial Times under the MIT licence.

Switch component view

GitHub Repository

Install o-visual-effects

If using the Build Service, add o-visual-effects@^3.0.0-beta.1 to your link tag.

If running a Manual Build, run bower install --save "o-visual-effects@^3.0.0-beta.1".

Help & Support

o-visual-effects is maintained directly by the Origami team. If you have any questions about o-visual-effects or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com