Deploying to gh-pages from @ f36caef 🚀

texastribune · Jan 5, 2024 · 11d90e4 · 11d90e4
1 parent ad2ad8b
commit 11d90e4
Show file tree

Hide file tree

Showing 114 changed files with 10,942 additions and 1 deletion.
diff --git a/about/index.html b/about/index.html
@@ -342,6 +342,11 @@
 
 
 
+      <option value="Align items (l-ai-&lt;position&gt;)" data-link="/queso-ui/sections/layout/l-ai-position/" />
+
+
+
+
       <option value="Align (l-align-&lt;position&gt;)" data-link="/queso-ui/sections/layout/l-align-position/" />
 
 
@@ -352,6 +357,16 @@
 
 
 
+      <option value="Flex  (l-flex)" data-link="/queso-ui/sections/layout/l-flex/" />
+
+
+
+
+      <option value="Justify content (l-jc-&lt;position&gt;)" data-link="/queso-ui/sections/layout/l-jc-position/" />
+
+
+
+
       <option value="Multi column  (l-multicol)" data-link="/queso-ui/sections/layout/l-multicol/" />
 
 
@@ -994,6 +1009,12 @@
         <li>
 
 
+  <a href="/queso-ui/sections/layout/l-ai-position/" >Align items</a>
+</li>
+
+        <li>
+
+
   <a href="/queso-ui/sections/layout/l-col-grid/" >Column grid</a>
 </li>
 
@@ -1018,12 +1039,24 @@
         <li>
 
 
+  <a href="/queso-ui/sections/layout/l-flex/" >Flex</a>
+</li>
+
+        <li>
+
+
   <a href="/queso-ui/sections/layout/l-height-size/" >Height</a>
 </li>
 
         <li>
 
 
+  <a href="/queso-ui/sections/layout/l-jc-position/" >Justify content</a>
+</li>
+
+        <li>
+
+
   <a href="/queso-ui/sections/layout/l-multicol/" >Multi column</a>
 </li>
 
@@ -1550,6 +1583,12 @@
         <li>
 
 
+  <a href="/queso-ui/sections/layout/l-ai-position/" >Align items</a>
+</li>
+
+        <li>
+
+
   <a href="/queso-ui/sections/layout/l-col-grid/" >Column grid</a>
 </li>
 
@@ -1574,12 +1613,24 @@
         <li>
 
 
+  <a href="/queso-ui/sections/layout/l-flex/" >Flex</a>
+</li>
+
+        <li>
+
+
   <a href="/queso-ui/sections/layout/l-height-size/" >Height</a>
 </li>
 
         <li>
 
 
+  <a href="/queso-ui/sections/layout/l-jc-position/" >Justify content</a>
+</li>
+
+        <li>
+
+
   <a href="/queso-ui/sections/layout/l-multicol/" >Multi column</a>
 </li>
 

diff --git a/colors/index.html b/colors/index.html
@@ -342,6 +342,11 @@
 
 
 
+      <option value="Align items (l-ai-&lt;position&gt;)" data-link="/queso-ui/sections/layout/l-ai-position/" />
+
+
+
+
       <option value="Align (l-align-&lt;position&gt;)" data-link="/queso-ui/sections/layout/l-align-position/" />
 
 
@@ -352,6 +357,16 @@
 
 
 
+      <option value="Flex  (l-flex)" data-link="/queso-ui/sections/layout/l-flex/" />
+
+
+
+
+      <option value="Justify content (l-jc-&lt;position&gt;)" data-link="/queso-ui/sections/layout/l-jc-position/" />
+
+
+
+
       <option value="Multi column  (l-multicol)" data-link="/queso-ui/sections/layout/l-multicol/" />
 
 
@@ -994,6 +1009,12 @@
         <li>
 
 
+  <a href="/queso-ui/sections/layout/l-ai-position/" >Align items</a>
+</li>
+
+        <li>
+
+
   <a href="/queso-ui/sections/layout/l-col-grid/" >Column grid</a>
 </li>
 
@@ -1018,12 +1039,24 @@
         <li>
 
 
+  <a href="/queso-ui/sections/layout/l-flex/" >Flex</a>
+</li>
+
+        <li>
+
+
   <a href="/queso-ui/sections/layout/l-height-size/" >Height</a>
 </li>
 
         <li>
 
 
+  <a href="/queso-ui/sections/layout/l-jc-position/" >Justify content</a>
+</li>
+
+        <li>
+
+
   <a href="/queso-ui/sections/layout/l-multicol/" >Multi column</a>
 </li>
 
@@ -1550,6 +1583,12 @@
         <li>
 
 
+  <a href="/queso-ui/sections/layout/l-ai-position/" >Align items</a>
+</li>
+
+        <li>
+
+
   <a href="/queso-ui/sections/layout/l-col-grid/" >Column grid</a>
 </li>
 
@@ -1574,12 +1613,24 @@
         <li>
 
 
+  <a href="/queso-ui/sections/layout/l-flex/" >Flex</a>
+</li>
+
+        <li>
+
+
   <a href="/queso-ui/sections/layout/l-height-size/" >Height</a>
 </li>
 
         <li>
 
 
+  <a href="/queso-ui/sections/layout/l-jc-position/" >Justify content</a>
+</li>
+
+        <li>
+
+
   <a href="/queso-ui/sections/layout/l-multicol/" >Multi column</a>
 </li>
 

diff --git a/css/all.css b/css/all.css
diff --git a/data/cssClasses.json b/data/cssClasses.json
@@ -1301,6 +1301,29 @@
       "preview": "<div class=\"l-content-grid \">\n  <div class=\"l-content-grid__content has-bg-white-off\">\n    <h3 class=\"has-padding\">Content</h3>\n  </div>\n  <div class=\"l-content-grid__side has-bg-gray-light\">\n    <h3 class=\"has-padding\">Sidebar</h3>\n  </div>\n</div>\n",
       "section": "Layout"
     },
+    {
+      "name": "Align items (l-ai-<position>)",
+      "description": "<p>Alignment utilities for flex/grid elements. </p>\n",
+      "location": "https://github.com/texastribune/queso-ui/blob/main/assets/scss/7-layout/_align-items.scss#L1",
+      "label": "Align items",
+      "type": "cssClass",
+      "id": 7,
+      "depth": 2,
+      "className": "l-ai-<position>",
+      "details": {
+        "isHelper": true,
+        "isRecipe": false,
+        "isTool": false,
+        "keywords": []
+      },
+      "template": "Parent: <code>display: flex</code> + <code>.{{className}}</code>  <div style=\"border: 2px solid black; height: 100px; display:flex\" class=\"{{ className }}\"><div class=\"has-bg-yellow has-padding\">Child</div></div>",
+      "modifiers": [],
+      "modifierList": [
+        "l-ai-center"
+      ],
+      "preview": "",
+      "section": "Layout"
+    },
     {
       "name": "Align (l-align-<position>)",
       "description": "<p>Mostly used for centering and some assume a flex parent. </p>\n",
@@ -1353,6 +1376,55 @@
       "preview": "",
       "section": "Layout"
     },
+    {
+      "name": "Flex  (l-flex)",
+      "description": "<p>Barebones flex helpers. This breaks some convention with other layout classes, but we use flexbox enough to justify it. <br><br>💡 See <a href=\"/sections/layout/l-ai-position/\">align-items</a> and <a href=\"/sections/layout/l-jc-position/\">justify-content</a> helpers for alignment helpers. </p>\n",
+      "location": "https://github.com/texastribune/queso-ui/blob/main/assets/scss/7-layout/_flex.scss#L1",
+      "label": "Flex",
+      "type": "cssClass",
+      "id": 7,
+      "depth": 2,
+      "className": "l-flex",
+      "details": {
+        "isHelper": true,
+        "isRecipe": false,
+        "isTool": false,
+        "keywords": []
+      },
+      "template": "{% if className == 'l-flex' %}\n    <div class=\"has-padding {{className}}\">\n        <div class=\"has-bg-black has-text-white\" style=\"width: 150px; height: 150px;\">1</div>\n        <div class=\"has-bg-yellow\" style=\"width: 150px; height: 150px;\">2</div>\n    </div>    \n{% else %}\n<div class=\"has-padding has-section-padding has-border l-flex {{className}}\">\n    <div class=\"has-bg-black has-text-white\" style=\"width: 150px; height: 150px;\">1</div>\n    <div class=\"has-bg-yellow\" style=\"width: 150px; height: 150px;\">2</div>\n  </div>\n{% endif %}",
+      "modifiers": [],
+      "modifierList": [
+        "l-flex",
+        "l-flex-row",
+        "l-flex-column"
+      ],
+      "preview": "",
+      "section": "Layout"
+    },
+    {
+      "name": "Justify content (l-jc-<position>)",
+      "description": "<p>Alignment utilities for flex/grid elements. </p>\n",
+      "location": "https://github.com/texastribune/queso-ui/blob/main/assets/scss/7-layout/_justify-content.scss#L1",
+      "label": "Justify content",
+      "type": "cssClass",
+      "id": 7,
+      "depth": 2,
+      "className": "l-jc-<position>",
+      "details": {
+        "isHelper": true,
+        "isRecipe": false,
+        "isTool": false,
+        "keywords": []
+      },
+      "template": "Parent: <code>display: flex</code> + <code>.{{className}}</code>  <div style=\"border: 2px solid black; height: 100px; display:flex\" class=\"{{ className }}\"><div class=\"has-bg-yellow has-padding\">Child</div><div class=\"has-bg-black has-text-white has-padding\">Child</div></div>",
+      "modifiers": [],
+      "modifierList": [
+        "l-jc-center",
+        "l-jc-space"
+      ],
+      "preview": "",
+      "section": "Layout"
+    },
     {
       "name": "Multi column  (l-multicol)",
       "description": "<p>Add 2 columns on larger viewports. In the future, this could be extended to support other column counts.</p>\n",

diff --git a/data/fullList.json b/data/fullList.json
@@ -133,6 +133,7 @@
     "l-container--xl",
     "l-container--xxl",
     "l-content-grid--swapped-until-bp-l",
+    "l-ai-center",
     "l-align-center-x",
     "l-align-center-y",
     "l-align-center-self",
@@ -141,6 +142,11 @@
     "l-display-ib",
     "l-display-block",
     "l-clearfix",
+    "l-flex",
+    "l-flex-row",
+    "l-flex-column",
+    "l-jc-center",
+    "l-jc-space",
     "l-height-full",
     "l-pos-rel",
     "l-pos-abs",

diff --git a/data/modifierMap.json b/data/modifierMap.json
@@ -688,6 +688,14 @@
       "template": "<div class=\"l-content-grid {{ className }}\">\n  <div class=\"l-content-grid__content has-bg-white-off\">\n    <h3 class=\"has-padding\">Content</h3>\n  </div>\n  <div class=\"l-content-grid__side has-bg-gray-light\">\n    <h3 class=\"has-padding\">Sidebar</h3>\n  </div>\n</div>\n",
       "preview": "<div class=\"l-content-grid l-content-grid--swapped-until-bp-l\">\n  <div class=\"l-content-grid__content has-bg-white-off\">\n    <h3 class=\"has-padding\">Content</h3>\n  </div>\n  <div class=\"l-content-grid__side has-bg-gray-light\">\n    <h3 class=\"has-padding\">Sidebar</h3>\n  </div>\n</div>\n"
     },
+    {
+      "name": "l-ai-center",
+      "className": "l-ai-center",
+      "description": "<strong>align-items: center</strong> Center items vertically (if row).",
+      "type": "modifier",
+      "template": "Parent: <code>display: flex</code> + <code>.{{className}}</code>  <div style=\"border: 2px solid black; height: 100px; display:flex\" class=\"{{ className }}\"><div class=\"has-bg-yellow has-padding\">Child</div></div>",
+      "preview": "Parent: <code>display: flex</code> + <code>.l-ai-center</code>  <div style=\"border: 2px solid black; height: 100px; display:flex\" class=\"l-ai-center\"><div class=\"has-bg-yellow has-padding\">Child</div></div>"
+    },
     {
       "name": "l-align-center-x",
       "className": "l-align-center-x",
@@ -752,6 +760,46 @@
       "template": "<div style=\"border:2px solid black;\">\n  {% if className == 'l-clearfix' %}\n    <div class=\"has-padding has-bg-yellow {{className}}\"><span class=\"has-padding has-bg-black-off has-text-white\" style=\"float:left; \">Floated div</span></div>\n  {% else %}\n    <div class=\"has-padding has-bg-yellow {{className}}\">Example</div>\n  {% endif %}\n</div>",
       "preview": "<div style=\"border:2px solid black;\">\n  \n    <div class=\"has-padding has-bg-yellow l-clearfix\"><span class=\"has-padding has-bg-black-off has-text-white\" style=\"float:left; \">Floated div</span></div>\n  \n</div>"
     },
+    {
+      "name": ".l-flex",
+      "className": "l-flex",
+      "description": "<strong>display:flex</strong> Uses flexbox.",
+      "type": "modifier",
+      "template": "{% if className == 'l-flex' %}\n    <div class=\"has-padding {{className}}\">\n        <div class=\"has-bg-black has-text-white\" style=\"width: 150px; height: 150px;\">1</div>\n        <div class=\"has-bg-yellow\" style=\"width: 150px; height: 150px;\">2</div>\n    </div>    \n{% else %}\n<div class=\"has-padding has-section-padding has-border l-flex {{className}}\">\n    <div class=\"has-bg-black has-text-white\" style=\"width: 150px; height: 150px;\">1</div>\n    <div class=\"has-bg-yellow\" style=\"width: 150px; height: 150px;\">2</div>\n  </div>\n{% endif %}",
+      "preview": "\n    <div class=\"has-padding l-flex\">\n        <div class=\"has-bg-black has-text-white\" style=\"width: 150px; height: 150px;\">1</div>\n        <div class=\"has-bg-yellow\" style=\"width: 150px; height: 150px;\">2</div>\n    </div>    \n"
+    },
+    {
+      "name": ".l-flex-row",
+      "className": "l-flex-row",
+      "description": "<strong>flex-direction: row</strong> Horizontal flexbox. (default)",
+      "type": "modifier",
+      "template": "{% if className == 'l-flex' %}\n    <div class=\"has-padding {{className}}\">\n        <div class=\"has-bg-black has-text-white\" style=\"width: 150px; height: 150px;\">1</div>\n        <div class=\"has-bg-yellow\" style=\"width: 150px; height: 150px;\">2</div>\n    </div>    \n{% else %}\n<div class=\"has-padding has-section-padding has-border l-flex {{className}}\">\n    <div class=\"has-bg-black has-text-white\" style=\"width: 150px; height: 150px;\">1</div>\n    <div class=\"has-bg-yellow\" style=\"width: 150px; height: 150px;\">2</div>\n  </div>\n{% endif %}",
+      "preview": "\n<div class=\"has-padding has-section-padding has-border l-flex l-flex-row\">\n    <div class=\"has-bg-black has-text-white\" style=\"width: 150px; height: 150px;\">1</div>\n    <div class=\"has-bg-yellow\" style=\"width: 150px; height: 150px;\">2</div>\n  </div>\n"
+    },
+    {
+      "name": ".l-flex-column",
+      "className": "l-flex-column",
+      "description": "<strong>flex-direction: column</strong> Vertical flexbox.",
+      "type": "modifier",
+      "template": "{% if className == 'l-flex' %}\n    <div class=\"has-padding {{className}}\">\n        <div class=\"has-bg-black has-text-white\" style=\"width: 150px; height: 150px;\">1</div>\n        <div class=\"has-bg-yellow\" style=\"width: 150px; height: 150px;\">2</div>\n    </div>    \n{% else %}\n<div class=\"has-padding has-section-padding has-border l-flex {{className}}\">\n    <div class=\"has-bg-black has-text-white\" style=\"width: 150px; height: 150px;\">1</div>\n    <div class=\"has-bg-yellow\" style=\"width: 150px; height: 150px;\">2</div>\n  </div>\n{% endif %}",
+      "preview": "\n<div class=\"has-padding has-section-padding has-border l-flex l-flex-column\">\n    <div class=\"has-bg-black has-text-white\" style=\"width: 150px; height: 150px;\">1</div>\n    <div class=\"has-bg-yellow\" style=\"width: 150px; height: 150px;\">2</div>\n  </div>\n"
+    },
+    {
+      "name": "l-jc-center",
+      "className": "l-jc-center",
+      "description": "<strong>align-items: center</strong> Center items horizontally (if row).",
+      "type": "modifier",
+      "template": "Parent: <code>display: flex</code> + <code>.{{className}}</code>  <div style=\"border: 2px solid black; height: 100px; display:flex\" class=\"{{ className }}\"><div class=\"has-bg-yellow has-padding\">Child</div><div class=\"has-bg-black has-text-white has-padding\">Child</div></div>",
+      "preview": "Parent: <code>display: flex</code> + <code>.l-jc-center</code>  <div style=\"border: 2px solid black; height: 100px; display:flex\" class=\"l-jc-center\"><div class=\"has-bg-yellow has-padding\">Child</div><div class=\"has-bg-black has-text-white has-padding\">Child</div></div>"
+    },
+    {
+      "name": "l-jc-space",
+      "className": "l-jc-space",
+      "description": "<strong>justify-content: space-between</strong> Evenly space items horizontally (if row).",
+      "type": "modifier",
+      "template": "Parent: <code>display: flex</code> + <code>.{{className}}</code>  <div style=\"border: 2px solid black; height: 100px; display:flex\" class=\"{{ className }}\"><div class=\"has-bg-yellow has-padding\">Child</div><div class=\"has-bg-black has-text-white has-padding\">Child</div></div>",
+      "preview": "Parent: <code>display: flex</code> + <code>.l-jc-space</code>  <div style=\"border: 2px solid black; height: 100px; display:flex\" class=\"l-jc-space\"><div class=\"has-bg-yellow has-padding\">Child</div><div class=\"has-bg-black has-text-white has-padding\">Child</div></div>"
+    },
     {
       "name": ".l-height-full",
       "className": "l-height-full",