Jump To:

  1. Variables
    1. $config
  2. Mixins
    1. set()
    2. styles()
  3. Functions
    1. get()

Ratio-box

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

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

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

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