mornir

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

mornir

const sanity = require('@sanity/client')
const fs = require('fs')
const EOL = require('os').EOL
const flatMap = require('lodash.flatmap')
const { subDays, isBefore } = require('date-fns')
const sanityExport = require('@sanity/export')

/**
* @param context {WebtaskContext}
*/

mornir

First, go to https://.sanity.studio, and open the developer console (usually by one of the keyboard shortcuts Command+Option+I, F12 or Control+Shift+I depending on what browser/platform you are using)

1. Open the Sources tab
2. Find the app.bundle.js file in the sidebar tree view.
3. Hit the pretty print source button
4. Locate your schema types by searching (e.g. try searching for one of your custom types) it in the source view.

mornir

:root {
  --ease-in-quad:       cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-in-cubic:      cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-quart:      cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-in-quint:      cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-in-expo:       cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-in-circ:       cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-out-quad:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic:     cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quart:     cubic-bezier(0.165, 0.84, 0.44, 1);