Style guide 3.0

_includes/card.html

@@ -8,9 +8,7 @@
   {% assign wds_grid_class = 'usa-width-one-third' %}
 {% endif %}
 
-{% assign project_type = include.project_type | default: 'none' %}
-
-<article class="card {{ wds_grid_class }} usa-width-tablet" data-bucket="{{ project_type }}">
+<article class="card {{ wds_grid_class }} usa-width-tablet">
   <div class="card-link" data-href="{{ card_link }}" tabindex="-1">
     <div role="img"
          title="{{ include.image_alt }}"

_includes/navigation/drawer.html

@@ -9,19 +9,40 @@
   <ul class="usa-sidenav-list usa-accordion">
   {% for item in include.nav_items %}
     <li>
-      {% if item.permalink %}
-        {% assign item_link = item.permalink | prepend: site.baseurl %}
-      {% else %}
-        {% assign item_link = item.text | slugify | hash_link | prepend: site.baseurl %}
-      {% endif %}
+    {% if item.children %}
+      {% assign item_slug = item.text | slugify %}
+      {% assign is_matching = page.url | matches_url: item.permalink %}
 
-      {% if item.multiple_permalinks %}
-        {% assign is_matching = page.url | matches_url: item.multiple_permalinks %}
+      <button class="usa-accordion-button{% if is_matching %} usa-current{% endif %}"
+              aria-expanded="{% if is_matching %}true{% else %}false{% endif %}"
+              aria-controls="{{ item_slug }}">{{ item.text }}</button>
+        <ul id="{{ item_slug }}" class="usa-accordion-content usa-sidenav-sub_list" aria-hidden="{% if is_matching %}false{% else %}true{% endif %}">
+        {% for sub_item in item.children %}
+          <li>
+            {% if sub_item.permalink %}
+              {% assign sub_item_link = sub_item.permalink | prepend: site.baseurl %}
+            {% else %}
+              {% assign sub_item_link = sub_item.text | slugify | hash_link | prepend: site.baseurl %}
+            {% endif %}
+            <a href="{{ sub_item_link }}">{{ sub_item.text }}</a>
+          </li>
+        {% endfor %}
+        </ul>
       {% else %}
-        {% assign is_matching = page.url | matches_url: item.permalink %}
-      {% endif %}
+        {% if item.permalink %}
+          {% assign item_link = item.permalink | prepend: site.baseurl %}
+        {% else %}
+          {% assign item_link = item.text | slugify | hash_link | prepend: site.baseurl %}
+        {% endif %}
 
-      <a href="{{ item_link }}" {% if is_matching %}class="usa-current"{% endif %}>{{ item.text }}</a>
+        {% if item.multiple_permalinks %}
+          {% assign is_matching = page.url | matches_url: item.multiple_permalinks %}
+        {% else %}
+          {% assign is_matching = page.url | matches_url: item.permalink %}
+        {% endif %}
+
+        <a href="{{ item_link }}" {% if is_matching %}class="usa-current"{% endif %}>{{ item.text }}</a>
+      {% endif %}
     </li>
   {% endfor %}
   </ul>

_layouts/styleguide.html

@@ -4,28 +4,67 @@
 nav_items:
   - text: Introduction
     permalink: /styleguide/
+  - text: Layout
+    permalink: /styleguide/layout/
   - text: Typography
     permalink: /styleguide/typography/
+    children:
+      - text: Font family
+        permalink: /styleguide/typography/#font-family
+      - text: Typesetting
+        permalink: /styleguide/typography/#typesetting
+      - text: Links
+        permalink: /styleguide/typography/#links
   - text: Colors
     permalink: /styleguide/colors/
-  - text: Buttons
-    permalink: /styleguide/buttons/
   - text: Images
     permalink: /styleguide/images/
-  - text: Breadcrumb
-    permalink: /styleguide/breadcrumb/
-  - text: Project cards
-    permalink: /styleguide/project-cards/
-  - text: Right aligned list
-    permalink: /styleguide/right-aligned-list/
-  - text: Sticky subnavigation
-    permalink: /styleguide/sticky-subnavigation/
-  - text: Blog components
-    permalink: /styleguide/blog-components/
-  - text: Blog images
-    permalink: /styleguide/blog-images/
+    children:
+      - text: Source reference
+        permalink: /styleguide/images/#source-reference
+      - text: SVG include catalog
+        permalink: /styleguide/images/#svg-include-catalog
+      - text: Image list
+        permalink: /styleguide/images/#image-list
+  - text: Components
+    permalink: /styleguide/components/
+    children:
+      - text: Buttons
+        permalink: /styleguide/components/#buttons
+      - text: Breadcrumbs
+        permalink: /styleguide/components/#breadcrumbs
+      - text: Project cards
+        permalink: /styleguide/components/#project-cards
+      - text: Sticky subnavigation
+        permalink: /styleguide/components/#sticky-subnavigation
+      - text: Right aligned list
+        permalink: /styleguide/components/#right-aligned-list
+  - text: Blog
+    permalink: /styleguide/blog/
+    children:
+      - text: Post previews
+        permalink: /styleguide/blog/#post-previews
+      - text: Blog tags
+        permalink: /styleguide/blog/#blog-tags
+      - text: Blockquotes
+        permalink: /styleguide/blog/#blockquotes
+      - text: Embeds
+        permalink: /styleguide/blog/#embeds
+      - text: Hero images
+        permalink: /styleguide/blog/#hero-images
+      - text: Images without captions
+        permalink: /styleguide/blog/#images-without-captions
+      - text: Images with captions
+        permalink: /styleguide/blog/#images-with-captions
+      - text: Adding a team photo
+        permalink: /styleguide/blog/#adding-a-team-photo
   - text: Using Jekyll
     permalink: /styleguide/using-jekyll/
+    children:
+      - text: Plugin gems
+        permalink: /styleguide/using-jekyll/#plugin-gems
+      - text: Custom plugins
+        permalink: /styleguide/using-jekyll/#custom-plugins
 ---
 
 {% assign dead_end_link = page.permalink | prepend: site.baseurl %}
@@ -45,7 +84,7 @@ <h1 class="h2" id="{{ page.title | slugify }}">{{ page.title }}</h1>
     {% include navigation/drawer.html nav_items=layout.nav_items nav_class_suffix='-styleguide' %}
   </aside>
 
-  <section class="styleguide-content">
+  <section class="styleguide-content usa-content">
     {% if page.subpage %}<h2>{{ page.subpage }}</h2>{% endif %}
     {{ content }}
   </section>

_sass/_components/blockquotes.scss

@@ -42,6 +42,7 @@ blockquote {
 .pquote img {
   align-self: flex-end;
   margin-bottom: $paragraph-margins;
+  margin-left: 0;
   margin-right: 0;
   margin-top: 0;
   width: 100%;

_sass/_components/card.scss

@@ -18,12 +18,18 @@ $card-image-height: 200px;
     }
   }
 
-  @include media($medium-screen) {
+  @include media($tablet-screen) {
     &:nth-last-of-type(1),
     &:nth-last-of-type(2),
     &:nth-last-of-type(3) {
       margin-bottom: 0;
     }
+
+    &:nth-of-type(1),
+    &:nth-of-type(2),
+    &:nth-of-type(3) {
+      margin-bottom: $site-margins;
+    }
   }
 }
 

_sass/_components/layout.scss

@@ -252,6 +252,7 @@
 }
 
 .usa-content {
+  blockquote,
   ol,
   ul {
     max-width: $text-max-width;

_sass/_components/lists.scss

@@ -24,5 +24,6 @@
   align-items: center;
   display: inline-flex;
   min-height: 54px;
+  width: 100%;
 }
 

_sass/_styleguide/layout.scss

@@ -1,4 +1,5 @@
 $sg-header-height: 10rem;
+$margins-width: $sliding-panel-width + (2 * $site-margins);
 
 .styleguide-main-content {
   margin-left: auto;
@@ -26,6 +27,7 @@ $sg-header-height: 10rem;
 
 .styleguide-header-wrapper {
   align-items: center;
+  border-bottom: 1px solid $color-gray-light;
   display: flex;
   height: $sg-header-height;
   padding: $site-margins;
@@ -60,9 +62,16 @@ $sg-header-height: 10rem;
   margin-right: $site-margins;
   margin-top: $sg-header-height;
   max-width: $site-max-width;
+  width: 100%;
+
+  > h3 {
+    margin-top: 0;
+    padding-top: $sg-header-height + $site-margins;
+  }
 
   @include media($medium-screen + $nav-width-extra) {
     margin-left: $site-margins + $sliding-panel-width;
+    width: calc(100% - #{$margins-width});
   }
 }
 

_styleguide/index.md

@@ -8,10 +8,10 @@ subpage: Introduction
 
 The site uses a custom set of styles that inherit from the [U.S. Web Design Standards](https://standards.usa.gov/) and [18F brand](https://pages.18f.gov/brand) guidelines to create style that is professional, unique, and informative. The guide has a two-fold purpose:
 
-1. **Expidite onboarding of future maintainers of the site**. The guide primarily addresses content needs; there is a separate [README for technical documentation](https://github.com/18F/18f.gsa.gov/tree/master/_plugins).
+1. **Speed up onboarding of future maintainers of the site**. The guide primarily addresses content needs; there is a separate [README for technical documentation](https://github.com/18F/18f.gsa.gov/tree/master/_plugins).
 2. **Serve as a living reference for 18F brand of styles.**
 
-### Overriding the standards
+### Overriding the Standards
 
 While 18f.gsa.gov relies heavily on the U.S. Web Design standards, there are several instances where we have overridden styles with our own set of custom stylesheets. This is primarily to align ourselves more directly with the 18F brand set of fonts, colors, and logos. Additional overrides were made to create custom layouts or components to address user needs that are specific to the marketing of the 18F brand.