Neophobe Plebeian Mumpsimus
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

flow-adaptive

1.2.0 • Public • Published

flow-adaptive.js

Make your web apps look awesome on any device with zero dependencies.

No more headaches with adaptive sizes in pixels!

Also here is a vue plugin.

What is flow-adaptive.js about?

It's about dynamic change of html element font-size for comfortable using of rem unit of measurement.

Installation

npm install flow-adaptive

Usage

import FlowAdaptive from 'flow-adaptive'
 
new FlowAdaptive({
  fontRatio: 1440 / 10, // the best practice is to set fontRatio to base layout width / 10
  maxWidth: 1440,
  minWidth: 650,
  breakPoints: [
    {
      minWidth: 650,
      maxWidth: 900,
      fontRatio: 768 / 10,
    },
    {
      maxWidth: 649,
      fontRatio: 375 / 10,
    },
  ],
})

And then all you need is to set all sizes in rem units. For example:

.foo {
  font-size: 1.6rem; // equal to 16px on 1440px, on 768px and on 375px screen width  
}

fontRatio can be either a number or a function callback. e.g:

new FlowAdaptive({
  fontRatio: 1440 / 10,
  ...
})
new FlowAdaptive({
  fontRatio : () => 1440/10 * ((800/1440) / (window.innerHeight/window.innerWidth)),
})

Or you can use it without modules

<script type="text/javascript" src="flow-adaptive.min.js"></script>
<script type="text/javascript">
new FlowAdaptive({...})
</script> 

Install

npm i flow-adaptive

DownloadsWeekly Downloads

60

Version

1.2.0

License

MIT

Unpacked Size

11.9 kB

Total Files

9

Last publish

Collaborators

  • avatar