relly

toolkit for relative div and font sizing

Usage no npm install needed!

<script type="module">
  import relly from 'https://cdn.skypack.dev/relly';
</script>

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)
    • 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})