shawnbot

const resolveIdRefs = require('resolve-id-refs')

class RemoteSummary extends HTMLElement {
  clicking = false

  onToggle = event => {
    if (this.clicking) {
      return
    }
    const {target} = event

shawnbot

.m-0 {
  margin: 0 !important; }

.mt-0 {
  margin-top: 0 !important; }

.mr-0 {
  margin-right: 0 !important; }

.mb-0 {

shawnbot

import React from 'react'

const pass = props => props

export default function chameleon(defaultTag, mapProps = pass) {
  const Component = ({tag: Tag = defaultTag, ...rest}) => <Tag {...mapProps(rest)} />
  Component.as = tag => chameleon(tag, mapProps || pass)
  // if we don't want these to be infinitely as()-able, we could do this instead:
  // Component.as = Tag => ({tag, ...rest}) => <Tag {...mapProps(rest)} />
  return Component

shawnbot

{
  "presets": ["env", "react"]
}

shawnbot

const invariant = require('invariant')

const HIDE = 'd-none'
const SHOW = ['d-block', 'd-flex', 'd-inline', 'd-inline-block']
const DISPLAY = [HIDE].concat(SHOW)

module.exports = function displayClassToHidden(fileInfo, api, options) {
  const j = api.jscodeshift

  let replaced = false

shawnbot

gistup

shawnbot

[Details toggle]

The Details toggle component is what we used to use for most toggle-able content today.

The good

1. It's simple and well understood.
2. Because it's CSS-based, there's no flash of unstyled content: what should be invisible is, and vice-versa.

The bad

1. The class names Details-content--shown and Details-content--hidden can be confusing. (If you thought that "shown" was shown when the details are "on", you were wrong just like me!)

shawnbot

colorBlue: '#00f'
colorGreen: '#0f0'
colorRed: '#f00'

shawnbot

U.S. Web Design Standards + node-sass

This is a very simple example of how to set up [node-sass] to build on the [U.S. Web Design Standards][uswds]. To run it:

1. Install [Node.js].

2. Install node-sass and the Standards source files with:

npm install

shawnbot

The pitch

What if you could design components using [atomic CSS], then publish them with more user-friendly semantic classes?

Example

Let's say you're using [Tachyons], but you can't stomach the markup for its starup hero component:

<header class="sans-serif">
  <div class="cover bg-left bg-center-l" style="background-image: url(http://mrmrs.io/photos/u/011.jpg)">
    <div class="bg-black-80 pb5 pb6-m pb7-l">