Skip to content

Instantly share code, notes, and snippets.

@toolness
Last active August 17, 2017 14:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save toolness/5810d08414fc3d941e00bf296a7dc928 to your computer and use it in GitHub Desktop.
Save toolness/5810d08414fc3d941e00bf296a7dc928 to your computer and use it in GitHub Desktop.
USWDS CSS class usage

The following output was generated by the find-usa-class-usage.js script in 18F/uswds-crawler.

Class Usage
usa-grid 75%
usa-width-one-half 54%
usa-button 51%
usa-unstyled-list 45%
usa-width-one-third 45%
usa-footer 42%
usa-disclaimer 42%
usa-disclaimer-official 39%
usa-width-two-thirds 35%
usa-grid-full 32%
usa-footer-logo 32%
usa-footer-secondary_section 31%
usa-width-one-whole 31%
usa-disclaimer-stage 29%
usa-search 28%
usa-sr-only 28%
usa-flag_icon 28%
usa-banner 26%
usa-button-big 26%
usa-section 25%
usa-accordion 25%
usa-button-outline 23%
usa-font-lead 23%
usa-footer-return-to-top 23%
usa-footer-contact-links 23%
usa-skipnav 21%
usa-button-secondary 20%
usa-nav 20%
usa-logo 20%
usa-width-one-fourth 20%
usa-accordion-content 20%
usa-footer-contact-heading 20%
usa-content 20%
usa-banner-content 20%
usa-footer-primary-content 18%
usa-footer-primary-link 18%
usa-accordion-button 18%
usa-header 18%
usa-footer-nav 18%
usa-menu-btn 17%
usa-nav-link 17%
usa-navbar 17%
usa-nav-primary 17%
usa-nav-close 17%
usa-nav-inner 17%
usa-footer-primary-section 17%
usa-footer-medium 15%
usa-banner-header 15%
usa-button-outline-inverse 15%
usa-sans 15%
usa-site-header 14%
usa-search-small 14%
usa-banner-inner 14%
usa-hero 14%
usa-footer-logo-img 14%
usa-banner-guidance-gov 12%
usa-footer-slim 12%
usa-nav-submenu 12%
usa-overlay 12%
usa-logo-text 12%
usa-media_block-body 12%
usa-banner-guidance-ssl 10%
usa-nav-secondary 10%
usa-banner-button 10%
usa-media_block-img 10%
usa-banner-icon 10%
usa-width-one-sixth 10%
usa-banner-button-text 10%
usa-footer-logo-heading 9%
usa-site-navbar 9%
usa-footer-big 9%
usa-nav-secondary-links 9%
usa-sidenav-list 9%
usa-footer-big-secondary-section 9%
usa-header-extended 9%
usa-footer-slim-logo-img 7%
usa-link-youtube 7%
usa-nav-container 7%
usa-sidenav-sub_list 7%
usa-link-twitter 7%
usa-button-unstyled 7%
usa-button-primary 7%
usa-link-facebook 7%
usa-search-submit-text 6%
usa-width-three-fourths 6%
usa-button-list 6%
usa-header-basic 6%
usa-hero-callout 6%
usa-sign_up-block 4%
usa-external_link 4%
usa-background-dark 4%
usa-footer-contact_info 4%
usa-search-big 4%
usa-sign_up-header 4%
usa-label 4%
usa-link-instagram 4%
usa-link-flickr 4%
usa-current 4%
usa-link-rss 4%
usa-styleguide-footer 4%
usa-button-gray 4%
usa-megamenu 3%
usa-header-search-button 3%
usa-social-links 3%
usa-megamenu-col 3%
usa-section-dark 3%
usa-hero-callout-alt 3%
usa-graphic_list 3%
usa-graphic_list-row 3%
usa-alert-body 3%
usa-section-light 3%
usa-alert-warning 3%
usa-display 3%
usa-flag 3%
usa-footer-circle-124 3%
usa-link-govdelivery 3%
usa-hero-navbar 3%
usa-alert-text 3%
usa-gov 3%
usa-alert 3%
usa-header-logo-img 3%
usa-alert-heading 3%
usa-button-active 3%
usa-button-primary-alt 3%
usa-table-borderless 3%
usa-end-row 3%
usa-grid-one-half 3%
usa-link-google 3%
usa-text-small 3%
usa-row 1%
usa-width-one-half-top 1%
usa-img-circle 1%
usa-graphic-list-heading 1%
usa-graphic-list-text 1%
usa-intro-overview 1%
usa-media 1%
usa-media-img 1%
usa-media-text 1%
usa-no_margins 1%
usa-section-alt 1%
usa-fieldset-inputs 1%
usa-color-text 1%
usa-color-primary-darkest 1%
usa-color-text-white 1%
usa-fedramd-logo-background 1%
usa-color-text-primary 1%
usa-color-white 1%
usa-color-text-gray 1%
usa-date-of-birth 1%
usa-datefield 1%
usa-form-group 1%
usa-form-group-month 1%
usa-form-control 1%
usa-form-group-day 1%
usa-form-group-year 1%
usa-button-disabled 1%
usa-logo-title 1%
usa-banner-link-top 1%
usa-hero-callout--below 1%
usa-hero-border 1%
usa-button-small 1%
usa-input-buttons-inline 1%
usa-width-whole 1%
usa-media_block 1%
usa-heading 1%
usa-content-list 1%
usa-intro 1%
usa-grid-- 1%
usa-grid-one-third 1%
usa-accordion-bordered 1%
usa-header-dark 1%
usa-header-basic-megamenu 1%
usa-logo-main-text 1%
usa-nav-dark 1%
usa-hero-overlay 1%
usa-graphic_list-mars 1%
usa-graphic_list-aero 1%
usa-graphic_list-facilities 1%
usa-circle-block 1%
usa-section-alt-bg 1%
usa-grid-center 1%
usa-disclaimer-text 1%
usa-width-five-sixths 1%
usa-button-dismiss 1%
usa-color-gold 1%
usa-one-whole 1%
usa-width-shift-one 1%
usa-width-short-one 1%
usa-width-tablet 1%
usa-whats-new 1%
usa-button-hover 1%
usa-button-focus 1%
usa-banner-header__img 1%
usa-leftcol 1%
usa-topheader 1%
usa-rss 1%
usa-db 1%
usa-tagline 1%
usa-topright 1%
usa-advsearch 1%
usa-main-content 1%
usa-subnav 1%
usa-hometop 1%
usa-noborder 1%
usa-bluewebpart 1%
usa-main-content-bottom 1%
usa-layout-docs 1%
usa-layout-docs-sidenav 1%
usa-blog-sidenav-list 1%
usa-layout-docs-main_content 1%
usa-input-required 1%
usa-hero-callout_base 1%
usa-section-base 1%
usa-footer-slim-logo-heading 1%
usa-display-alt 1%
usa-card--secondary-darkest 1%
usa-card--rounded 1%
usa-card_divider 1%
usa-card_divider--secondary-darkest 1%
usa-card_title 1%
usa-card_section 1%
usa-card--primary-darker 1%
usa-card_divider--primary-darker 1%
usa-footer-primary_section 1%
usa-base 1%
usa-disclaimer-official__img 1%
usa-disclaimer-official__body 1%
usa-accordion-- 1%

Usage represents the percentage of USWDS sites whose front page uses the class at least once.

Additionally, the following sites do not use any classes that begin with usa-:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment