Ratio-box

Jump To:

Uses aspect-ratio to keep ratio. Defaults to 4/3 (standard). Used for responsive iframe or images (object-fit), etc.

Demos

Default Ratio (4/3)

A standard 4/3 aspect ratio box, useful for traditional photography or balanced content.

<div class="ratio-box" style="max-width: 400px;">
  <img src="https://picsum.photos/id/1011/400/300" class="ratio-box__content" alt="4/3 Image">
</div>

Widescreen Ratio (16/9)

Using the `ratio-box--16x9` modifier for video content or wide banners.

<div class="ratio-box ratio-box--16x9" style="max-width: 600px;">
  <img src="https://picsum.photos/id/1015/600/337" class="ratio-box__content" alt="16/9 Image">
</div>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "size" : list.slash(4, 3),
  "sizes" : (
    "16x9" : list.slash(16, 9),
    "9x16" : list.slash(9, 16),
    "3x4" : list.slash(3, 4)
  )
);

File Information

File: _ratio-box.scss
Group: ratio-box
Type: variable
Lines (comments): 13-16
Lines (code): 18-25

Map Properties

Name	Type	Default	Description
size	String	Number	"4/3"
sizes	Map	Map	Other ratios to add (apply with modifier class)

Mixins

set()

Mixin

Change modules $config

File Information

File: _ratio-box.scss
Group: ratio-box
Type: mixin
Lines (comments): 27-30
Lines (code): 32-34

Examples

@include ulu.component-ratio-box-set(( "property" : value ));

Parameters

Name	Type	Description
$changes	`Map`	Map of changes

Require

$config

styles()

Mixin

Prints component styles

File Information

File: _ratio-box.scss
Group: ratio-box
Type: mixin
Lines (comments): 45-47
Lines (code): 49-62

Examples

@include ulu.component-ratio-box-styles();

Require

get()

Functions

get()

Function

Get a config option

File Information

File: _ratio-box.scss
Group: ratio-box
Type: function
Lines (comments): 36-39
Lines (code): 41-43

Examples

@include ulu.component-ratio-box-get("property");

Parameters

Name	Type	Description
$name	`Map`	Name of property

Require

$config