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.

markdalgleish

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
  })
);

markdalgleish

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

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

markdalgleish

import transitions from './transitions.css';

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

markdalgleish

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() {

markdalgleish

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

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

markdalgleish

$ time time

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

markdalgleish

/*
 *  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 ) {