Let’s make the web responsive with just one installation line? I’m looking for contributors!

Arthur Borba — Mon, 04 Nov 2024 16:51:59 +0000

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 :)

DEV Community: Arthur Borba

Let’s make the web responsive with just one installation line? I’m looking for contributors!