Package Exports

relly

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (relly) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

relly — easy relative sizing for the web

→ relly demo page ←

download/install relly

install it into your hip project
- install it — npm install relly
- import it — import * as relly from "relly"
- use styles and other stuff in node_modules/relly/dist/
geezer mode: direct downloads and html tags
- download directly (save-as)
  - relly.global.bundle.js — make "relly" object globally available
  - relly.scss — mixins for sass
  - relly.css — some handy css classes
- place your html tags
  - <script src="node_modules/relly/dist/relly.global.bundle.js"></script>
  - <link rel="stylesheet" href="node_modules/relly/dist/relly.css"/>

scss mixins (`relly/source/relly.scss`)

relly-aspectbox(`$x, $y`)

have an element maintain a specific aspect ratio
for example, you could force a box to take on a 16/9 aspect ratio

sass mixin

@import "node_modules/relly/dist/relly.scss";

.mydiv {
    @include relly-aspectbox(16, 9)
}

prefab css classes

<link rel="stylesheet" href="node_modules/relly/dist/relly.css"/>

<div class="mydiv relly-aspectbox-16-9 relly-reltext">
    reltext inside an aspectbox
</div>

relly-aspectfrac(`$fraction`)

same as relly-aspectbox above, however allowing direct input of the ratio fraction

sass mixin

@import "node_modules/relly/dist/relly.scss";

.mydiv {
    @include relly-aspectfrac(56.25%);
}

javascript functions

relly.reltext()

maintain font-size relative to an element's height, by a specific fraction

javascript function which maintains the font size of an element relative to the element's own height

// just call reltext
relly.reltext()

// alternatively: you can pass parameters, here's an example with the defaults
const elements = document.querySelectorAll(".relly-reltext")
const fraction = 5 / 100 // font-size 1em becomes 5% of each element's height
relly.reltext({elements, fraction})

relly