Squizbox

Work in progress. Here be dragons!

Preview and adjust CSS media width breakpoints

This bookmarklet is an experiment to test the hypothesis that better tools can help answer the design decision – at what screen width should this change?. Use it to visually preview either side of a breakpoint simultaneously. Media queries of the same measure are collated to edit them as one.

No more designing around fixed, arbitrary, breakpoints.

Usage

Install bookmarklet

Drag this link to your browser bookmark bar: squizbox

(If you don’t see a link above try visiting the project site)

Click the bookmarklet to inspect and edit @media min-width and max-width breakpoints used in the CSS of the current page.

Limitations

Only reads CSS files loaded from the same domain as the page itself
Bookmarklets cannot be run on pages with a Content Security Policy (CSP) that disallows inline scripts. For example GitHub Content Security Policy
Only tested (and proved buggy in Firefox)

Development test set-up

Beyond setting up the command line scripts as npm scripts, I’ve done very little to ensure the dev set-up runs anywhere but my Mac.

Install dependencies

Navigate to the project directory in your terminal and fetch dependencies from npm
```
 npm i
```
Bundle script and start watcher
```
 npm start
```
Start webserver

Serves the test page ./test/index.html on http://localhost:3000 In a new console:
```
 npm run serve
```
Start browser-sync proxy server

Loads test page with bookmarklet ./build/index.js injected http://localhost:3001. In another new console:
```
 npm run proxy
```
Start Cypress test console

In a third console:
```
 npm run cypress:open
```

Distribution build

Presuming dependencies are installed. The dist script builds and embeds the bookmarklet code ./build/bookmark.js into this README

npm run dist

Todo

bug fixes
window resizing in a mode that deselects selected breakpoints
easy access to edited values (before and after perhaps)
remove console logging from dist build somehow
add visible version
UI design

Editing this document

This README is generated from template.md