View index.md

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">
View pagespeed.json
{
"kind": "pagespeedonline#result",
"id": "https://standards.usa.gov/",
"responseCode": 200,
"title": "U.S. Web Design Standards Documentation | Announcing version 1.0",
"ruleGroups": {
"SPEED": {
"score": 66
},
"USABILITY": {
View 18f-pages.rb
PAGES_BRANCHES = ['18f-pages']
if PAGES_BRANCHES.include? ENV['BRANCH']
Jekyll::Hooks.register :site, :pre_render do |site|
site.config['baseurl'] = '/{repo}'
end
end
View example.sketch.json
{
"currentPageIndex": null,
"assets": {
"gradients": [],
"colors": [],
"imageCollection": {
"images": {}
},
"images": []
},
View README.md

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

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

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} {
@content;
}
}
View aria-validated.css
label,
input {
display: block;
}
input[aria-invalid=true][aria-label]::before {
color: red;
content: attr(aria-label);
display: block;
}
View README.md

This is a Sketch script to make bar charts.

bars

Here's how to run it:

  1. Make a selection of only shapes with names in the format:
(anything)value={number}