A bookmarklet which overlays a highly configurable layout grid over a web-page. Grid can be set to match any set of dimensions, allowing easy development of CSS layouts in the web-browser.Rule
Also a bookmarklet, Rule displays rulers on a page, with all the expected features of the rulers found in a desktop design application, including guides which snap to block display elements and origin location control.Unit
Unit allows measurements to be made between any two points on a web-page, giving basic information about each of the points clicked on, and drawing a line on the page for the measurement.Crosshair
Completing my design suite, Crosshair draws a crosshair cursor on the page to assist in layout alignment. Cursor information is also presented in a tooltip.Design
The above four design assistive tools are all available in a handy single package called Design, which can be exceptionally useful for web-developers working in the browser. Each component part works well with the other parts.
If you have ever been frustrated by CSS bugs in the various browsers and thought "if I could just send this CSS parameter to this browser, and this one to that browser" then Conditional-CSS is perfect for you. Allowing you to work around browser bugs, Conditional-CSS allows IE style conditional comment inline with your stylesheets.Visual Event
Integrity is a tool which check that all links and media on your web-site are valid and responding okay. If a particular link is found to give an error, then this is highlighted in the generated map of your site.Label
It can often be difficult when discussing with clients to show them exactly what you mean on the telephone. With print drafts we could have stuck post-its on the hard-copy, Label now provides this option digitally!
Built from the ground up with progressive enhancement in mind, DataTables is a jQuery plugin which provides extensive support for interactive HTML tables. With features such as pagination, filtering, sorting and internationalisation (among many others!) this plug-in is extremely flexible.KeyTable
KeyTable provides Excel style keyboard navigation for any HTML table. With event binding and DataTables integration, this little library can seriously improve accessibility for dynamic tables.SprySpell
Spelling mistakes on a web-site can make your site (or worse your firm) look unreliable and careless, but they can creep through the net so easily! SprySpell will parse your web-page for spelling mistakes and display correction suggestions inline with the page.Secret
SpryMedia is a web user-interface development studio based in Bonnie Scotland.
On this site you will find some of our software, as well as musings on UI development and the state of the web. This site also hosts various projects such as DataTables, Design, Visual Event and SprySpell.
If you would like to work with SpryMedia on a development project, please get in touch!