View .babelrc
"presets": ["env", "react"]
View displayClassToHidden.js
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

[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!)
View tokens.yml
colorBlue: '#00f'
colorGreen: '#0f0'
colorRed: '#f00'

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

The pitch

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


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(">
    <div class="bg-black-80 pb5 pb6-m pb7-l">
View pagespeed.json
"kind": "pagespeedonline#result",
"id": "",
"responseCode": 200,
"title": "U.S. Web Design Standards Documentation | Announcing version 1.0",
"ruleGroups": {
"SPEED": {
"score": 66
View 18f-pages.rb
PAGES_BRANCHES = ['18f-pages']
Jekyll::Hooks.register :site, :pre_render do |site|
site.config['baseurl'] = '/{repo}'
View example.sketch.json
"currentPageIndex": null,
"assets": {
"gradients": [],
"colors": [],
"imageCollection": {
"images": {}
"images": []