@graupl/graupl 1.0.0-alpha.13 → 1.0.0-alpha.14

package/index.html

@@ -14,8 +14,8 @@
     <p>Graupl is a modular CSS framework with the goal of making it easy to theme a site.</p>
     <p>This source code can be found in <a href="https://github.com/Graupl/graupl">GitHub</a>.</p>
     <p>Graupl supports light and dark modes out-of-the-box.</p>
-    <button id="dark-mode-toggle" class="button mt-5">Toggle dark mode</button>
-    <div class="py-10 full-width container">
+    <button id="dark-mode-toggle" class="button mt-5 w-half">Toggle dark mode</button>
+    <div class="full-width container min-h-full-screen align-content-center">
       <h2>Buttons</h2>
       <p>There are 4 colours of buttons supported by default, with plans to have a "graupl-theme" plugin that adds more.
       </p>
@@ -34,7 +34,7 @@
         <a class="button" href="#" disabled>Anchor Button</a>
       </div>
     </div>
-    <div class="py-10 full-width container">
+    <div class="full-width container min-h-full-screen align-content-center">
       <h2>Form elements</h2>
       <p>Graupl provides default styling for all form elements.</p>
       <form class="full-width rg-4">
@@ -131,10 +131,11 @@
         </div>
       </form>
     </div>
-    <div class="py-10 full-width container">
+    <div class="full-width container min-h-full-screen align-content-center">
       <h2>Navigation</h2>
       <div class="py-7">
-        <nav class="navigation" data-graupl-menu-type="DisclosureMenu" data-graupl-menu-options="{'optionalKeySupport': true}">
+        <nav class="navigation" data-graupl-menu-type="DisclosureMenu"
+          data-graupl-menu-options="{'optionalKeySupport': true}">
           <a class="navigation-branding" href="#">Graupl</a>
           <button class="navigation-toggle ml-auto mr-0" aria-label="Toggle navigation"></button>
           <ul class="menu">
@@ -154,7 +155,7 @@
         </nav>
       </div>
     </div>
-    <div class="py-10 full-width container">
+    <div class="full-width container min-h-full-screen align-content-center">
       <h2>Tables</h2>
       <p>Graupl provides some default styling for tables as well as some other useful features to customize them.</p>
       <table class="bordered striped-rows hoverable">
@@ -324,18 +325,18 @@
           </caption>
           <thead class="primary">
             <tr>
-              <th scrop="col">Column 1</th>
-              <th scrop="col">Column 2</th>
-              <th scrop="col">Column 3</th>
-              <th scrop="col">Column 4</th>
-              <th scrop="col">Column 5</th>
-              <th scrop="col">Column 6</th>
-              <th scrop="col">Column 7</th>
-              <th scrop="col">Column 8</th>
-              <th scrop="col">Column 9</th>
-              <th scrop="col">Column 10</th>
-              <th scrop="col">Column 11</th>
-              <th scrop="col">Column 12</th>
+              <th scope="col">Column 1</th>
+              <th scope="col">Column 2</th>
+              <th scope="col">Column 3</th>
+              <th scope="col">Column 4</th>
+              <th scope="col">Column 5</th>
+              <th scope="col">Column 6</th>
+              <th scope="col">Column 7</th>
+              <th scope="col">Column 8</th>
+              <th scope="col">Column 9</th>
+              <th scope="col">Column 10</th>
+              <th scope="col">Column 11</th>
+              <th scope="col">Column 12</th>
             </tr>
           </thead>
           <tbody>
@@ -385,7 +386,7 @@
         </table>
       </div>
     </div>
-    <div class="py-10 full-width container">
+    <div class="full-width container min-h-full-screen align-content-center">
       <h2>Columns</h2>
       <div class="columns count-6 py-5">
         <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
@@ -402,7 +403,7 @@
         <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
       </div>
     </div>
-    <div class="py-10 full-width container">
+    <div class="full-width container min-h-full-screen align-content-center">
       <h2>Flex columns</h2>
       <div class="flex-columns py-5">
         <div class="col-6 col-md-8 col-xl-9 py-7 bg-primary-700 text-primary-100 px-5">
@@ -427,12 +428,16 @@
         <div class="col-4 py-7 bg-primary-700 text-primary-100 px-5"></div>
       </div>
     </div>
-    <div class="py-10 full-width container">
+    <div class="full-width container min-h-full-screen align-content-center">
       <h2>Cards</h2>
+      <p>Cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.top</span> class
+        will have the image placed on the top while cards using the <span
+          class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.bottom</span> class will have the image
+        placed on the bottom.</p>
       <div class="columns">
         <div class="card">
           <div class="card-image">
-            <img src="https://unsplash.it/1000/400" alt="Card image">
+            <img src="https://picsum.photos/1000/400?random=1" alt="Card image">
           </div>
           <div class="card-content">
             <div class="card-header">
@@ -448,7 +453,7 @@
         </div>
         <div class="card">
           <div class="card-image">
-            <img src="https://unsplash.it/1000/400" alt="Card image">
+            <img src="https://picsum.photos/1000/400?random=2" alt="Card image">
           </div>
           <div class="card-content">
             <div class="card-header">
@@ -464,7 +469,7 @@
         </div>
         <div class="card">
           <div class="card-image">
-            <img src="https://unsplash.it/1000/400" alt="Card image">
+            <img src="https://picsum.photos/1000/400?random=3" alt="Card image">
           </div>
           <div class="card-content">
             <div class="card-header">
@@ -478,9 +483,9 @@
             </div>
           </div>
         </div>
-        <div class="card">
+        <div class="card bottom">
           <div class="card-image">
-            <img src="https://unsplash.it/1000/400" alt="Card image">
+            <img src="https://picsum.photos/1000/400?random=4" alt="Card image">
           </div>
           <div class="card-content">
             <div class="card-header">
@@ -494,9 +499,9 @@
             </div>
           </div>
         </div>
-        <div class="card">
+        <div class="card bottom">
           <div class="card-image">
-            <img src="https://unsplash.it/1000/400" alt="Card image">
+            <img src="https://picsum.photos/1000/400?random=5" alt="Card image">
           </div>
           <div class="card-content">
             <div class="card-header">
@@ -510,9 +515,9 @@
             </div>
           </div>
         </div>
-        <div class="card">
+        <div class="card bottom">
           <div class="card-image">
-            <img src="https://unsplash.it/1000/400" alt="Card image">
+            <img src="https://picsum.photos/1000/400?random=6" alt="Card image">
           </div>
           <div class="card-content">
             <div class="card-header">
@@ -528,12 +533,16 @@
         </div>
       </div>
     </div>
-    <div class="py-10 full-width container">
+    <div class="full-width container min-h-full-screen align-content-center">
       <h2>Horizontal Cards</h2>
+      <p>Cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.right</span> class
+        will have the image placed on the right while cards using the <span
+          class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.left</span> class will have the image
+        placed on the left.</p>
       <div class="columns count-2">
         <div class="card horizontal">
           <div class="card-image">
-            <img src="https://unsplash.it/1000/400" alt="Card image">
+            <img src="https://picsum.photos/1000/400?random=1" alt="Card image">
           </div>
           <div class="card-content">
             <div class="card-header">
@@ -549,7 +558,7 @@
         </div>
         <div class="card horizontal right">
           <div class="card-image">
-            <img src="https://unsplash.it/1000/400" alt="Card image">
+            <img src="https://picsum.photos/1000/400?random=2" alt="Card image">
           </div>
           <div class="card-content">
             <div class="card-header">
@@ -565,7 +574,7 @@
         </div>
         <div class="card horizontal">
           <div class="card-image">
-            <img src="https://unsplash.it/1000/400" alt="Card image">
+            <img src="https://picsum.photos/1000/400?random=3" alt="Card image">
           </div>
           <div class="card-content">
             <div class="card-header">
@@ -581,7 +590,7 @@
         </div>
         <div class="card horizontal right">
           <div class="card-image">
-            <img src="https://unsplash.it/1000/400" alt="Card image">
+            <img src="https://picsum.photos/1000/400?random=4" alt="Card image">
           </div>
           <div class="card-content">
             <div class="card-header">
@@ -597,7 +606,7 @@
         </div>
         <div class="card horizontal">
           <div class="card-image">
-            <img src="https://unsplash.it/1000/400" alt="Card image">
+            <img src="https://picsum.photos/1000/400?random=5" alt="Card image">
           </div>
           <div class="card-content">
             <div class="card-header">
@@ -613,7 +622,7 @@
         </div>
         <div class="card horizontal right">
           <div class="card-image">
-            <img src="https://unsplash.it/1000/400" alt="Card image">
+            <img src="https://picsum.photos/1000/400?random=6" alt="Card image">
           </div>
           <div class="card-content">
             <div class="card-header">
@@ -629,9 +638,141 @@
         </div>
       </div>
     </div>
+    <div class="full-width container min-h-full-screen align-content-center">
+      <h2>Inverse Cards</h2>
+      <p>Cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.inverse</span>
+        class will have the image placed on the right if it is a horizontal card and on the bottom if it is a vertical
+        card.</p>
+      <p>This is mainly to provide a shortcut for horizontal cards that you'd like to use the <span
+          class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.bottom .right</span> classes on when the
+        card is forced to be vertical.</p>
+      <div class="columns count-2">
+        <div class="card horizontal inverse">
+          <div class="card-image">
+            <img src="https://picsum.photos/1000/400?random=1" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+        <div class="card horizontal inverse">
+          <div class="card-image">
+            <img src="https://picsum.photos/1000/400?random=2" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="full-width container min-h-full-screen align-content-center">
+      <h2>Alerts</h2>
+      <div class="display-grid g-5">
+        <div class="alert">
+          <div class="alert-header">
+            <h3 class="alert-title">Alert</h3>
+          </div>
+          <div class="alert-body">
+            <p>This is some text that describes the alert.</p>
+          </div>
+          <div class="alert-footer">
+            <a href="#">Action</a>
+          </div>
+          <button class="alert-dismisser">x</button>
+        </div>
+        <div class="alert primary">
+          <div class="alert-header">
+            <h3 class="alert-title">Primary Alert</h3>
+          </div>
+          <div class="alert-body">
+            <p>This is some text that describes the alert.</p>
+          </div>
+          <div class="alert-footer">
+            <a href="#">Primary Action</a>
+          </div>
+          <button class="alert-dismisser primary">x</button>
+        </div>
+        <div class="alert secondary">
+          <div class="alert-header">
+            <h3 class="alert-title">Secondary Alert</h3>
+          </div>
+          <div class="alert-body">
+            <p>This is some text that describes the alert.</p>
+          </div>
+          <div class="alert-footer">
+            <a href="#">Secondary Action</a>
+          </div>
+          <button class="alert-dismisser secondary">x</button>
+        </div>
+        <div class="alert tertiary">
+          <div class="alert-header">
+            <h3 class="alert-title">Tertiary Alert</h3>
+          </div>
+          <div class="alert-body">
+            <p>This is some text that describes the alert.</p>
+          </div>
+          <div class="alert-footer">
+            <a href="#">Tertiary Action</a>
+          </div>
+          <button class="alert-dismisser tertiary">x</button>
+        </div>
+      </div>
+    </div>
+    <div class="full-width container min-h-full-screen align-content-center">
+      <h2>Carousels</h2>
+      <section class="carousel">
+        <div class="carousel-control-container">
+          <button class=" carousel-control autoplay"></button>
+          <button class="carousel-control previous"></button>
+          <button class="carousel-control next"></button>
+        </div>
+        <div class="carousel-tab-container">
+          <button class="carousel-tab" aria-label="Carousel item 1"></button>
+          <button class="carousel-tab" aria-label="Carousel item 2"></button>
+          <button class="carousel-tab" aria-label="Carousel item 3"></button>
+          <button class="carousel-tab" aria-label="Carousel item 4"></button>
+          <button class="carousel-tab" aria-label="Carousel item 5"></button>
+        </div>
+        <div class="carousel-item-container">
+          <div class="carousel-item">
+            <div class="ratio sixteen-by-nine"><img class="force-ratio" src="https://picsum.photos/1400/600?random=1" alt="A placeholder carousel image" /></div>
+          </div>
+          <div class="carousel-item">
+            <div class="ratio sixteen-by-nine"><img class="force-ratio" src="https://picsum.photos/1400/600?random=2" alt="A placeholder carousel image" /></div>
+          </div>
+          <div class="carousel-item">
+            <div class="ratio sixteen-by-nine"><img class="force-ratio" src="https://picsum.photos/1400/600?random=3" alt="A placeholder carousel image" /></div>
+          </div>
+          <div class="carousel-item">
+            <div class="ratio sixteen-by-nine"><img class="force-ratio" src="https://picsum.photos/1400/600?random=4" alt="A placeholder carousel image" /></div>
+          </div>
+          <div class="carousel-item">
+            <div class="ratio sixteen-by-nine"><img class="force-ratio" src="https://picsum.photos/1400/600?random=5" alt="A placeholder carousel image" /></div>
+          </div>
+        </div>
+      </section>
+    </div>
   </main>
   <script src="https://cdn.jsdelivr.net/npm/accessible-menu/dist/disclosure-menu.iife.js"></script>
   <script src="src/js/navigation.js"></script>
+  <script type="module" src="src/js/alert/index.js"></script>
+  <script type="module" src="src/js/carousel/index.js"></script>
   <script>
     const preferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
     const setTheme = window.localStorage.getItem('theme') || preferredTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graupl/graupl",
-  "version": "1.0.0-alpha.13",
+  "version": "1.0.0-alpha.14",
   "description": "A modular and modern CSS framework.",
   "type": "module",
   "exports": {
@@ -15,7 +15,7 @@
     }
   },
   "scripts": {
-    "prepare": "husky install",
+    "prepare": "husky",
     "commit": "git cz",
     "eslint": "eslint .",
     "prettier": "prettier '**/*.{js,mjs,cjs,scss,sass}'",
@@ -49,10 +49,9 @@
     "commitizen": "^4.3.0",
     "cssnano": "^7.0.1",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.57.0",
+    "eslint": "^9.11.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-jsdoc": "^48.2.3",
+    "eslint-plugin-jsdoc": "^50.2.4",
     "globals": "^15.0.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
@@ -65,7 +64,7 @@
     "standard-version": "^9.5.0",
     "stylelint": "^16.3.1",
     "stylelint-config-property-sort-order-smacss": "^10.0.0",
-    "stylelint-config-sass-guidelines": "^11.1.0",
+    "stylelint-config-sass-guidelines": "^12.1.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-prettier": "^5.0.0",
     "vite": "^5.2.8",

package/scss/component/alert.scss

@@ -0,0 +1,3 @@
+// @graupl/graupl alert component.
+
+@forward "../../src/scss/component/alert";

package/scss/component/carousel.scss

@@ -0,0 +1,3 @@
+// @graupl/graupl carousel component.
+
+@forward "../../src/scss/component/carousel";

package/scss/utilities/height.scss

@@ -0,0 +1,3 @@
+// @graupl/graupl height utilities.
+
+@forward "../../src/scss/utilities/height";

package/scss/utilities/width.scss

@@ -0,0 +1,3 @@
+// @graupl/graupl width utilities.
+
+@forward "../../src/scss/utilities/width";