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/
- install it —
- 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"/>
- download directly (save-as)
relly/source/relly.scss
)
scss mixins ($x, $y
)
relly-aspectbox(-
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
;.mydiv -
prefab css classes
reltext inside an aspectbox
$fraction
)
relly-aspectfrac(-
same as
relly-aspectbox
above, however allowing direct input of the ratio fraction -
sass mixin
;.mydiv
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 reltextrelly// alternatively: you can pass parameters, here's an example with the defaultsconst elements = documentconst fraction = 5 / 100 // font-size 1em becomes 5% of each element's heightrelly