tomhodgins/dragon

Stars
144
Rank 255,590 (Top 6 %)
Language
CSS
License
MIT License
Created almost 9 years ago
Updated over 8 years ago

tomhodgins/dragon

tomhodgins

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

dragon.js is a bookmarklet that lets you drag any element on a website using a mouse or touchscreen. The goal is to speed up in-browser design critiques and brainstorming new layout ideas.

Dragon.js 🐉

dragon.js is a bookmarklet that lets you drag any element on a website using a mouse or touchscreen. The goal is to speed up in-browser design critiques and brainstorming new layout ideas.

How to use

You can test the functionality with demo content on index.html, where you will also find the ‘pretty’ source code for the bookmarklet.

Demo at http://staticresource.com/dragon

To use this on other websites you have two options: run it as JavaScript on the page, or create a bookmarklet.

How to create a bookmarklet

Create a bookmark
Edit the URL
replace the URL with javascript: followed by the contents of dragon.js

Now you can load load any page, then tap the bookmarklet to enter 'dragon' mode

How to run as JavaScript

You have two options here as well. All browsers except mobile safari (iPad and iPhone) will allow you to simply replace the URL in the address bar of a loaded website with javascript: and then write whatever JavaScript you want. I find this easier than a bookmarklet on desktop.

The other way is by opening your Developer Tools in the browser you can paste the contents of dragon.js into the JavaScript Console and enter it and it will run on the page as well.

🐲 —happy hacking!

element-queries-spec

A spec for a Container-Style Element Query Syntax

preset

A simple CSS preset for 2020

cssplus

CSSplus is a collection of CSS Reprocessor plugins that dynamically update CSS variables

reprocss

A flexible <style>-tag based CSS reprocessor

quark

Quark.js is a microscopic atomic CSS polyfill in JS just 140 bytes

liveeditor

A simple live HTML, CSS, and JavaScript scratchpad in your browser

qss

QSS ➸ a simple query syntax for CSS element queries

computed-variables

Easy to use event-driven CSS variables

jsincss

A JS-in-CSS stylesheet loader

boilerstrap

Boilerstrap is a WordPress theme based on the Twenty Twelve theme from Wordpress.org that includes support for Bootstrap, FontAwesome icons, custom typography, jQuery, keyboard shortcuts, & much more…

deqaf

Decaffeinate CSS stylesheets client-side

tinkerpad

Tinkerpad is an HTML, CSS, and JavaScript scratchpad similar to jsFiddle. Tinkerpad is written as an offline-capable HTML5 web app and requires no external dependencies.

caffeinated-style-sheets

Extend .css with JavaScript the easy way!

css-package-manager

A Package Manager for CSS Extensions

extstyler

Empty Chrome extension to add custom CSS or JavaScript on top of websites, ready to drop in your user styles and scripts

qaffeine

Decaffeinate your JS-powered CSS stylesheets

cheq

A command-line checklist app

wordpresto

Download, configure, and install Wordpress with one easy script

varius

Exposing properties of HTML elements as CSS variables

memopad

Memo Pad is a simple memo pad that saves your notes to localStorage, as well as allows you to share notes via URL

slinky

Add JavaScript tests to <link> tags to toggle stylesheets

js-in-css

A Pattern for simple Event-Driven Virtual Stylesheets: 100% CSS plus the expressive power of JavaScript

fartcss

Functional And Responsive Template is a utility class framework that uses element queries

parse-css

A standards-based CSS parser - forked from tabatkins/parse-css

theremin

Theremin app built using JavaScript

responsive.style

A Fresh Approach to Extending CSS

speedtest

SpeedTest is an HTML5 app that lets you test websites at a variety of resolutions very quickly. It also works on mobile, which allows you to test websites at a variety of widths on a phone or tablet where you can't normally change the width of the browser.

aspect-ratio-spec

A spec for an aspect-ratio property in CSS

cssomtools

The 'jQuery-for-the-CSSOM', a library for working with CSS stylesheets and rules in the browser

js1k-arecibo

The Arecibo Message - for JS1K 2017

jsts-engine

Interpolate JavaScript Template Strings

process-css-demo

A simple CSS preprocessor to demonstrate supporting custom at-rules, selectors, properties, functions, and units

basic-website-starter

A basic HTML/CSS/JS website with a simple toolchain: none

css-tests

Examples of CSS syntax for testing purposes

qaffeine-demo

A demo site of qaffeine

stringify-css-stylesheet

Convert a CSSStyleSheet object to a string of text

eqcss-compiler

A compiler to turn EQCSS syntax into equivalent (vanilla) JavaScript

5keleton

This is a blank HTML5 template with Bootstrap, jQuery, and FontAwesome already integrated. Includes meta tags for OpenGraph, iOS browsing, icons (including favicon), Windows Live Tile, and the usual keywords and description. Includes .htaccess and robots.txt as well. This is ready for you to clone and kickstart your next HTML project!

template-factory

The Template Factory is a small website template written simply in PHP, HTML, CSS and JavaScript. Powered by EQCSS for element queries, plus lightweight plugins for tooltips, modals, notifications, and more!

custom-css

Examples of custom CSS

sbv

Read Youtube .SBV caption files and convert to JSON, text, or HTML

tweetcruncher.com

sourceror

Sourceror lets you view the source of any web page using a PHP proxy.

unicons

Unicons.css is a CSS file to make adding unicode characters to HTML in a semantic and easy to use way. Because Unicons.css is so lightweight you can include just one file to supplement or replace other icon font solutions on your site like FontAwesome

cascading-js-variables

Cascading JS Variables with a similar syntax and usage to CSS Variables, implemented in JavaScript

anesthetic

Nesting CSS rules inside custom properties

repl

A Web REPL for sketching out ideas

jsincss-has-selector

A :has() selector plugin for jsincss

jsincss-element-query

An element query plugin for jsincss

csson

Using a strict subset of CSS syntax as a superset of JSON

querious

A pure-JavaScript element query demonstration using data attributes for syntax, and applied via classes

bil

Basic Instruction Language

alijn

Alijn is a script that puts some JavaScript smarts behind your responsive CSS styles. Calculate the CSS values for tricky layout functions like vertical centering or hortizontal centering in realtime.

espath

Query deeply nested JavaScript objects with XPath

mathpad

Magic Mathpad: a live JavaScript calculator

intimateoccasions.ca

Celebrating Life's Special Moments

htmlforever

HTML templating helper functions written in a Continuation-Passing Style for JavaScript, Python, and Ruby

style-container

A way to re-use CSS for scoped styles and container queries in HTML

apophany

a pattern matcher

deno-test

deck

Deck of playing cards in HTML, CSS, and JavaScript

piano

HTML5 synth app for iPad

respec

respec allows CSS authors to assign the specificity of a rule separately from the specificity of the selector

sugarfree

css-overlay-snippet

A live CSS debugging stylesheet you can copy/paste into the browser's JS console

element-match-media

Parse media queries from the context of an element. Like window.matchMedia() but for HTML elements.

browserstack-app

A simple electron app for browserstack.com

loqui

Style your console.log() messages with ease

learncss

Docs for ##learncss on freenode

jsincss-overflow

An overflow-detecting plugin for jsincss

jsincss-elder-selector

An elder selector plugin for jsincss

jsincss-regex-match

A regex matching plugin for jsincss

domtools

cyfer

Cyfer - A Chrome Extension that skins gli.ph conversations

mixin-macros

String combinators designed to help the creation of jsincss plugins

jsincss-xpath-selector

A jsincss plugin that lets you select elements to style using XPath selectors

jsincss-element-units

An element unit plugin for jsincss

synth

Just a simple WebAudio synth. No reason. What could go wrong…

jsincss-parent-selector

A parent selector plugin for jsincss

queryxpath

Simple queryXPath() and queryXPathAll() functions for JavaScript

onebuttoncdn

OneButton CDN, the easiest tool for updating Bootstrap 3.0, FontAwesome, and jQuery on your own server

loadjs

LoadJS lets you share JavaScript on Twitter by encoding it as a URL to share

freshstart

Static HTML site built using HTML5, CSS, and JavaScript. No frameworks, no bootstrap, no jQuery.

jsincss-string-match

A string matching plugin for jsincss

domforever

DOM templating helper functions written in a Continuation-Passing Style

bengalcat.party

It's a bengal cat party!

hade

HTTPArchive DOM Explorer CLI tool

tomhodgins.com

Website for Tom Hodgins

symbolix

Symbolic expression parsing for JavaScript

process-css

A CSS processor with a simple plugin design that can process CSS server-side and client-side into CSS, JS, and other file output

mini-container-queries

A <200 byte container query plugin

parse-css-stylesheet

Parse a string of text as a CSS stylesheet with JavaScript in the browser environment