Jump To:

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

Ratio-box

Uses padding trick 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" : 75%,
  "sizes" : (
    "16x9" : 56.25%,
    "9x16" : 177.77%,
    "3x4" : 133.33%
  )
);
File Information
  • File: _ratio-box.scss
  • Group: ratio-box
  • Type: variable
  • Lines (comments): 10-13
  • Lines (code): 15-22

Map Properties

Name Type Default Description
size Number 75% Default height ratio (of width 100%)
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): 24-27
  • Lines (code): 29-31

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): 42-44
  • Lines (code): 46-61

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): 33-36
  • Lines (code): 38-40

Examples

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

Parameters

Name Type Description
$name Map Name of property

Require