search

argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.
https://open-props.style
MIT License
4.8k stars 192 forks source link

bookmarklet suggestion #447

Closed hchiam closed 11 months ago

hchiam commented 11 months ago

why:

to let people try op quickly in their browser (ide not required), and even to experiment on other people's websites. either by running it in the console or as a 1-click bookmark (bookmarks/bookmarklets also have fast keyboard access in chrome)

usage:

  1. copy this code: 
javascript: (() => {
  const href = "https://unpkg.com/open-props";
  document.head.append(Object.assign(document.createElement("link"),{rel:"stylesheet",href}));
})();

  1. create a bookmark, paste that code you just copied into the URL field, and ideally name that bookmark with a unique name or a unique sequence of letters that's different from your other bookmarks. For me, "op" shows no other results when i search my bookmarks.

  2. now you can do this in chrome:

    • mac: command + L, then type to search for the bookmark name, then hit enter --> open-props should now be temporarily added to the page!
    • pc: Ctrl + L, then type to search for the bookmark name, then hit enter --> open-props should now be temporarily added to the page!

and now you can play with op in the devtools Elements tab, or in Sources:

https://github.com/argyleink/open-props/assets/18131787/6a37181a-b391-47fc-b50f-218e1c86d3d5

basically same idea as https://github.com/argyleink/blingblingjs/issues/42 but for css

stackblitz[bot] commented 11 months ago

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.