View tokens.yml
colorBlue: '#00f'
colorGreen: '#0f0'
colorRed: '#f00'
View README.md

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
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;
}
}