Origami Frontend Components & Services

Readme: o-visual-effects

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

Usage

Markup

When using the build service or importing the module with silent mode set to false, o-visual-effects provides helper classes to access the different levels of box shadow settings. The main class available is: .o-visual-effects-shadow which outputs a low shadow. To access any other level of shadow, you should use the modifier for that level, for example: .o-visual-effects-shadow--high.

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

Sass

As with all Origami components, o-visual-effects has a silent mode. To use its compiled CSS (rather than using its mixins with your own Sass) set $o-visual-effects-is-silent : false; in your Sass before you import the o-visual-effects Sass.

$o-visual-effects-is-silent: false;
@import 'o-visual-effects/main';

Shadows mixin

The oVisualEffectsShadowsElevation 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 oVisualEffectsShadowsElevation('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-transition-slide;
}

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

.transition--fade {
    transition: all 0.5s $o-visual-effects-transition-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 Guide

Migrating from v1 to v2

The following changes have been made to the mixins in o-visual-effects:


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@^2.1.1 to your link tag.

If running a Manual Build, run bower install --save "o-visual-effects@^2.1.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