@fylgja/aspect-ratio

Fylgja - Aspect Ratio

The aspect ratio component is used to set videos to a certain responsive aspect ratio,

but can also be used for images and other content.

Installation

npm install @fylgja/aspect-ratio

Then include the component in to your code via;

@use "@fylgja/aspect-ratio";
// Or via PostCSS import
@import "@fylgja/aspect-ratio";

@layer support

If you need support for @layer, use the following import;

@use "@fylgja/aspect-ratio" with ($enable-aspect-ratio-layer: true);
// Or via PostCSS import
@import "@fylgja/aspect-ratio/layer";

How to use

To use the aspect-ratio, create element with the class .aspect-ratio, any child of the aspect-ratio will now always be show in the ratio set by the class.

16/9 is the default ratio.

To edit the ratio use the css variable with the same name.

<div class="aspect-ratio" style="--aspect-ratio: 21/9;">..</div>

Config

As with almost all of our components, CSS variables can be configured to add your own look/style.

Want direct control on the base styles, here are the following SCSS variables can you modify.

$enable-aspect-ratio-layer: false !default;

$aspect-ratio-layer-name: components !default;

$aspect-ratio: "16/9" !default;

Changelog

[1.2.0] - 2022-07-24

Added

• New components for Design Tokens (CSS props);
  • aspect-ratio
  • colors
  • easing
  • mq
  • shadow (will replace elevation in the next release)
  • sizes
  • z-layer
• Add new bundle option specific for Design Tokens (CSS props)

Changed

• Updated all packages, this contains too many changes to list here; instead, see each package to learn what has changed.

Fixed

• Issue #40