npm - @tacc/core-styles - Versions diffs - 0.5.1 - Mend

@tacc/core-styles 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (166) hide show

package/.postcssrc.base.yml +48 -0
package/README.md +244 -0
package/bin/build.js +40 -0
package/bin/config.js +90 -0
package/bin/version.js +24 -0
package/cli.js +77 -0
package/dist/branding_logos.css +2 -0
package/dist/components/README.css +1 -0
package/dist/components/bootstrap.container.css +2 -0
package/dist/components/bootstrap.figure.css +2 -0
package/dist/components/bootstrap.pagination.css +2 -0
package/dist/components/c-button.css +2 -0
package/dist/components/c-callout.css +2 -0
package/dist/components/c-card.css +2 -0
package/dist/components/c-data-list.css +2 -0
package/dist/components/c-footer.css +2 -0
package/dist/components/c-image-map.css +2 -0
package/dist/components/c-image-map.skin.css +1 -0
package/dist/components/c-image-map.structure.css +2 -0
package/dist/components/c-nav.css +2 -0
package/dist/components/c-page.css +2 -0
package/dist/components/c-recognition.css +2 -0
package/dist/components/c-see-all-link.css +2 -0
package/dist/components/c-show-more.css +2 -0
package/dist/elements/README.css +1 -0
package/dist/elements/figure.css +2 -0
package/dist/elements/html-elements.css +2 -0
package/dist/elements/tacc-search-bar.css +2 -0
package/dist/generics/README.css +1 -0
package/dist/objects/README.css +1 -0
package/dist/objects/o-flex-item-table-wrap.css +2 -0
package/dist/objects/o-grid.css +2 -0
package/dist/objects/o-offset-content.css +2 -0
package/dist/objects/o-section.css +2 -0
package/dist/objects/o-site.css +2 -0
package/dist/settings/README.css +1 -0
package/dist/settings/border.css +2 -0
package/dist/settings/color.css +2 -0
package/dist/settings/font.css +2 -0
package/dist/settings/max-width.css +2 -0
package/dist/settings/space.css +2 -0
package/dist/tools/README.css +1 -0
package/dist/tools/media-queries.css +1 -0
package/dist/tools/x-article-link.css +2 -0
package/dist/tools/x-center.css +2 -0
package/dist/tools/x-fake-border.css +2 -0
package/dist/tools/x-grid.css +1 -0
package/dist/tools/x-layout.css +2 -0
package/dist/tools/x-overlay.css +1 -0
package/dist/tools/x-truncate.css +2 -0
package/dist/trumps/README.css +1 -0
package/dist/trumps/icon.css +2 -0
package/dist/trumps/icon.fonts.css +2 -0
package/dist/trumps/s-article-list.css +2 -0
package/dist/trumps/s-article-preview.css +2 -0
package/dist/trumps/s-blockquote.css +2 -0
package/dist/trumps/s-breadcrumbs.css +2 -0
package/dist/trumps/s-cms-nav.css +1 -0
package/dist/trumps/s-document.css +2 -0
package/dist/trumps/s-footer.css +2 -0
package/dist/trumps/s-guide-doc.css +2 -0
package/dist/trumps/s-header.css +2 -0
package/dist/trumps/s-inline-dl.css +2 -0
package/dist/trumps/s-portal-nav.css +2 -0
package/dist/trumps/s-style-guide.css +2 -0
package/dist/trumps/s-system-specs.css +2 -0
package/dist/trumps/tacc-search-bar.css +2 -0
package/dist/trumps/u-empty.css +1 -0
package/dist/trumps/u-hide.css +2 -0
package/dist/trumps/u-nested-text-content.css +2 -0
package/index.js +45 -0
package/package.json +49 -0
package/source/README.md +8 -0
package/source/_imports/README.md +47 -0
package/source/_imports/branding_logos.css +73 -0
package/source/_imports/components/README.css +26 -0
package/source/_imports/components/bootstrap.container.css +23 -0
package/source/_imports/components/bootstrap.figure.css +17 -0
package/source/_imports/components/bootstrap.pagination.css +29 -0
package/source/_imports/components/c-button.css +210 -0
package/source/_imports/components/c-button.html +31 -0
package/source/_imports/components/c-callout.css +183 -0
package/source/_imports/components/c-callout.html +52 -0
package/source/_imports/components/c-card.css +57 -0
package/source/_imports/components/c-card.html +32 -0
package/source/_imports/components/c-data-list.css +222 -0
package/source/_imports/components/c-data-list.html +145 -0
package/source/_imports/components/c-footer.css +67 -0
package/source/_imports/components/c-footer.html +3 -0
package/source/_imports/components/c-image-map.css +26 -0
package/source/_imports/components/c-image-map.html +4 -0
package/source/_imports/components/c-image-map.skin.css +1 -0
package/source/_imports/components/c-image-map.structure.css +285 -0
package/source/_imports/components/c-nav.css +164 -0
package/source/_imports/components/c-nav.html +45 -0
package/source/_imports/components/c-page.css +95 -0
package/source/_imports/components/c-page.html +192 -0
package/source/_imports/components/c-recognition.css +102 -0
package/source/_imports/components/c-see-all-link.css +52 -0
package/source/_imports/components/c-show-more.css +50 -0
package/source/_imports/elements/README.css +47 -0
package/source/_imports/elements/figure.css +23 -0
package/source/_imports/elements/html-elements.css +386 -0
package/source/_imports/elements/tacc-search-bar.css +19 -0
package/source/_imports/elements/tacc-search-bar.md +20 -0
package/source/_imports/generics/README.css +24 -0
package/source/_imports/generics/README.md +9 -0
package/source/_imports/objects/README.css +22 -0
package/source/_imports/objects/o-flex-item-table-wrap.css +50 -0
package/source/_imports/objects/o-grid.css +131 -0
package/source/_imports/objects/o-grid.html +64 -0
package/source/_imports/objects/o-offset-content.css +51 -0
package/source/_imports/objects/o-section.css +270 -0
package/source/_imports/objects/o-section.html +73 -0
package/source/_imports/objects/o-site.css +26 -0
package/source/_imports/objects/o-site.html +11 -0
package/source/_imports/settings/README.css +65 -0
package/source/_imports/settings/border.css +15 -0
package/source/_imports/settings/color.css +30 -0
package/source/_imports/settings/font.css +49 -0
package/source/_imports/settings/max-width.css +31 -0
package/source/_imports/settings/space.css +36 -0
package/source/_imports/tools/README.css +17 -0
package/source/_imports/tools/media-queries.css +48 -0
package/source/_imports/tools/x-article-link.css +62 -0
package/source/_imports/tools/x-center.css +60 -0
package/source/_imports/tools/x-fake-border.css +72 -0
package/source/_imports/tools/x-grid.css +116 -0
package/source/_imports/tools/x-layout.css +86 -0
package/source/_imports/tools/x-overlay.css +28 -0
package/source/_imports/tools/x-truncate.css +47 -0
package/source/_imports/trumps/README.css +79 -0
package/source/_imports/trumps/icon.css +31 -0
package/source/_imports/trumps/icon.fonts.css +316 -0
package/source/_imports/trumps/s-article-list.css +240 -0
package/source/_imports/trumps/s-article-list.html +20 -0
package/source/_imports/trumps/s-article-preview.css +253 -0
package/source/_imports/trumps/s-article-preview.html +30 -0
package/source/_imports/trumps/s-blockquote.css +45 -0
package/source/_imports/trumps/s-breadcrumbs.css +69 -0
package/source/_imports/trumps/s-cms-nav.css +11 -0
package/source/_imports/trumps/s-cms-nav.html +41 -0
package/source/_imports/trumps/s-document.css +142 -0
package/source/_imports/trumps/s-footer.css +16 -0
package/source/_imports/trumps/s-footer.html +3 -0
package/source/_imports/trumps/s-guide-doc.css +77 -0
package/source/_imports/trumps/s-header.css +181 -0
package/source/_imports/trumps/s-header.html +46 -0
package/source/_imports/trumps/s-inline-dl.css +35 -0
package/source/_imports/trumps/s-portal-nav.css +20 -0
package/source/_imports/trumps/s-portal-nav.html +37 -0
package/source/_imports/trumps/s-style-guide.css +52 -0
package/source/_imports/trumps/s-system-specs.css +123 -0
package/source/_imports/trumps/tacc-search-bar.css +108 -0
package/source/_imports/trumps/tacc-search-bar.html +11 -0
package/source/_imports/trumps/u-empty.css +18 -0
package/source/_imports/trumps/u-hide.css +27 -0
package/source/_imports/trumps/u-nested-text-content.css +14 -0
package/source/_tests/README.md +33 -0
package/source/_tests/postcss-extend.css +80 -0
package/source/_tests/postcss-preset-env.css +75 -0
package/source/_tests.css +12 -0
package/source/_themes/README.md +5 -0
package/source/_themes/TODO.md +4 -0
package/source/_themes/default.json +21 -0
package/source/_themes/has-dark-logo.json +21 -0

package/source/_imports/elements/html-elements.css ADDED Viewed

@@ -0,0 +1,386 @@
+/*
+Main Root & Sectioning Root
+Elements that represent the root of a document or document content.
+```
+<html> <body>
+```
+Reference:
+- [MDN: HTML element reference: Main root](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Main_root)
+- [MDN: HTML element reference: Sectioning root](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Sectioning_root)
+Styleguide Elements.MainSectioningRoots
+*/
+html {
+  /* Set base font but support user-defined browser font size */
+  /* SEE: https://snook.ca/archives/html_and_css/font-size-with-rem */
+  font-size: 62.5%; /* 16px */
+}
+/* The webpage must be at least as tall as the viewport */
+html,
+body {
+  height: 100%;
+}
+body {
+  /* To avoid negative whitespace at right on horz scroll on tiny screen */
+  min-width: 290px; /* developer-decided value */
+  /* To overwrite Bootstrap */
+  color: var(--global-color-primary--x-dark);
+  font-family: var(--global-font-family);
+  font-size: var(--global-font-size--medium);
+  line-height: 1.4;
+}
+/*
+Content Sectioning
+Elements that organize a document into logical pieces and create a broad outline for page content.
+```
+<main> <nav> <section> <header> <h1> <h2> <h3> <h4> <h5> <h6> <hgroup> <footer> <article> <aside> <address>
+```
+Reference:
+- [HTML element reference: Content sectioning | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Content_sectioning)
+Styleguide Elements.ContentSectioning
+*/
+main {
+  padding-bottom: var(--global-space--section-gap);
+}
+h1, h2, h3, h4, h5, h6 {
+  margin-top: revert; /* to overwrite Bootstrap `_reboot.css` */
+  font-weight: var(--bold);
+  color: var(--global-color-primary--xx-dark);
+}
+h1 {
+  font-size: var(--global-font-size--xxx-large);
+}
+h2 {
+  font-size: var(--global-font-size--xx-large);
+}
+h3, h4, h5, h6 {
+  margin-bottom: 15px; /* overwrite Bootstrap */
+}
+h3 {
+  font-size: var(--global-font-size--x-large);
+}
+h4 {
+  font-size: var(--global-font-size--large);
+}
+h4, h5 {
+  text-transform: uppercase;
+}
+h5, h6 {
+  font-size: var(--global-font-size--medium);
+}
+/*
+Text Content
+Elements that organize blocks or sections of content placed (includes lists).
+```
+<blockquote> <dd> <div> <dl> <dt> <figcaption> <figure> <hr> <li> <ol> <p> <pre> <ul>
+```
+Reference:
+- [HTML element reference: Text content | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content)
+Styleguide Elements.TextContent
+*/
+p {
+  margin-bottom: 2rem; /* overwrite Bootstrap */
+}
+/* Lists */
+ol, ul,
+dl dl /* Treat nested definition lists like other nested lists */ {
+  padding-left: var(--global-space--list-indent);
+}
+ol ol, ol ul, ul ol, ul ul {
+  margin: revert; /* Undo Bootstrap `_reboot.css` */
+}
+/* Add space between `dt` and `dd` */
+dt {
+  margin-bottom: .5rem; /* overwrite Bootstrap */
+  font-weight: initial; /* overwrite Bootstrap */
+}
+li {
+  line-height: 1.6;
+}
+/* Misc. */
+hr {
+  margin-block: var(--global-space--hr-margin);
+}
+/*
+Inline Text Semantics
+Elements that define the meaning, structure, or style of a word, line, or any arbitrary piece of text.
+```
+<a> <abbr> <b> <bdi> <bdo> <br> <cite> <code> <data> <dfn> <em> <i> <kbd> <mark> <q> <rb> <rp> <rt> <rtc> <ruby> <s> <samp> <small> <span> <strong> <sub> <sup> <time> <u> <var> <wbr>
+```
+Reference:
+- [HTML element reference: Inline text semantics | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics)
+Styleguide Elements.InlineTextSemantics
+*/
+/* Links */
+a,
+a:hover { color: var(--global-color-link-on-light--normal); /* overwrite Bootstrap */ }
+a:focus { text-decoration: underline dotted; }
+/* FAQ: Bootstrap already provides basic text-decoration */
+/*
+a { text-decoration: none; }
+a:hover { text-decoration: underline; }
+*/
+/* Monospace */
+var,
+/* Overwrite Bootstrap (which does not use its `--font-family-monospace`) */
+code, kbd, pre, samp {
+  font-family: var(--global-font-family--mono);
+}
+code kbd {
+  display: inline-block; /* ensure element does not bleed outside parent */
+  padding: .1rem .2rem; /* overwrites Bootstrap */
+  margin-left: .2rem;
+  margin-right: .2rem;
+  font-size: inherit;
+}
+/* Code (<code>, <samp>, <pre>) */
+/* Code: any content or context) */ code,
+/* Code: content has only output */ pre > samp {
+  /* Undo Bootstrap */
+  color: unset;
+}
+/* Code: context is inline */ :not(pre) > code {
+  display: inline-block;
+  padding: var(--global-space--xx-small) var(--global-space--x-small);
+}
+/* Code: context is block, content has input */ pre > code,
+/* Code: context is block, content has only ouput */ pre > samp {
+  display: inline-block; /* FAQ: If `block`, then background color is cropped */
+  padding: var(--global-space--x-small) var(--global-space--small);
+}
+/* Code: context is block, container probably has inline-style width set */
+/* FAQ: Stretch code to meet container width */
+pre[style] > code,
+pre[style] > samp {
+  min-width: 100%;
+}
+/* Code: context is inline, content has only output */
+/* FAQ: Examples: command output within CLI illustration */
+pre samp {
+  opacity: 0.75;
+  text-decoration: none;
+}
+/* Code: context is inline, content has context-agnostic output */
+/* FAQ: Examples: command prompt within CLI illustration */
+pre code u {
+  opacity: 0.50;
+  text-decoration: none;
+}
+/*
+Demarcating Edits
+Elements that provide indications that specific parts of the text have been altered.
+```
+<del> <ins>
+```
+Reference:
+- [HTML element reference: Demarcating edits | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Demarcating_edits)
+Styleguide Elements.DemarcatingEdits
+*/
+/* … */
+/*
+Image & Multimedia
+Elements that support various multimedia resources such as images, audio, and video.
+```
+<area> <audio> <img> <map> <track> <video>
+```
+Reference:
+- [HTML element reference: Image and multimedia | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Image_and_multimedia)
+Styleguide Elements.Media
+*/
+/* … */
+/*
+Embedded Content
+Elements that support various other media that has limited interaction.
+```
+<embed> <iframe> <object> <param> <picture> <source>
+```
+Reference:
+- [HTML element reference: Embedded content | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Embedded_content)
+Styleguide Elements.EmbeddedContent
+*/
+/* … */
+/*
+SVG & MathML
+Elements for Scalable Vector Graphics and Mathematical Markup Language.
+```
+<svg> <math>
+```
+Reference:
+- [HTML element reference: Demarcating edits | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Demarcating_edits)
+Styleguide Elements.DemarcatingEdits
+*/
+/* … */
+/*
+Table Content
+Elements that create and handle tabular data.
+```
+<table> <thead> <tbody> <th> <td> <tfoot> <colgroup> <col> <caption>
+```
+Reference:
+- [HTML element reference: Table content | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Table_content)
+Styleguide Elements.Tables
+*/
+table,
+td,
+th {
+  border: var(--global-border--normal);
+}
+/*
+Forms
+Elements that create forms which the user can fill out and submit to the Web site or application.
+```
+<form> <fieldset> <legend> <label> <input> <select> <optgroup> <option> <textarea> <button> <output> <progress> <meter> <datalist>
+```
+Reference:
+- [HTML element reference: Forms | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms)
+Styleguide Elements.Forms
+*/
+/* … */
+/*
+Interactive Elements
+Elements that help to create interactive user interface objects.
+```
+<details> <summary> <dialog> <menu>
+```
+Reference:
+- [HTML element reference: Interactive elements | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Interactive_elements)
+Styleguide Elements.Interactive
+*/
+/* Clone Bootstrap's <p> and <ul> margins */
+details {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}

package/source/_imports/elements/tacc-search-bar.css ADDED Viewed

@@ -0,0 +1,19 @@
+/* SEE: _imports/trumps/tacc-search-bar.css */
+/*
+Search Bar
+Unopinionated styles for TACC search bar.
+Markup: tacc-search-bar.html
+Styleguide Elements.TACC.SearchBar
+*/
+[part="form"] {
+  /* To fill available space of `:host` */
+  width: 100%;
+  height: 100%;
+}
+/* SEE: https://github.com/TACC/Core-Styles/blob/main/source/_imports/elements/tacc-search-bar.md */
+:host { visibility: visible; height: auto; }

package/source/_imports/elements/tacc-search-bar.md ADDED Viewed

@@ -0,0 +1,20 @@
+# TACC - Stylesheets - Search Bar
+The search bar (as implemented in TACC/Core-CMS) _currently_ has a caveat (that will be resolved via TACC/Core-CMS#101).
+Certain styles need to load **before** all search bar styles and markup:
+```css
+:host { visibility: hidden; height: 0; }
+```
+Certain styles need to load **after** all search bar styles and markup:
+```css
+:host { visibility: visible; height: auto; }
+```
+This avoids [FOUC] by hiding the search bar _until_ all styles and markup are loaded.
+[TACC/Core-CMS#101]: https://github.com/TACC/Core-CMS/issues/101
+[FOUC]: https://en.wikipedia.org/wiki/Flash_of_unstyled_content

package/source/_imports/generics/README.css ADDED Viewed

@@ -0,0 +1,24 @@
+/* DO NOT ADD STYLES HERE; ADD THEM INSIDE STYLESHEETS IN THIS DIRECTORY */
+/*
+Generics
+Generic styles are very high-level, far-reaching styles. They are seldom modified.
+Examples are reset, normalize, box-sizing styles, and browser fixes.
+Reference:
+- [Creative Bloq: Manage Large CSS Projects With ITCSS](https://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528) (find "Generic")
+Rules:
+- Classes and IDs must not be styled.
+- Opinionated high-level styles may be here.
+- Element tags may be styled.
+- Pseudo classes may be styled.
+- Pseudo elements may be styled.
+Weight: 3
+Styleguide Generics
+*/

package/source/_imports/generics/README.md ADDED Viewed

@@ -0,0 +1,9 @@
+# TACC - Stylesheets - Generics
+Bootstrap provides our generics styles.[^1] Bootstrap is loaded from a CDN.
+This directory is here to show and document all [ITCSS] directories.
+[^1]: Bootstrap also provides its own objects, components, elements, and trumps.
+[ITCSS]: https://confluence.tacc.utexas.edu/x/IAA9Cw

package/source/_imports/objects/README.css ADDED Viewed

@@ -0,0 +1,22 @@
+/* DO NOT ADD STYLES HERE; ADD THEM INSIDE STYLESHEETS IN THIS DIRECTORY */
+/*
+Object
+Object are repetitive, shared, and purely-structural parts of an interface. They are seldom modified. Changing these styles may unintentionally break many layouts.
+Reference:
+- [BEM with Namespaces: Object Namespaces](https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/#object-namespaces-o-)
+Guidelines:
+- Objects are abstract.
+- They are often used for high-level layout management.
+- Avoid modifying their styles.
+- Be careful around anything with a leading `o-`.
+Weight: 5
+Styleguide Objects
+*/

package/source/_imports/objects/o-flex-item-table-wrap.css ADDED Viewed

@@ -0,0 +1,50 @@
+/*
+Flex-Item Table-Wrap
+A wrapper to allow a table to behave like a flex item (because a `<table>` can __not__ be a flex item).
+Reference:
+- [Why does flex-box work with a div, but not a table?](https://stackoverflow.com/q/41421512/11817077))
+Markup:
+<section style="display: flex; flex-direction: column">
+  <header>Section Title</header>
+  <p>Section/Table Description</p>
+  <div class="o-flex-item-table-wrap">
+    <table>
+        <thead>
+          <tr>
+            <th>A</th>
+            <th>B</th>
+            <th>C</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>A</td>
+            <td>B</td>
+            <td>C</td>
+          </tr>
+        </thead>
+    </table>
+  </div>
+</section>
+Styleguide Objects.FlexItemTableWrap
+*/
+/* Constrain stretched <table>'s position and dimension */
+.o-flex-item-table-wrap {
+  /* Ensure wrapper has dimensions (which will be remaining space in parent) */
+  flex-grow: 1;
+  /* Set position and maximum dimensions for child <table> */
+  position: relative;
+}
+/* Strech <table> to fill available space of flex item (the wrapper) */
+.o-flex-item-table-wrap > table {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}

package/source/_imports/objects/o-grid.css ADDED Viewed

@@ -0,0 +1,131 @@
+/*
+Grid
+A grid of items e.g. images, avatars, article previews.
+Caveats:
+- Do not combine two `o-grid--col-…`.
+.o-grid--image-fill     - Image fills its cell or container which fills cell (supports: `<img>`, `<img>` in `<figure>` (no class), `<img>` in `<a>`)
+.o-grid--center-align   - Align content vertically and horizontally center
+.o-grid--col-auto-count - Same width columns; wider window equals more columns
+.o-grid--col-min-width  - Same width columns; auto. column count; minimum width (custom properties: `--width`)
+Markup: o-grid.html
+Styleguide Objects.Grid
+*/
+@import url("_imports/tools/media-queries.css");
+@import url("_imports/tools/x-grid.css");
+/* Block */
+.o-grid {
+  --gap: var(--global-space--grid-gap, 15px); /* Bootstrap grid spacing */
+  display: grid;
+  gap: var(--gap);
+  /* To always have equal height rows that match tallest content */
+  @extend %x-grid--layout-rows-equal-max-height;
+}
+/* Elements */
+/* Avoid leting image size exceed cell size */
+/* FAQ: An intentionally loose limitation (so user can choose to ignore it) */
+.o-grid img {
+  max-height: 100%;
+  max-width: 100%;
+}
+/* Hide content that does exceed cell size */
+.o-grid > * {
+  overflow: hidden;
+}
+/* Modifiers */
+/* Layout: Columns */
+/* Layout: Columns: Same Width, Preset Col. Count */
+.o-grid--col-auto-count {
+  @extend %x-grid--layout-cols-equal-set-count;
+}
+@media (--x-narrow-and-below) { .o-grid--col-auto-count { --count: 1; } }
+@media (--x-narrow-to-narrow) { .o-grid--col-auto-count { --count: 2; } }
+@media (--narrow-to-medium) { .o-grid--col-auto-count { --count: 3; } }
+@media (--medium-to-wide) { .o-grid--col-auto-count { --count: 4; } }
+@media (--wide-to-x-wide) { .o-grid--col-auto-count { --count: 5; } }
+@media (--x-wide-to-xx-wide) { .o-grid--col-auto-count { --count: 6; } }
+@media (--xx-wide-to-xxx-wide) { .o-grid--col-auto-count { --count: 7; } }
+@media (--xxx-wide-to-max-wide) { .o-grid--col-auto-count { --count: 8; } }
+@media (--max-wide-and-above) { .o-grid--col-auto-count { --count: 9; } }
+/* Layout: Columns: Same Width, Preset Min. Width */
+.o-grid--col-min-width {
+  --width: 250px;
+  @extend %x-grid--layout-cols-equal-min-width;
+}
+/* Prevent content overflow */
+/* FAQ: Excluding `img` because `.o-grid img` already sets this for images */
+.o-grid--col-min-width > *:not(img) {
+  max-width: 100%; /* used if cell width is smaller than content */
+  max-height: 100%; /* used if cell height is smaller than content */
+}
+/* Layout: Content */
+/* Layout: Content: Align Vert/Horz Center */
+.o-grid--center-align {
+  @extend %x-grid--content-align-center;
+}
+/* Layout: Content: Image Fills Cell/Container */
+.o-grid--image-fill > :is(a, figure):not(img) {
+  width: 100%;
+  height: 100%;
+}
+.o-grid--image-fill > img,
+.o-grid--image-fill > figure > img,
+.o-grid--image-fill > a > img:only-child {
+  object-fit: cover;
+  height: 100%;
+  width: 100%;
+}
+/* Manage layout of figures without classes */
+/* FAQ: Plugins in CMS Edit mode have this first if no other classes */
+.o-grid--image-fill > figure:not([class]),
+.o-grid--image-fill > figure[class=""],
+.o-grid--image-fill > figure[class*="cms-plugin"] {
+  display: flex;
+  flex-direction: column;
+}
+.o-grid--image-fill > figure:not([class]) > img,
+.o-grid--image-fill > figure[class=""] > img,
+.o-grid--image-fill > figure[class*="cms-plugin"] > img {
+  flex-grow: 1;
+  min-height: 0; /* to allow flex item to shrink less than actual size */
+}