Recently I published a NPM package with the mission described in the title: to make projects responsive with just one line of code!
I share with you the responsive-app [beta] package
It took me a few years experimenting and developing this technique, which currently consists on:
- Setting the HTML tag font-size dynamically (through a JS script), taking in consideration: (1) the screen resolution and (2) the browser font-size (for web acessibility)
- Pre-process pixel definitions into rem
- Centralize elements in mobile screens (experimental feature)
The result is all element proportions and relative sizes as the same across all screen resolutions:
With just one line installation, for example using Rollup:
import responsive from 'rollup-plugin-responsive-app'
export default {
…
plugins: [
…,
// Last plugin on the list
responsive()
],
};
Or placing the browser bundled version into the page:
<head>
<script src="https://cdn.jsdelivr.net/npm/responsive-app@1.0.7-beta.0/dist/browser-bundle.min.js"></script>
</head>
The main goal here is saving time when creating a new project by not having to deal with the responsiveness at all, just trusting that the interface will look good on all screen resolutions. Sounds great, right?
So, after launching this beta version, I’m looking for support and contributors. Initially, the idea is to test this package in different contexts, projects, and frameworks (React, Angular, Vue…) to make the process as comprehensive as possible.
Who’s up for this challenge? Test steps are:
- Install or add the script tag into your fresh or existing app 1.1 If you have existing responsive rules, bypass them
- Check your interface across multiple resolutions
- Let me know how it worked for you :)
Top comments (0)