130. EPMO Open Source Coordination Office Redaction File Detail Report

Produced by Araxis Merge on 3/13/2018 7:47:01 PM Central Daylight Time. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.

130.1 Files compared

# Location File Last Modified
1 Wed Mar 14 00:47:01 2018 UTC
2 TASCore_v1.0_Build_2_Jan_2018.zip\Build_Artifacts\mccf-tas_TAS.01.00.121_20171213_164037.tar\assets\uswds README.md Wed Dec 13 23:09:45 2017 UTC

130.2 Comparison summary

Description Between
Files 1 and 2
Text Blocks Lines
Unchanged 0 0
Changed 0 0
Inserted 1 259
Removed 0 0

130.3 Comparison options

Whitespace
Character case Differences in character case are significant
Line endings Differences in line endings (CR and LF characters) are ignored
CR/LF characters Not shown in the comparison detail

130.4 Active regular expressions

No regular expressions were active.

130.5 Comparison detail

        1   # U.S. Web  Design St andards
        2  
        3   [![CircleC I Build St atus](http s://circle ci.com/gh/ 18F/web-de sign-stand ards/tree/ develop.sv g?style=sh ield)](htt ps://circl eci.com/gh /18F/web-d esign-stan dards/tree /develop)  [![Test Co verage](ht tps://code climate.co m/github/1 8F/web-des ign-standa rds/badges /coverage. svg)](http s://codecl imate.com/ github/18F /web-desig n-standard s/coverage )
        4  
        5   The [U.S.  Web Design  Standards ](https:// standards. usa.gov) i nclude a l ibrary of  open sourc e UI compo nents and  a visual s tyle guide  for U.S.  federal go vernment w ebsites.
        6  
        7   This repos itory is f or the Sta ndards the mselves. 1 8F maintai ns [anothe r reposito ry for the  documenta tion and w ebsite](ht tps://gith ub.com/18F /web-desig n-standard s-docs). T o see the  Standards  and docume ntation on  the web,  visit [htt ps://stand ards.usa.g ov](https: //standard s.usa.gov) .
        8  
        9  
        10   ## Content s
        11  
        12   * [Backgro und](#back ground)
        13   * [Recent  updates](# recent-upd ates)
        14   * [Getting  started]( #getting-s tarted)
        15   * [Using t he Standar ds](#using -the-stand ards)
        16     * [Downl oad](#down load)
        17     * [Insta ll using ` npm`](#ins tall-using -npm)
        18       * [Imp orting ass ets](#impo rting-asse ts)
        19       * [Sas s](#sass)
        20       * [Jav aScript](# javascript )
        21     * [Use a nother fra mework or  package ma nager](#us e-another- framework- or-package -manager)
        22   * [Fractal ](#fractal )
        23     * [Templ ate compat ibility](# template-c ompatibili ty)
        24   * [Need in stallation  help?](#n eed-instal lation-hel p)
        25   * [Contrib uting to t he code ba se](#contr ibuting-to -the-code- base)
        26   * [Reuse o f open-sou rce style  guides](#r euse-of-op en-source- style-guid es)
        27   * [License s and attr ibution](# licenses-a nd-attribu tion)
        28  
        29   ## Backgro und
        30  
        31   The compon ents and s tyle guide  of the U. S. Web Des ign Standa rds follow  industry- standard w eb accessi bility gui delines an d use the  best pract ices of ex isting sty le librari es and mod ern web de sign. The  [U.S. Digi tal Servic e](https:/ /www.white house.gov/ digital/un ited-state s-digital- service) a nd [18F](h ttps://18f .gsa.gov/)  created a nd maintai n the U.S.  Web Desig n Standard s for desi gners and  developers . They are  designed  for use by  governmen t product  teams who  want to cr eate beaut iful, easy -to-use on line exper iences for  the publi c. To lear n more abo ut the pro ject, chec k out this  [blog pos t](https:/ /18f.gsa.g ov/2015/09 /28/web-de sign-stand ards/) and  to view w ebsites an d applicat ions check  out our l ist [here] (WHO_IS_US ING_USWDS. md).
        32  
        33  
        34   ## Recent  updates
        35  
        36   Informatio n about th e most rec ent releas e of the S tandards c an always  be found i n the [rel ease histo ry](https: //github.c om/18F/web -design-st andards/re leases). W e include  details ab out signif icant upda tes and an y backward s incompat ible chang es along w ith a list  of all ch anges.
        37  
        38  
        39   ## Getting  started
        40  
        41   We’re glad  you’d lik e to use t he Standar ds — here’ s how you  can get st arted:
        42  
        43   * Designer s: [Check  out our Ge tting Star ted for De signers in formation] (https://s tandards.u sa.gov/get ting-start ed/designe rs/).
        44     * [Desig n files of  all the a ssets incl uded in th e Standard s are avai lable for  download]( https://gi thub.com/1 8F/web-des ign-standa rds-assets /archive/m aster.zip) .
        45   * Develope rs: [Follo w the inst ructions i n this REA DME to get  started.] (#using-th e-standard s)
        46     * [CSS,  JavaScript , image, a nd font fi les of all  the asset s on this  site are a vailable f or downloa d](https:/ /github.co m/18F/web- design-sta ndards/rel eases/down load/v1.0. 0/uswds-1. 0.0.zip).
        47  
        48  
        49   ## Using t he Standar ds
        50  
        51   There are  a few diff erent ways  to use th e Standard s within y our projec t. Which o ne you cho ose depend s on the n eeds of yo ur project  and how y ou are mos t comforta ble workin g. Here ar e a few no tes on wha t to consi der when d eciding wh ich instal lation met hod to use :
        52  
        53   *Download  the Standa rds if:*
        54   - You are  not famili ar with `n pm` and pa ckage mana gement.
        55  
        56   *Use the S tandards ` npm` packa ge if:*
        57   - You are  familiar w ith using  `npm` and  package ma nagement.
        58   - You woul d like to  leverage S tandards [ Sass](#sas s) files.
        59  
        60   ### Downlo ad
        61  
        62   1. Downloa d the [Sta ndards zip  file](htt ps://githu b.com/18F/ web-design -standards /releases/ download/v 1.0.0/uswd s-1.0.0.zi p) and ope n that fil e.
        63  
        64     After ex tracting t he zip fil e you shou ld see the  following  file and  folder str ucture:
        65  
        66     ```
        67     uswds-1. 0.0/
        68     ├── css/
        69     │   ├──  uswds.min. css.map
        70     │   ├──  uswds.min. css
        71     │   └──  uswds.css
        72     ├── font s/
        73     ├── html /
        74     └── js/
        75         ├──  uswds.min. js.map
        76         ├──  uswds.min. js
        77         └──  uswds.js
        78  
        79     ```
        80  
        81   2. Copy th ese files  and folder s into a r elevant pl ace in you r project' s code bas e. Here is  an exampl e structur e for how  this might  look:
        82  
        83     ```
        84     example- project/
        85     ├── asse ts/
        86     │   ├──  uswds-1.0. 0/
        87     │   ├──  stylesheet s/
        88     │   ├──  images/
        89     │   └──  javascript /
        90     └── inde x.html
        91     ```
        92  
        93     You'll n otice in o ur example  above tha t we also  outline a  `styleshee ts`, `imag es` and `j avascript`  folder in  your `ass ets` folde r. These f olders are  to help o rganize an y assets t hat are un ique to yo ur project .
        94  
        95   3. To use  the Standa rds on you r project,  you’ll ne ed to refe rence the  [CSS (*C*a scading *S *tyle *S*h eets)](htt ps://devel oper.mozil la.org/en- US/docs/We b/CSS) and  JavaScrip t files in  each HTML  page or d ynamic tem plates in  your proje ct.
        96  
        97     Here is  an example  of how to  reference  these ass ets in you r `index.h tml` file:
        98  
        99     ```html
        100     <!DOCTYP E html>
        101     <html>
        102     <head>
        103       <meta  charset="u tf-8">
        104       <meta  http-equiv ="X-UA-Com patible" c ontent="IE =edge">
        105       <title >My Exampl e Project< /title>
        106       <link  rel="style sheet" hre f="assets/ uswds-1.0. 0/css/uswd s.min.css" >
        107     </head>
        108     <body>
        109  
        110       <scrip t src="ass ets/uswds- 1.0.0/js/u swds.min.j s"></scrip t>
        111     </body>
        112     </html>
        113     ```
        114  
        115   We offer b oth files,  the CSS a nd the Jav aScript, i n two vers ions — a m inified ve rsion, and  an un-min ified one.  (In the e xamples ab ove, we ar e using th e minified  files.) U se the min ified file s in a pro duction en vironment  or to redu ce the fil e size of  your downl oaded asse ts. And th e un-minif ied files  are better  if you ar e in a dev elopment e nvironment  or would  like to de bug the CS S or JavaS cript asse ts in the  browser.
        116  
        117   And that’s  it — you  should now  be able t o copy our  code samp les into o ur `index. html` and  start usin g the Stan dards.
        118  
        119   ### Instal l using np m
        120  
        121   `npm` is a  package m anager for  Node base d projects . The U.S.  Web Desig n Standard s maintain s a [`uswd s` package ](https:// www.npmjs. com/packag e/uswds) f or you to  utilize bo th the pre -compiled  and compil ed files o n your pro ject.
        122  
        123   1. Install  `Node/npm `. Below i s a link t o find the  install m ethod that  coincides  with your  operating  system:
        124  
        125     - Node v 4.2.3+, [I nstallatio n guides]( https://no dejs.org/e n/download /)
        126  
        127     **Note f or Windows  users:**  If you are  using Win dows and a re unfamil iar with ` Node` or ` npm`, we r ecommend f ollowing [ Team Treeh ouse's tut orial](htt p://blog.t eamtreehou se.com/ins tall-node- js-npm-win dows) for  more infor mation.
        128  
        129   2. Make su re you hav e installe d it corre ctly:
        130  
        131     ```shell
        132     npm -v
        133     3.10.8 #  This line  may vary  depending  on what ve rsion of N ode you've  installed .
        134     ```
        135  
        136   3. Create  a `package .json` fil e. You can  do this m anually, b ut an easi er method  is to use  the `npm i nit` comma nd. This c ommand wil l prompt y ou with a  few questi ons to cre ate your ` package.js on` file.
        137  
        138   4. Add `us wds` to yo ur project ’s `packag e.json`:
        139  
        140     ```shell
        141     npm inst all --save  uswds
        142     ```
        143  
        144   The `uswds ` module i s now inst alled as a  dependenc y. You can  use the u n-compiled  files fou nd in the  `src/` or  the compil ed files i n the `dis t/` direct ory.
        145  
        146   ```
        147   node_modul es/uswds/
        148   ├── dist/
        149   │   ├── cs s/
        150   │   ├── fo nts/
        151   │   ├── ht ml/
        152   │   ├── im g/
        153   │   ├── js /
        154   └── src/
        155       ├── fo nts/
        156       ├── im g/
        157       ├── js /
        158       ├── st ylesheets/
        159       └── te mplates/
        160   ```
        161  
        162   #### Impor ting asset s
        163  
        164   Since you  are alread y using `n pm`, the U .S. Web De sign Stand ards team  recommends  leveragin g the abil ity to wri te custom  scripts. H ere are so me links t o how we d o this wit h our docs  website u sing `npm`  + [`gulp` ](http://g ulpjs.com/ ):
        165  
        166   [Link to ` npm` scrip ts example  in `web-d esign-stan dards-docs `](https:/ /github.co m/18F/web- design-sta ndards-doc s/blob/dev elop/packa ge.json#L4 )
        167  
        168   [Link to g ulpfile.js  example i n `web-des ign-standa rds-docs`] (https://g ithub.com/ 18F/web-de sign-stand ards-docs/ blob/devel op/gulpfil e.js)
        169  
        170   #### Sass
        171  
        172   The Standa rds are ea sily custo mizable us ing the po wer of [Sa ss (Syntac tically Aw esome Styl e Sheets)] (http://sa ss-lang.co m/). The m ain Sass ( SCSS) sour ce file is  located h ere:
        173  
        174   ```
        175   node_modul es/uswds/s rc/stylesh eets/uswds .scss
        176   ```
        177  
        178   Global var iables are  defined i n the `nod e_modules/ uswds/src/ stylesheet s/core/_va riables.sc ss` file.  Custom the ming can b e done by  copying th e `_variab les.scss`  file into  your own p roject’s S ass folder , changing  applicabl e variable  values, a nd importi ng it befo re `uswds. scss`.
        179  
        180   Below is a n example  of how you  might set up your ma in Sass fi le to achi eve this:
        181  
        182   ```
        183   @import 'v ariables.s css' # Cus tom Sass v ariables f ile
        184   @import 'n ode_module s/uswds/sr c/styleshe ets/uswds. scss';
        185  
        186   ```
        187  
        188   You can no w use your  copied ve rsion of ` _variables .scss` to  override a ny styles  to create  a more cus tom look a nd feel to  your appl ication.
        189  
        190   #### JavaS cript
        191   `require(' uswds')` w ill load a ll of the  U.S. Web D esign Stan dards’ Jav aScript on to the pag e. Add thi s line to  whatever i nitializer  you use t o load Jav aScript in to your ap plication.
        192  
        193   ### Use an other fram ework or p ackage man ager
        194  
        195   If you’re  using anot her framew ork or pac kage manag er that do esn’t supp ort `npm`,  you can f ind the so urce files  in this r epository  and use th em in your  project.  Otherwise,  we recomm end that y ou follow  the [downl oad instru ctions](#d ownload).  Please not e that the  core team  [isn’t re sponsible  for all fr ameworks’  implementa tions](htt ps://githu b.com/18F/ web-design -standards /issues/87 7).
        196  
        197   If you’re  interested  in mainta ining a pa ckage that  helps us  distribute  the U.S.  Web Design  Standards , the proj ect’s buil d system c an help yo u create d istributio n bundles  to use in  your proje ct. Please  read our  [contribut ing guidel ines](CONT RIBUTING.m d#building -the-proje ct-locally -with--gul p-) to loc ally build  distribut ions for y our framew ork or pac kage manag er.
        198  
        199  
        200   ## Fractal
        201  
        202   We're usin g [Fractal ](http://f ractal.bui ld) to gen erate an i nteractive  component  library f or the Sta ndards. Yo u can run  it locally  after `np m install`  with:
        203  
        204   ```sh
        205   npm start
        206   ```
        207  
        208   Then, visi t [http:// localhost: 3000/](htt p://localh ost:3000/)  to see th e Standard s in actio n.
        209  
        210   _**Optiona l**: To re -build whe n code cha nges are m ade, run t he followi ng command  from the  project di rectory in  a separat e terminal  window:_
        211   ```sh
        212   npm run wa tch
        213   ```
        214  
        215   ### Templa te compati bility
        216  
        217   Many of ou r Fractal  view templ ates are c ompatible  with [Nunj ucks](http s://mozill a.github.i o/nunjucks /) (for Ja vaScript/N ode), [Jin ja](http:/ /jinja.poc oo.org/doc s/2.9/) (P ython), an d [Twig](h ttps://twi g.sensiola bs.org/) ( PHP) out o f the box.  Component s that ref erence oth er compone nts use a  Fractal-sp ecific `{%  render %} ` tag that  will eith er need to  be implem ented in o ther envir onments or  replaced  with the a ppropriate  `{% inclu de %}` tag s.
        218  
        219  
        220   ## Need in stallation  help?
        221  
        222   Do you hav e question s or need  help with  setup? Did  you run i nto any we ird errors  while fol lowing the se instruc tions? Fee l free to  open an is sue here:
        223  
        224   [https://g ithub.com/ 18F/web-de sign-stand ards/issue s](https:/ /github.co m/18F/web- design-sta ndards/iss ues).
        225  
        226   You can al so email u s directly  at uswebd esignstand ards@gsa.g ov.
        227  
        228  
        229   ## Contrib uting to t he code ba se
        230  
        231   For comple te instruc tions on h ow to cont ribute cod e, please  read [CONT RIBUTING.m d](CONTRIB UTING.md).  These ins tructions  also inclu de guidanc e on how t o set up y our own co py of the  Standards  style guid e website  for develo pment.
        232  
        233   If you wou ld like to  learn mor e about ou r workflow  process,  check out  the [Workf low](https ://github. com/18F/we b-design-s tandards/w iki/Workfl ow) and [I ssue label  Glossary] (https://g ithub.com/ 18F/web-de sign-stand ards/wiki/ Issue-labe l-glossary ) pages on  the wiki.
        234  
        235   If you hav e question s or conce rns about  our contri buting wor kflow, ple ase contac t us by [f iling a Gi tHub issue ](https:// github.com /18F/web-d esign-stan dards/issu es) or [em ailing our  team](mai lto:uswebd esignstand ards@gsa.g ov).
        236  
        237  
        238   ## Reuse o f open-sou rce style  guides
        239  
        240   Much of th e guidance  in the U. S. Web Des ign Standa rds leans  on open so urce desig ns, code,  and patter ns from ot her civic  and govern ment organ izations,  including:
        241  
        242   * Consumer  Financial  Protectio n Bureau’s  [Design M anual](htt ps://cfpb. github.io/ design-man ual/)
        243   * U.S. Pat ent and Tr ademark Of fice’s [De sign Patte rns](http: //uspto.gi thub.io/de signpatter ns/)
        244   * Healthca re.gov [St yle Guide] (http://st yleguide.h ealthcare. gov/)
        245   * UK’s Gov ernment Di gital Serv ice’s [UI  Elements]( http://gov uk-element s.herokuap p.com/)
        246   * Code for  America’s  Chime [St yleguide]( https://gi thub.com/c himecms/ch ime-starte r)
        247   * Pivotal  Labs [Comp onent Libr ary](http: //stylegui de.cfapps. io/)
        248  
        249  
        250   ## License s and attr ibution
        251  
        252   A few part s of this  project ar e not in t he public  domain. At tribution  and licens ing inform ation for  those part s are desc ribed in d etail in [ LICENSE.md ](LICENSE. md).
        253  
        254   The rest o f this pro ject is in  the world wide publi c domain,  released u nder the [ CC0 1.0 Un iversal pu blic domai n dedicati on](https: //creative commons.or g/publicdo main/zero/ 1.0/).
        255  
        256  
        257   ## Contrib uting
        258  
        259   All contri butions to  this proj ect will b e released  under the  CC0 dedic ation alon gside the  public dom ain portio ns of this  project.  For more i nformation , see [CON TRIBUTING. md](CONTRI BUTING.md) .

Araxis Merge (but not the data content of this report) is Copyright © 1993-2016 Araxis Ltd (www.araxis.com). All rights reserved.