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.

View _mixins.scss
// generate a custom element selector with the correct prefix
@mixin custom-element($name) {
#{$usa-prefix}-#{$name} {
View aria-validated.css
input {
display: block;
input[aria-invalid=true][aria-label]::before {
color: red;
content: attr(aria-label);
display: block;

This is a Sketch script to make bar charts.


Here's how to run it:

  1. Make a selection of only shapes with names in the format:


This is an example of what you should be able to do once the major browsers implement some seriously cool features in the CSS3 draft spec as of April, 2016:

  1. [CSS variables][vars], using the --name: value assignment and var(--name) accessor syntax. (Already implemented by Chrome, Firefox, and Webkit!)
  2. [CSS3 calc()][calc], which gives us calculated values between different units, e.g. subtracting a value in px or em from a percentage. (Partially implemented in Chrome, Firefox, and Safari.)
  3. [CSS3 attr()][attr], which grants the function the ability to parse values in specific units in the form attr(attr-name units). (Not yet implemented in any major browser.)

Together, these features would enable us to use HTML element attribute values as the basis for calculated values in CSS on a per-element basis, and define (then change) which property the values are applied to. This would open up possibilities for more data-driven design entirely in CSS, without the need for JavaScript.

Note: I've

View markdown.html
{% capture markdown %}{% include {{ include.content }}.md %}{% endcapture %}
{{ markdown | markdownify }}