IN PRODUCTION, USE AT OWN RISK

Browser Support

• MIMETIC supports IE9+, Safari 6.2+, Chrome, Firefox, Edge, Opera, etc. Will be depreciating support for IE9 + IE10 in releases beyond v0.7.3.
• MIMETIC does not use user-agent detection nor does it modify element styles.

MIMETIC

Scalable Fonts & Zoom Detection

The sincerest form of flattery

"Mimetic" - relating to, constituting, or habitually practising mimesis (T1000 Mimetic polyalloy)

MIMETIC is a JavaScript viewport engine, that quantifies relative units in accordance to the viewport and devicePixelRatio conditionally. Which means text can scale to the viewport's dimensions without breaking the browser’s ability to zoom.

WHY?

It enables developers to:

• Design fluid website with fonts that scale to the viewport width.
• Reduces/ eliminates maintainability for retina and high resolutions displays.
• Normalise the perceived devicePixelRatio for high resolution tablet devices (optional).
• Detect the zoom level on all modern desktop browsers IE9+
• Improve and fine-tune accessibility when the user utilities zoom.
• Control when and when not to scale via media queries.
• Take an existing Responsive Website and convert it instantly to a Scalable Website.
• Less screen resolutions to consider for improved work flows.
• Design more aesthetically pleasing websites.
• Future proof designs from MIMETIC sized rem units to future relative-percentile units by simply changing the unit and root font-size.

An alternative?

Alternatives seem to have some combination of the below issues:

Inconsistent browser compatibility, difficult to no ability to zoom thus breaking accessibility, doesn't scale padding/ margin/ line-height and other relative dimensions, doesn’t respect the style attributes on elements. Must always specify relative dimensions (padding/ margin)(More maintenance), you can’t specify relative dimensions, scales to a container only, jQuery dependent, does exactly what vw, vh, vmin, vmax does on mobile, fonts blur, no longer being maintained.

What do I need to know?

There’s a few simple concepts you need to understand to create Scalable Web Design via MIMETIC.

• You must use relative units to keep in proportion (EM & REM units)
• MIMETIC "can" scales all quantities not just font-size margins/ padding, width, height etc.
• Avoid pixel units.
• Your website should be usable and functional with mimetic included and when left out.

Install

npm i mimetic

or

yarn add mimetic

First Meaningful Paint

Ideally MIMETIC should execute before other scripts that directly alter or affect the DOM. But it does require the DOM to load first.

Usage

mimetic();

Standalone zoom detection

mimetic({
  scale: false,
  onZoom: (a,b,c,d) => console.log(a,b,c,d);
});

Size

MIMETIC has a 2.5kb gzip size and will not exceed a 3.5kb gzip size.

Options

Below is the list of config options passed as an object:

Big thanks to BrowserStack for sponsoring the cross browser & device testing of this project.

MIT © 2018 Julien Etienne.