StringResponsive

StringResponsive is a global module. It does not activate through string="responsive". Instead, it watches viewport width, toggles device-scoped elements, and emits stateful screen:* events.

Public API

Default Ranges

Current default ranges are:

mobile: 0..359
tablet: 360..1023
laptop: 1024..1365
desktop: 1366+

Attributes

The module watches these attributes anywhere in the document:

string-mobile
string-tablet
string-laptop
string-desktop

CSS Variables and DOM Output

StringResponsive writes directly to style.display on matching elements:

elements that match the active range get style.display = null
elements outside the active range get style.display = "none"

The current runtime does not preserve a cached previous display value beyond clearing the inline style back to null.

Events

Channel	Payload	Fired when
`screen:mobile`	`boolean`	Mobile match changes
`screen:tablet`	`boolean`	Tablet match changes
`screen:laptop`	`boolean`	Laptop match changes
`screen:desktop`	`boolean`	Desktop match changes

TypeScript

stringTune.on('screen:laptop', (active) => {
  console.log(active);
});

Mirror Behavior

This module has no mirror output contract.

Quick Example

HTML

<nav class="site-nav">
  <div class="logo">Fiddle</div>
  
  <ul string-desktop string-laptop class="nav-links">
    <li><a href="#">Work</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>

  <button string-mobile string-tablet class="menu-btn">
    Menu
  </button>
</nav>

CSS

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid black;
  background: white;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  color: black;
  font-weight: 500;
}

.menu-btn {
  padding: 0.5rem 1rem;
  border: 1px solid black;
  background: transparent;
  color: black;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 0.875rem;
}

Registration

TypeScript

import StringTune, { StringResponsive } from '@fiddle-digital/string-tune';

const stringTune = StringTune.getInstance();
stringTune.use(StringResponsive);
stringTune.start(60);

Custom ranges can be passed through use():

TypeScript

stringTune.use(StringResponsive, {
  settings: {
    mobile: { max: 479 },
    tablet: { min: 480, max: 1023 },
    laptop: { min: 1024, max: 1439 },
    desktop: { min: 1440 },
  },
});

Detailed Behavior

screen:* events are stateful in the current event manager. A later subscriber receives the last emitted value if one exists.
If a device config block is omitted in use(StringResponsive, { settings: ... }), that range is disabled.
Visibility is based only on viewport width ranges, not orientation or pointer type.