issue-360/band-body-grid-gap Add back grid settings to default slot (band body), update readme with explicit notes for this section, refine demo file

Author: starryeyez024

elements/pfe-band/README.md

@@ -7,10 +7,35 @@ This container element provides a set of slots in which to render banded content
 All slots other than `pfe-band--body` are optional.  If the slot is not defined, the container tag for it will not be rendered in the template.
 
 - `pfe-band--header`: This slot renders at the top of the container and generally contains the title, headline, and or subheadline content.  Other possible candidates include a set of social sharing links or tags that describe the content below. The recommended tag for this slot is the `header` tag with h-level or p tags contained within it.
-- **Default slot**: This is the default slot and contains the bulk of the content in this element.  Paragraph text or a grid of cards or images might be rendered in this region.  Recommended tag for this slot is the `article` tag. Any content not assigned to a slot will be rendered here.
+- **Default slot**: This unnamed slot should contain the bulk of the content in this element.  The recommended wrapper within this slot is the `article` tag, but a div could also work to contain text elements like paragraphs. If you are rendering non-text components such as cards or images, no wrapper is necessary, and these items will make use of the grid layout.  Any content not assigned to a named slot will be rendered here.
 - `pfe-band--footer`: This slot is typically used for calls-to-action or footnotes and is pushed to the bottom of the container.  Recommended tags include `pfe-cta` or `footer`.
 - `pfe-band--aside`: This slot is for content that should be rendered to the right or left of the default slot on desktop.  Asides often contain `pfe-card` or interest forms which provide users a little more information or context for the band.
 
+### Example markup
+```
+<pfe-band>
+    <header slot="pfe-band--header">
+        <h2>Lighter band; no footer</h2>
+    </header>
+
+    <article>
+        <p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata dolor sit amet.</p>
+    </article>
+
+    <pfe-card slot="pfe-band--aside">
+        <h3 slot="header">Aside: left body bottom</h3>
+        <p>Ut wisi enim ad minim veniam.</p>
+    </pfe-card>
+
+    <footer slot="pfe-band--footer" class="custom-footnote">
+        <pfe-cta slot="footer" priority="tertiary">
+            <a href="#">Learn more</a>
+        </pfe-cta>
+    </footer>
+</pfe-band>
+```
+
+
 ## Attributes
 
 <style>

elements/pfe-band/demo/index.html

@@ -107,10 +107,12 @@ <h3 slot="header">Aside: right body bottom</h3>
         <h2>Lighter band; no footer</h2>
         <p class="custom-band-summary">Header region, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
       </header>
-      <p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-      <pfe-cta priority="tertiary">
-        <a href="#">Learn more</a>
-      </pfe-cta>
+      <article>
+        <p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+        <pfe-cta priority="tertiary">
+          <a href="#">Learn more</a>
+        </pfe-cta>
+      </article>
       <pfe-card color="complement" slot="pfe-band--aside">
         <h3 slot="header">Aside: left body bottom</h3>
         <p>Ut wisi enim ad minim veniam.</p>
@@ -239,27 +241,25 @@ <h3 slot="header">Aside: right body bottom</h3>
         <h2>Layout variables; no aside</h2>
         <p class="custom-band-summary">Header region, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
       </header>
-      <div class="pfe-l-grid pfe-m-gutters">
-
-      <pfe-card class="pfe-l-grid__item pfe-m-6-col pfe-m-3-col-on-md" color="dark">
+      <pfe-card color="dark">
         <p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
         <pfe-cta priority="tertiary" slot="footer">
           <a href="#">Learn more</a>
         </pfe-cta>
       </pfe-card>
-      <pfe-card class="pfe-l-grid__item pfe-m-6-col pfe-m-3-col-on-md" color="dark">
+      <pfe-card color="dark">
         <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
         <pfe-cta priority="tertiary" slot="footer">
           <a href="#">Learn more</a>
         </pfe-cta>
       </pfe-card>
-      <pfe-card class="pfe-l-grid__item pfe-m-6-col pfe-m-3-col-on-md" color="dark">
+      <pfe-card color="dark">
         <p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
         <pfe-cta priority="tertiary" slot="footer">
           <a href="#">Learn more</a>
         </pfe-cta>
       </pfe-card>
-      <pfe-card class="pfe-l-grid__item pfe-m-6-col pfe-m-3-col-on-md" color="dark">
+      <pfe-card color="dark">
         <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
         <pfe-cta priority="tertiary" slot="footer">
           <a href="#">Learn more</a>

elements/pfe-band/src/pfe-band.scss

@@ -99,11 +99,8 @@ $LOCAL: band;
   --pfe-band--Padding:   calc(#{pfe-local(Padding--vertical)} / 4)  #{pfe-local(Padding--horizontal)};
 }
 
-.pfe-band__body {
-    display: block;
-    margin-bottom: #{pfe-local(gutter--vertical)};
-}
 .pfe-band__header,
+.pfe-band__body,
 .pfe-band__aside,
 .pfe-band__footer {
     display: flex;
@@ -114,6 +111,7 @@ $LOCAL: band;
 
 @supports (display: grid) {
     .pfe-band__header,
+    .pfe-band__body,
     .pfe-band__aside,
     .pfe-band__footer {
         display: grid;
@@ -135,6 +133,7 @@ $LOCAL: band;
     }
     .pfe-band__body {
         grid-area: body;
+        grid-template-columns: var(--pfe-band__body--layout);
         margin-bottom: 0;
     }
 }