Awesome Open Source
Awesome Open Source

IN PRODUCTION, USE AT OWN RISK

BrowserStack Status

npm version Build Status

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:

Property Value Description Default
cutOffWidth String - CSS units The minimal width to disable scaling 0
enableScale Booolean Enables scaling of relative units true
loadEvent String - LoadEvent type native load event to use before auctioning "DOMContentLoaded"
mobileWidth String - CSS units The minimal width to disable scaling for mobile devices "40em"
onResize ({viewportWidth, innerWidth, evalDPR, calculatedDPR, normalizedDPR}) => {} Callback on scale and or zoom undefined
onScale ({viewportWidth, innerWidth, evalDPR, calculatedDPR, normalizedDPR}) => {} Callback on resize only undefined
onZoom ({viewportWidth, innerWidth, evalDPR, calculatedDPR, normalizedDPR}) => {} Callback on zoom only undefined
preserveDevicePixelRatio Boolean Normalises the device pixel ratio for high ratio devices false
relativeDesignWidth String - CSS units The width relative to the font size "1024px"
scaleDelay Number - Milliseconds The debounced delay to call on resize 16

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

MIT © 2018 Julien Etienne.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (70,997
zoom (75