current state

gulpfile.js

@@ -27,13 +27,12 @@ uswds.paths.src.theme = './node_modules/@uswds/uswds/dist/theme';
 uswds.paths.src.fonts = './node_modules/@uswds/uswds/dist/fonts';
 uswds.paths.src.img = './node_modules/@uswds/uswds/dist/img';
 uswds.paths.src.js = './node_modules/@uswds/uswds/dist/js';
+uswds.paths.src.projectSass = "./sass";
 uswds.paths.dist.js = './assets/uswds/js';
-uswds.paths.dist.css = './assets/uswds/css';
 uswds.paths.dist.img = './assets/uswds/images';
 uswds.paths.dist.fonts = './assets/uswds/fonts';
-uswds.paths.dist.css = './assets/css';
-uswds.paths.dist.theme = './sass/uswds';
-
+uswds.paths.dist.css = './assets/uswds/css';
+uswds.paths.dist.theme = './sass';
 
 //Version
 uswds.settings.version = 3;

index.html

@@ -0,0 +1,17 @@
+<link href="./assets/css/_usa-banner.css" type="stylesheet">
+
+
+<div id="content"></div>
+
+<p>This is a test to pull in one HTML file and load it into a div on the index page.</p>
+<p>The issue is that I cannot get the sass file to generate a stylesheet (usa-banner).</p>
+
+<p>Note: The intention here is to minimize dependancy on pre-processors and compilers. I want to be able to generate the CSS files and use them wiothout the need to regenerate them again.</p>
+
+<script type="text/javascript">
+    function load_home() {
+        document.getElementById("content").innerHTML='<object type="text/html" data="pages/banner.html" ></object>';
+    }
+
+    load_home();
+</script>

banner.html → pages/banner.html

@@ -1,6 +1,4 @@
-{% comment %}
-This appears at the top of the page letting the user know it's an official government website
-{% endcomment %}
+<link href="../assets/uswds/css/_usa-banner.css" type="stylesheet">
 
 <div>
   <a class="usa-skipnav" href="#main-content">Skip to main content</a>
@@ -10,7 +8,7 @@
         <div class="usa-banner__inner">
           <!-- added custom styles to ensure header is centered -->
           <div class="grid-col-auto" style="display: inline-flex;">
-            {% image_with_class "./node_modules/@uswds/uswds/dist/img/us_flag_small.png" "usa-banner__header-flag" "U.S. flag" %}
+            <img src="./node_modules/@uswds/uswds/dist/img/us_flag_small.png" class="usa-banner__header-flag" alt="U.S. flag"/>
           </div>
           <div class="grid-col-fill tablet:grid-col-auto" style="display: inline-flex;">
             <p class="usa-banner__header-text">An official website of the United States government</p>
@@ -26,7 +24,7 @@
       <div class="usa-banner__content usa-accordion__content" id="gov-banner">
         <div class="grid-row grid-gap-lg">
           <div class="usa-banner__guidance tablet:grid-col-6">
-            {% comment %} {% image_with_class "./node_modules/@uswds/uswds/dist/img/icon-dot-gov.svg" "usa-banner__icon usa-media-block__img" "Dot gov" %} {% endcomment %}
+            <img src="./node_modules/@uswds/uswds/dist/img/icon-dot-gov.svg" class="usa-banner__icon usa-media-block__img" alt="Dot gov" />
             <div class="usa-media-block__body">
               <p>
                 <strong>The .gov means it’s official.</strong>
@@ -36,7 +34,7 @@
             </div>
           </div>
           <div class="usa-banner__guidance tablet:grid-col-6">
-            {% comment %} {% image_with_class "./node_modules/@uswds/uswds/dist/img/icon-https.svg" "usa-banner__icon usa-media-block__img" "Https" %} {% endcomment %}
+            <img src="./node_modules/@uswds/uswds/dist/img/icon-https.svg" class="usa-banner__icon usa-media-block__img" alt="Https" />
             <div class="usa-media-block__body">
               <p>
                  <strong>Secure .gov websites use HTTPS</strong>