DEV Community

Arthur Borba
Arthur Borba

Posted on

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

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:

  1. 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)
  2. Pre-process pixel definitions into rem
  3. Centralize elements in mobile screens (experimental feature)

The result is all element proportions and relative sizes as the same across all screen resolutions:

Image description

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()
   ],
};
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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:

  1. Install or add the script tag into your fresh or existing app 1.1 If you have existing responsive rules, bypass them
  2. Check your interface across multiple resolutions
  3. Let me know how it worked for you :)

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more