shawnbot

colorBlue: '#00f'
colorGreen: '#0f0'
colorRed: '#f00'

shawnbot

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

shawnbot

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">

shawnbot

{
 "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": {

shawnbot

PAGES_BRANCHES = ['18f-pages']

if PAGES_BRANCHES.include? ENV['BRANCH']
    Jekyll::Hooks.register :site, :pre_render do |site|
        site.config['baseurl'] = '/{repo}'
    end
end

shawnbot

{
  "currentPageIndex": null,
  "assets": {
    "gradients": [],
    "colors": [],
    "imageCollection": {
      "images": {}
    },
    "images": []
  },

shawnbot

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

shawnbot

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

shawnbot

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.

shawnbot

// generate a custom element selector with the correct prefix
@mixin custom-element($name) {
  #{$usa-prefix}-#{$name} {
    @content;
  }
}