Nimble.css — Bookmarklet

Install

Drag this link to your bookmark bar:

Nimble.css

Or right-click the link above and select Bookmark This Link (Firefox) or Add to Bookmarks (Chrome/Edge).

Usage

1. Navigate to any website
2. Click the Nimble.css bookmark
3. The page will be restyled with nimble.css (full bundle via CDN)
4. Click the bookmark again to remove nimble.css and restore the original styles

How It Works

The bookmarklet injects a <link> element that loads nimble.min.css from the jsDelivr CDN. It also injects a <style> element with overrides that neutralize nimble utility class names that collide with popular frameworks (Tailwind, Bootstrap), and adds a <meta name="viewport"> tag if the page doesn't already have one. Clicking again removes all three.

(function() {
  var id = '__nimble_css_bookmarklet';
  var el = document.getElementById(id);
  if (el) {
    var vp = document.getElementById(id + '_vp');
    if (vp) vp.remove();
    var ov = document.getElementById(id + '_ov');
    if (ov) ov.remove();
    el.remove();
    console.log('[nimble.css] Removed');
    return;
  }
  var link = document.createElement('link');
  link.id = id;
  link.rel = 'stylesheet';
  link.href = 'https://cdn.jsdelivr.net/npm/@leftium/nimble.css/dist/nimble.min.css';
  document.head.appendChild(link);
  // Override nimble utility classes that collide with Tailwind/Bootstrap
  var style = document.createElement('style');
  style.id = id + '_ov';
  style.textContent =
    '.grid:not([class*="bleed"])' +
    '{grid-template-columns:1fr!important}' +
    '.container{max-width:none!important;margin-inline:initial!important;padding-inline:initial!important}' +
    '.overflow-auto{overflow:initial!important}';
  document.head.appendChild(style);
  if (!document.querySelector('meta[name="viewport"]')) {
    var meta = document.createElement('meta');
    meta.name = 'viewport';
    meta.content = 'width=device-width,initial-scale=1';
    meta.id = id + '_vp';
    document.head.appendChild(meta);
  }
  console.log('[nimble.css] Applied');
})();

Notes

• Works best on pages with semantic HTML (headings, paragraphs, lists, tables, forms)
• Some sites with strict Content Security Policy (CSP) headers may block the external stylesheet
• The bookmarklet always loads the latest version from npm via jsDelivr
• nimble.css uses cascade layers, so existing site styles outside layers will still take precedence
• Includes overrides that neutralize nimble utility class names (.grid, .container, .overflow-auto) to avoid conflicts with Tailwind, Bootstrap, and other frameworks