Golden Age of Web Platform

Web Standards

Frameworks
Libraries

Developer Tools

DevTools in all browsers provide
a robust toolkit to empower
web developers.

What about web designers?

DevTools for Designers

Razvan Caliman

Firefox DevTools

CSS Shapes
CSS Regions
CSS Masking
CSS Blend Modes

Firebug

What do web designers need
to really design in the browser?

Freedom

Confidence

Specialized Tools

Ergonomics

Freedom

Canvas that fosters creative exploration

Confidence

Peace of mind that tweaks are reversible and changes are not lost

Local Overrides

Finch Developer Tools

Specialized Tools

Editors focused on doing one thing very well

Color Picker

Text Shadow Editor

CSS Grid Inspector

CSS Filter Editor

CSS Gradient Editor

Safari DevTools has a CSS gradient editor. It is shown here in use on grabient.com, a website where people create color gradients using a graphical user interface.

Font Editor

Quick
brown
fox

axis-praxis.org

Shape Path Editor

Ergonomics

Tools customized to fit the way people work

Browser DevTools

Tweet from Sophie Alpert highlighing that React Devtools has over 1 million users as of 15 May 2018.
Firefox Devtools showing an empty panel for a Firefox DevTools extension.
Firefox Devtools showing an empty sidebar panel for a Firefox DevTools extension.
Firefox Devtools in 3 pane mode showing the CSS rule view along side an empty sidebar panel for a Firefox DevTools extension.
Isolated view of a sidebar panel in Firefox DevTools to illustrate how limited the development API is.
Proposed editor for CSS font-weight as a DevTools extension.
Multiple editors for the same CSS property provided as DevTools extensions.
Multiple editors open at the same time for different CSS properties.
Preview tooltip illustrating the value of a CSS transform property.
DevTools recommending an extension for editing a CSS gradient property.

@RazvanCaliman

@FirefoxDevTools

API

	.registerPropertyPreview({
		property  // "color", "background", "display"
		value 	  // CSSUnitValue, CSSImageValue, CSSKeywordValue
		onShow 	  // function(CSSDeclaration, Node, Rules)
		onHide 	  // function(CSSDeclaration, Node, Rules)
	})
	
	.registerPropertyEditor({
		property  // "color", "background", "display"
		value 	  // CSSUnitValue, CSSImageValue, CSSKeywordValue
		onShow 	  // function(CSSDeclaration, Node, Rules)
		onHide 	  // function(CSSDeclaration, Node, Rules)
		onDestroy // function()
	})
	
	Node
		Node.onQuadsChange()
		Node.onZoomChange()
		Node.onRemove()
	...
	
	CSSDeclaration
		.value
		.property
		.enabled
		.overriden
		.parentRule

		.value()
		.preview()
		.replace() → Ex: replace shorthand notation
		.remove()

		onChange()
		onRemove()
		onAppliedStateChange() → enabled, disabled, overriden, applied
	...
	
	Rules
		.find(property, [value]) → Find related CSS properties (Ex: backgound-*)
		.addR()
		.remove()

The tools we use sometimes
inspire the things we make. — Mustafa Kurtuldu, Design Advocate at Google

razvan.is/speaking/cssconfeu-2018


Credits:

Amstelvar font by David Berlow
Webflow demo video from webflow.com
Photo by Mike Erskine on Unsplash
Photo by Steven Wei on Unsplash
Photo by Leio McLaren on Unsplash
Photo by Matt Artz on Unsplash
Photo by Chris Leipelt on Unsplash