Mark Dalgleish markdalgleish

Someone asked me about the spacing scale in Braid and I thought I'd share my thoughts here. For reference this is what they were referring to: https://github.com/seek-oss/braid-design-system/blob/ecdd7f3060cab2a6675cde7dd45bcd510caa268b/packages/braid-design-system/src/lib/themes/baseTokens/apac.ts#L166-L175

I could maybe have turned this into a blog post, but I'm just dropping my rough thoughts here instead.

In practice, the T-shirt size scale felt like indirection because our designers didn't think in those terms so it actually got in the way of developers and designers communicating.

The names also weren't really semantic in the sense that we couldn't confidently change them later without breaking a lot of layouts.

It also made it difficult to name new values to the scale, e.g. if we needed to add a value between "small" and "medium", what would we call it? I've seen things like "xmedium" in other systems before which shows how awkward this can get.

	import React from 'react';
	import classnames from 'classnames';
	import resetStyles from './reset.module.css';

	export default ({ component, className, ...props }) =>
	React.createElement(component, {
	className: classnames(className, resetStyles[component]),
	...props
	})
	);

	var balance = require('balance-parens');

	const inputs = [
	')()(()(',
	')))',
	'()(())()',
	')()()(()(()))))(',
	')))())()))('
	];

	import transitions from './transitions.css';

	export default () => (
	<ReactCSSTransitionGroup transitionName={transitions}>
	{ ... }
	</ReactCSSTransitionGroup>
	);

	import styles from './MyComponent.css';

	import React, { Component } from 'react';
	import { tag } from 'react-css-modules';

	const { DIV, H1, H2, P, EM } = tag(styles);

	export default class MyComponent extends Component {

	render() {

	.foo {
	font-family: helvetica, arial, sans-serif;
	font-size: 16px;
	color: red;
	}

	.bar {
	font-family: helvetica, arial, sans-serif;
	font-size: 16px;
	color: blue;

	/*
	* Project:
	* Description:
	* Author:
	* License:
	*/

	// the semi-colon before function invocation is a safety net against concatenated
	// scripts and/or other plugins which may not be closed properly.
	;(function ( $, window, undefined ) {

	$ time time

	real 0m0.020s
	user 0m0.001s
	sys 0m0.004s