@tacc/core-styles 0.6.0-alpha → 0.6.0-beta

package/src/lib/_imports/objects/o-section.html

@@ -1,7 +1,14 @@
 {# The {{ html }} allows DjangoCMS Snippet to pass in class names #}
 <section class="o-section {{modifier_class}} {{ html }}">
   <p><strong>Section</strong></p>
-  <p>I am a Section. <small>Use light Sections to wrap most content. Use muted Sections to gently highlight some content. Use dark Sections to strongly highlight some content.</small></p>
+  <p>
+    I am a Section.
+    <small
+      >Use light Sections to wrap most content. Use muted Sections to gently
+      highlight some content. Use dark Sections to strongly highlight some
+      content.</small
+    >
+  </p>
 </section>
 
 <br />
@@ -9,11 +16,23 @@
 {# The {{ html }} allows DjangoCMS Snippet to pass in class names #}
 <section class="o-section {{modifier_class}} {{ html }}">
   <p><strong>Section (First of a Pair)</strong></p>
-  <p>A Section of the same style directly after me will create a border between both. <small>Muted sections should <strong>not</strong> appear consectuively.</small></p>
+  <p>
+    A Section of the same style directly after me will create a border between
+    both.
+    <small
+      >Muted sections should <strong>not</strong> appear consectuively.</small
+    >
+  </p>
 </section>
 <section class="o-section {{modifier_class}} {{ html }}">
   <p><strong>Section (Second of a Pair)</strong></p>
-  <p>A Section of the same style directly after me will create a border between both. <small>Muted sections should <strong>not</strong> appear consectuively.</small></p>
+  <p>
+    A Section of the same style directly after me will create a border between
+    both.
+    <small
+      >Muted sections should <strong>not</strong> appear consectuively.</small
+    >
+  </p>
 </section>
 
 <br />
@@ -21,11 +40,21 @@
 {# The {{ html }} allows DjangoCMS Snippet to pass in class names #}
 <section class="container  o-section {{modifier_class}} {{ html }}">
   <p><strong>Container Section (First of a Pair)</strong></p>
-  <p>A <code>.container</code> Section has Container padding and a fake border.<small>Muted sections should <strong>not</strong> appear consectuively.</small></p>
+  <p>
+    A <code>.container</code> Section has Container padding and a fake
+    border.<small
+      >Muted sections should <strong>not</strong> appear consectuively.</small
+    >
+  </p>
 </section>
 <section class="container  o-section {{modifier_class}} {{ html }}">
   <p><strong>Container Section (First of a Pair)</strong></p>
-  <p>A <code>.container</code> Section has Container padding and a fake border.<small>Muted sections should <strong>not</strong> appear consectuively.</small></p>
+  <p>
+    A <code>.container</code> Section has Container padding and a fake
+    border.<small
+      >Muted sections should <strong>not</strong> appear consectuively.</small
+    >
+  </p>
 </section>
 
 <br />
@@ -33,15 +62,34 @@
 {# The {{ html }} allows DjangoCMS Snippet to pass in class names #}
 <section class="o-section {{modifier_class}} {{ html }}">
   <p><strong>Section (before Muted Section)</strong></p>
-  <p>A pair of <strong>light</strong> or <strong>dark</strong> Sections may have a <strong>muted</strong> Section between them. <small>Muted sections should <strong>not</strong> appear consectuively.</small></p>
+  <p>
+    A pair of <strong>light</strong> or <strong>dark</strong> Sections may have
+    a <strong>muted</strong> Section between them.
+    <small
+      >Muted sections should <strong>not</strong> appear consectuively.</small
+    >
+  </p>
 </section>
 <section class="o-section o-section--style-muted">
   <p><strong>(Muted) Section</strong></p>
-  <p>A <strong>muted</strong> Section would appear between two <strong>light</strong> or <strong>dark</strong> Sections. <small>It would probably not appear between two <strong>muted</strong> Sections.</small></p>
+  <p>
+    A <strong>muted</strong> Section would appear between two
+    <strong>light</strong> or <strong>dark</strong> Sections.
+    <small
+      >It would probably not appear between two
+      <strong>muted</strong> Sections.</small
+    >
+  </p>
 </section>
 <section class="o-section {{modifier_class}} {{ html }}">
   <p><strong>Section (before Muted Section)</strong></p>
-  <p>A pair of <strong>light</strong> or <strong>dark</strong> Sections may have a <strong>muted</strong> Section between them. <small>Muted sections should <strong>not</strong> appear consectuively.</small></p>
+  <p>
+    A pair of <strong>light</strong> or <strong>dark</strong> Sections may have
+    a <strong>muted</strong> Section between them.
+    <small
+      >Muted sections should <strong>not</strong> appear consectuively.</small
+    >
+  </p>
 </section>
 
 <br />
@@ -49,14 +97,23 @@
 {# The {{ html }} allows DjangoCMS Snippet to pass in class names #}
 <section class="o-section {{modifier_class}} {{ html }}">
   <p><strong>Section (with Nested Sections)</strong></p>
-  <p>Sections can be nested within me. <small>A nested Section removes the standard Section spacing.</small> <small>⚠️ It is not used in any design, so its implementation is incomplete (no borders).</small></p>
+  <p>
+    Sections can be nested within me.
+    <small>A nested Section removes the standard Section spacing.</small>
+    <small
+      >⚠️ It is not used in any design, so its implementation is incomplete (no
+      borders).</small
+    >
+  </p>
   <div class="o-section o-section--style-dark">
     <p><strong>(Nested) Dark Section</strong></p>
     <p>I am nested.</p>
   </div>
   <div class="o-section o-section--style-muted">
     <p><strong>(Nested) Muted Section</strong></p>
-    <p>I am nested.<!-- <small>No use case for this is expected, but it is available.<small>--></p>
+    <p>
+      I am nested.<!-- <small>No use case for this is expected, but it is available.<small>-->
+    </p>
   </div>
   <div class="o-section o-section--style-light">
     <p><strong>(Nested) Light Section</strong></p>
@@ -69,5 +126,9 @@
 {# The {{ html }} allows DjangoCMS Snippet to pass in class names #}
 <section class="o-section {{modifier_class}} {{ html }}">
   <p><strong>Section (at Bottom of Page)</strong></p>
-  <p>At the bottom of a page: a light Section will stand out above the Footer, a muted Section will stand out above the Footer, a dark Section will visually merge with the Footer.</p>
+  <p>
+    At the bottom of a page: a light Section will stand out above the Footer, a
+    muted Section will stand out above the Footer, a dark Section will visually
+    merge with the Footer.
+  </p>
 </section>

package/src/lib/_imports/objects/o-site.html

@@ -1,11 +1,5 @@
 <body class="o-site">
-  <header class="o-site__head">
-    Header
-  </header>
-  <main class="o-site__body">
-    Content
-  </main>
-  <footer class="o-site__foot">
-    Footer
-  </footer>
-</body>
+  <header class="o-site__head">Header</header>
+  <main class="o-site__body">Content</main>
+  <footer class="o-site__foot">Footer</footer>
+</body>

package/src/lib/_imports/trumps/s-article-list.html

@@ -1,10 +1,6 @@
 <article class="s-article-list">
-  <h2>
-    News &amp; Stuff
-  </h2>
-  <article>
-    Article Placeholder
-  </article>
+  <h2>News &amp; Stuff</h2>
+  <article>Article Placeholder</article>
 </article>
 
 <!-- TODO: Use a component (requires a plugin) -->

package/src/lib/_imports/trumps/s-article-preview.html

@@ -1,10 +1,9 @@
 <article class="s-article-preview">
   <p><img src="…" alt="…" /></p>
-  <h3>
-    A Long or Short Title of Article
-  </h3>
+  <h3>A Long or Short Title of Article</h3>
   <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua.
   </p>
   <ul>
     <li>July 7</li>

package/src/lib/_imports/trumps/s-cms-nav.html

@@ -6,7 +6,7 @@ from https://frontera-portal.tacc.utexas.edu/. It has:
 - Bootstrap class names
 - extra markup (`a > span`)
 -->
-<ul class="s-cms-nav  navbar-nav">
+<ul class="s-cms-nav navbar-nav">
   <li class="nav-item active">
     <a class="nav-link" href="/"><span>Frontera</span></a>
   </li>

package/src/lib/_imports/trumps/s-footer.html

@@ -1,3 +1 @@
-<footer class="s-footer">
-  ©2020 Texas Advanced Computing Center
-</footer>
+<footer class="s-footer">©2020 Texas Advanced Computing Center</footer>

package/src/lib/_imports/trumps/s-header.html

@@ -16,8 +16,7 @@ from https://frontera-portal.tacc.utexas.edu/. It has:
 - illegally-nested markup (`ul > div > li`)
   (only via `./s-portal-nav.html`)
 -->
-<nav id="s-header" class="s-header  navbar navbar-expand-lg navbar-dark">
-
+<nav id="s-header" class="s-header navbar navbar-expand-lg navbar-dark">
   <a class="navbar-brand" href="/">
     <img
       src="/static/site_cms/img/org_logos/portal.png"
@@ -39,8 +38,6 @@ from https://frontera-portal.tacc.utexas.edu/. It has:
   </button>
 
   <div class="collapse navbar-collapse" id="navbarsExpandTarget">
-    {% include "./s-cms-nav.html" %}
-
-    {% include "./s-portal-nav.html" %}
+    {% include "./s-cms-nav.html" %} {% include "./s-portal-nav.html" %}
   </div>
 </nav>

package/src/lib/_imports/trumps/s-portal-nav.html

@@ -6,10 +6,11 @@ from https://frontera-portal.tacc.utexas.edu/. It has:
 - Bootstrap class names
 - Bootstrap attributes
 -->
-<ul class="s-portal-nav  navbar-nav">
+<ul class="s-portal-nav navbar-nav">
   <!-- When user is not logged in, there are zero dropdown(-*) classes -->
-  <li class="nav-item  dropdown">
-    <a class="nav-link  dropdown-toggle"
+  <li class="nav-item dropdown">
+    <a
+      class="nav-link dropdown-toggle"
       href="#"
       data-toggle="dropdown"
       aria-haspopup="true"

package/src/lib/_tests/README.md

@@ -13,7 +13,7 @@ _This allows developers to confirm whether CSS plugins are working._
 
 ## Example
 
-__Input:__
+**Input:**
 
 ```css
 /*! Custom Media Narrow: */
@@ -26,8 +26,13 @@ __Input:__
 }
 ```
 
-__Output__:
+**Output**:
 
 ```css
-/*! Custom Media Narrow: */@media (max-width:30em){._test{background-color:red}}
+/*! Custom Media Narrow: */
+@media (max-width: 30em) {
+  ._test {
+    background-color: red;
+  }
+}
 ```

package/src/main.js

@@ -8,8 +8,6 @@ const build = require('./bin/build.js');
 const config = require('./bin/config.js');
 const version = require('./bin/version.js');
 
-
-
 /**
  * Build stylesheets from source CSS
  * @param {string} input - Parse CSS files from which directory
@@ -23,23 +21,24 @@ const version = require('./bin/version.js');
  * @param {boolean} [opts.verbose=false] - Print more in log output
  */
 function buildStylesheets(input, output, opts = {}) {
-    const buildOpts = {
-        verbose: opts.verbose || null,
-        baseMirrorDir: opts.baseMirrorDir || null,
-    };
-
-    const inputResolved = resolve(input);
-    const outputResolved = resolve(output);
-    const customConfigs = (opts.customConfigs) ?
-        opts.customConfigs.map(filePath =>
-            (filePath) ? resolve(filePath) : null
-        ) : undefined;
-
-    config(customConfigs, version(opts.buildId));
-    build(inputResolved, outputResolved, buildOpts);
+  const buildOpts = {
+    verbose: opts.verbose || null,
+    baseMirrorDir: opts.baseMirrorDir || null,
+  };
+
+  const inputResolved = resolve(input);
+  const outputResolved = resolve(output);
+  const customConfigs = opts.customConfigs
+    ? opts.customConfigs.map((filePath) =>
+        filePath ? resolve(filePath) : null
+      )
+    : undefined;
+
+  config(customConfigs, version(opts.buildId));
+  build(inputResolved, outputResolved, buildOpts);
 }
 
-
-
-// Export
+/*
+  Export
+*/
 module.exports = { buildStylesheets };