Skip to content

Instantly share code, notes, and snippets.

Avatar

Alan B Smith alanbsmith

View GitHub Profile
@alanbsmith
alanbsmith / Design Systems Resources.md
Last active Dec 28, 2020
Design Systems Resources | A Primer
View Design Systems Resources.md

Design Systems Resources | A Primer

Design Systems

  • [Design Systems][1] by Alla Kholmatova - pretty much the canonical design systems book
  • [Expressive Design Systems][2] by Yesenia Perez-Cruz - a great follow-up to Kholmatova's book
  • [Atomic Design][3] by Brad Frost - written before we were using the term 'design system' for web interfaces, but many of the popular ideas extend from these ideas

Systems Thinking

@alanbsmith
alanbsmith / sign.js
Last active Oct 20, 2020
A JS function for adding a signature to an HTML canvas element
View sign.js
function sign(name, fontSize = 96) {
// assumes the id of the canvas element is 'canvas'
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d');
ctx.font = `italic ${fontSize}px Snell Roundhand`;
const signatureWidth = ctx.measureText(name).width;
const x = canvas.width/2 - signatureWidth/2;
const y = canvas.height/2 + fontSize/2;
ctx.fillStyle = ctx.strokeStyle;
ctx.fillText(name, x, y);
@alanbsmith
alanbsmith / CollapsibleSideNav.jsx
Created Sep 4, 2020
image08 for component hierarchy post
View CollapsibleSideNav.jsx
import { collapseOnEsc } from '../utils/hooks';
import { useSideNav } from './hooks';
const CollapsibleSideNav = () => {
const { isNavOpen, toggleNav, a11yTargetProps, a11yHeadingProps} = useSideNav();
// collapse the nav when the ESC key is pressed
collapseOnEsc();
return (
<SidenavContainer variant={isNavOpen ? 'expanded' : 'collapsed'}>
@alanbsmith
alanbsmith / NavLink.tsx
Created Sep 4, 2020
image07 for component hierarchy post
View NavLink.tsx
@alanbsmith
alanbsmith / Box.tsx
Created Sep 4, 2020
image06 for component hierarchy post
View Box.tsx
<Box>
<Box paddingTop="l">Item 1</Box>
<Box paddingY="s">Item 2</Box>
<Box paddingBottom="l">Item 3</Box>
</Box>
@alanbsmith
alanbsmith / Flex.tsx
Created Sep 4, 2020
image05 for component hierarchy post
View Flex.tsx
<Flex direction="column">
<Flex padding="s">Item 1</Flex>
<Flex padding="m">Item 2</Flex>
<Flex padding="s">Item 3</Flex>
</Flex>
@alanbsmith
alanbsmith / Stack.jsx
Created Sep 4, 2020
image04 for component hierarchy post
View Stack.jsx
<Stack space="m">
<Stack.Item>Item 1</Stack.Item>
<Stack.Item>Item 2</Stack.Item>
<Stack.Item>Item 3</Stack.Item>
</Stack>
@alanbsmith
alanbsmith / primitives.jsx
Created Sep 4, 2020
image03 for component hierarchy post
View primitives.jsx
<Box padding="s" border={`solid 1px ${borderColor}`}>A bordered box</Box>
<Text as="p" fontSize="body" color="text">This is a short line of text.</Box>
@alanbsmith
alanbsmith / LeftNavWithIcons.jsx
Created Sep 4, 2020
image02 for component hierarchy post
View LeftNavWithIcons.jsx
const LeftNavWithIcons = () => {
return (
<Box padding="m">
<Nav>
<List>
<ListItem>
<Icon type="home" />
<Link href="/">Home</Link>
</ListItem>
<ListItem>
@alanbsmith
alanbsmith / LeftNav.jsx
Created Sep 4, 2020
image01 for component hierarchy post
View LeftNav.jsx
const LeftNav = () => {
return (
<Box padding="m">
<Nav>
<List>
<ListItem>
<Link href="/">Home</Link>
</ListItem>
<ListItem>
<Link href="/about">About</Link>