[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": []

This is a minimal fractal.js for testing the live context data editor proposed in this PR.

View .babelrc
{"presets": ["es2015", "stage-0"]}

This is a Jekyll-specific way to render HTML source for a given page (in this case, one in a collection) alongside the markup itself without having to duplicate content in includes.