cacao-css 5.1.0 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 5.2.0 (August 1, 2024)
+
+- Added width styles.
+
 ## 5.1.0 (August 1, 2024)
 
 - Added inline-block breakpoint styles.

package/Migrating-from-version3.md

@@ -61,13 +61,15 @@ These breakpoints are [inspired by Pure](https://purecss.io/grids/#:~:text=%3C/d
 | `.u-printHide`            | `.print-hide`       |
 | `.u-printShow`            | `.print-show`       |
 | `.u-heightFull`           | `.h-100`            |
-| `.u-widthFull`            | `.w-100`            |
-| `.u-size*of*`             | `.col-*-*`          |
+| `.u-widthFull`            | `.w-1-1` or `.w-100` |
+| `.u-size*of*`             | `.col-*-*` or `.w-*-*` |
 | `.u-textBreak`            | `.break-word`       |
 | `.u-textBreakAll`         | `.break-all`        |
+| `.u-textLeft`             | `.text-start`       |
 | `.u-textNoWrap`           | `.no-wrap`          |
 | `.u-textUpper`            | `.text-upper`       |
 | `.u-textCenter`           | `.text-center`      |
+| `.u-textRight`            | `.text-end`         |
 | `.u-weightNormal`         | `.weight-normal`    |
 | `.u-weightBold`           | `.weight-bold`      |
 

package/imports.css

@@ -809,3 +809,117 @@
 /* @import '../../node_modules/cacao-css/src/typography/xxl/break.css'; */
 /* @import '../../node_modules/cacao-css/src/typography/xxl/transform.css'; */
 /* @import '../../node_modules/cacao-css/src/typography/xxl/weight.css'; */
+
+/* ------------------------------------ *\
+    Width
+\* ------------------------------------ */
+
+/* @import '../../node_modules/cacao-css/src/width/core/width-0.css'; */
+/* @import '../../node_modules/cacao-css/src/width/core/width-1.css'; */
+/* @import '../../node_modules/cacao-css/src/width/core/width-2.css'; */
+/* @import '../../node_modules/cacao-css/src/width/core/width-3.css'; */
+/* @import '../../node_modules/cacao-css/src/width/core/width-4.css'; */
+/* @import '../../node_modules/cacao-css/src/width/core/width-5.css'; */
+/* @import '../../node_modules/cacao-css/src/width/core/width-6.css'; */
+/* @import '../../node_modules/cacao-css/src/width/core/width-7.css'; */
+/* @import '../../node_modules/cacao-css/src/width/core/width-8.css'; */
+/* @import '../../node_modules/cacao-css/src/width/core/width-9.css'; */
+/* @import '../../node_modules/cacao-css/src/width/core/width-10.css'; */
+/* @import '../../node_modules/cacao-css/src/width/core/width-11.css'; */
+/* @import '../../node_modules/cacao-css/src/width/core/width-12.css'; */
+
+/* Width (xs) */
+
+/* @import '../../node_modules/cacao-css/src/width/xs/width-0.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xs/width-1.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xs/width-2.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xs/width-3.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xs/width-4.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xs/width-5.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xs/width-6.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xs/width-7.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xs/width-8.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xs/width-9.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xs/width-10.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xs/width-11.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xs/width-12.css'; */
+
+/* Width (sm) */
+
+/* @import '../../node_modules/cacao-css/src/width/sm/width-0.css'; */
+/* @import '../../node_modules/cacao-css/src/width/sm/width-1.css'; */
+/* @import '../../node_modules/cacao-css/src/width/sm/width-2.css'; */
+/* @import '../../node_modules/cacao-css/src/width/sm/width-3.css'; */
+/* @import '../../node_modules/cacao-css/src/width/sm/width-4.css'; */
+/* @import '../../node_modules/cacao-css/src/width/sm/width-5.css'; */
+/* @import '../../node_modules/cacao-css/src/width/sm/width-6.css'; */
+/* @import '../../node_modules/cacao-css/src/width/sm/width-7.css'; */
+/* @import '../../node_modules/cacao-css/src/width/sm/width-8.css'; */
+/* @import '../../node_modules/cacao-css/src/width/sm/width-9.css'; */
+/* @import '../../node_modules/cacao-css/src/width/sm/width-10.css'; */
+/* @import '../../node_modules/cacao-css/src/width/sm/width-11.css'; */
+/* @import '../../node_modules/cacao-css/src/width/sm/width-12.css'; */
+
+/* Width (md) */
+
+/* @import '../../node_modules/cacao-css/src/width/md/width-0.css'; */
+/* @import '../../node_modules/cacao-css/src/width/md/width-1.css'; */
+/* @import '../../node_modules/cacao-css/src/width/md/width-2.css'; */
+/* @import '../../node_modules/cacao-css/src/width/md/width-3.css'; */
+/* @import '../../node_modules/cacao-css/src/width/md/width-4.css'; */
+/* @import '../../node_modules/cacao-css/src/width/md/width-5.css'; */
+/* @import '../../node_modules/cacao-css/src/width/md/width-6.css'; */
+/* @import '../../node_modules/cacao-css/src/width/md/width-7.css'; */
+/* @import '../../node_modules/cacao-css/src/width/md/width-8.css'; */
+/* @import '../../node_modules/cacao-css/src/width/md/width-9.css'; */
+/* @import '../../node_modules/cacao-css/src/width/md/width-10.css'; */
+/* @import '../../node_modules/cacao-css/src/width/md/width-11.css'; */
+/* @import '../../node_modules/cacao-css/src/width/md/width-12.css'; */
+
+/* Width (lg) */
+
+/* @import '../../node_modules/cacao-css/src/width/lg/width-0.css'; */
+/* @import '../../node_modules/cacao-css/src/width/lg/width-1.css'; */
+/* @import '../../node_modules/cacao-css/src/width/lg/width-2.css'; */
+/* @import '../../node_modules/cacao-css/src/width/lg/width-3.css'; */
+/* @import '../../node_modules/cacao-css/src/width/lg/width-4.css'; */
+/* @import '../../node_modules/cacao-css/src/width/lg/width-5.css'; */
+/* @import '../../node_modules/cacao-css/src/width/lg/width-6.css'; */
+/* @import '../../node_modules/cacao-css/src/width/lg/width-7.css'; */
+/* @import '../../node_modules/cacao-css/src/width/lg/width-8.css'; */
+/* @import '../../node_modules/cacao-css/src/width/lg/width-9.css'; */
+/* @import '../../node_modules/cacao-css/src/width/lg/width-10.css'; */
+/* @import '../../node_modules/cacao-css/src/width/lg/width-11.css'; */
+/* @import '../../node_modules/cacao-css/src/width/lg/width-12.css'; */
+
+/* Width (xl) */
+
+/* @import '../../node_modules/cacao-css/src/width/xl/width-0.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xl/width-1.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xl/width-2.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xl/width-3.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xl/width-4.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xl/width-5.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xl/width-6.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xl/width-7.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xl/width-8.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xl/width-9.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xl/width-10.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xl/width-11.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xl/width-12.css'; */
+
+/* Width (xxl) */
+
+/* @import '../../node_modules/cacao-css/src/width/xxl/width-0.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xxl/width-1.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xxl/width-2.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xxl/width-3.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xxl/width-4.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xxl/width-5.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xxl/width-6.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xxl/width-7.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xxl/width-8.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xxl/width-9.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xxl/width-10.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xxl/width-11.css'; */
+/* @import '../../node_modules/cacao-css/src/width/xxl/width-12.css'; */

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "cacao-css",
     "description": "A set of composable CSS utilities that provide a solid foundation for website projects.",
-    "version": "5.1.0",
+    "version": "5.2.0",
     "author": "Aptuitiv, Inc <hello@aptuitiv.com>",
     "license": "MIT",
     "repository": {

package/src/width/core/width-0.css

@@ -0,0 +1,7 @@
+/* =========================================================================== *\
+    No width
+\* =========================================================================== */
+
+.w-0 {
+    width: 0;
+}

package/src/width/core/width-1.css

@@ -0,0 +1,8 @@
+/* =========================================================================== *\
+    Full width
+\* =========================================================================== */
+
+.w-11,
+.w-1-1 {
+    width: 100%;
+}

package/src/width/core/width-10.css

@@ -0,0 +1,43 @@
+/* =========================================================================== *\
+    Width 10's
+\* =========================================================================== */
+
+.w-1-10 {
+    width: calc(10%);
+}
+
+.w-2-10 {
+    width: calc(20%);
+}
+
+.w-3-10 {
+    width: calc(30%);
+}
+
+.w-4-10 {
+    width: calc(40%);
+}
+
+.w-5-10 {
+    width: 50%;
+}
+
+.w-6-10 {
+    width: calc(60%);
+}
+
+.w-7-10 {
+    width: calc(70%);
+}
+
+.w-8-10 {
+    width: calc(80%);
+}
+
+.w-9-10 {
+    width: calc(90%);
+}
+
+.w-10-10 {
+    width: 100%;
+}

package/src/width/core/width-11.css

@@ -0,0 +1,47 @@
+/* =========================================================================== *\
+    Width 11's
+\* =========================================================================== */
+
+.w-1-11 {
+    width: calc(100% / 11);
+}
+
+.w-2-11 {
+    width: calc(100% / 11 * 2);
+}
+
+.w-3-11 {
+    width: calc(100% / 11 * 3);
+}
+
+.w-4-11 {
+    width: calc(100% / 11 * 4);
+}
+
+.w-5-11 {
+    width: calc(100% / 11 * 5);
+}
+
+.w-6-11 {
+    width: calc(100% / 11 * 6);
+}
+
+.w-7-11 {
+    width: calc(100% / 11 * 7);
+}
+
+.w-8-11 {
+    width: calc(100% / 11 * 8);
+}
+
+.w-9-11 {
+    width: calc(100% / 11 * 9);
+}
+
+.w-10-11 {
+    width: calc(100% / 11 * 10);
+}
+
+.w-11-11 {
+    width: 100%;
+}

package/src/width/core/width-12.css

@@ -0,0 +1,51 @@
+/* =========================================================================== *\
+    Width 12's
+\* =========================================================================== */
+
+.w-1-12 {
+    width: calc(100% / 12);
+}
+
+.w-2-12 {
+    width: calc(100% / 12 * 2);
+}
+
+.w-3-12 {
+    width: 25%;
+}
+
+.w-4-12 {
+    width: calc(100% / 12 * 4);
+}
+
+.w-5-12 {
+    width: calc(100% / 12 * 5);
+}
+
+.w-6-12 {
+    width: 50%;
+}
+
+.w-7-12 {
+    width: calc(100% / 12 * 7);
+}
+
+.w-8-12 {
+    width: calc(100% / 12 * 8);
+}
+
+.w-9-12 {
+    width: 75%;
+}
+
+.w-10-12 {
+    width: calc(100% / 12 * 10);
+}
+
+.w-11-12 {
+    width: calc(100% / 12 * 11);
+}
+
+.w-12-12 {
+    width: 100%;
+}

package/src/width/core/width-2.css

@@ -0,0 +1,11 @@
+/* =========================================================================== *\
+    Width 2's
+\* =========================================================================== */
+
+.w-1-2 {
+    width: 50%;
+}
+
+.w-2-2 {
+    width: 100%;
+}

package/src/width/core/width-3.css

@@ -0,0 +1,15 @@
+/* =========================================================================== *\
+    Width 3's
+\* =========================================================================== */
+
+.w-1-3 {
+    width: calc(100% / 3);
+}
+
+.w-2-3 {
+    width: calc(100% / 3 * 2);
+}
+
+.w-3-3 {
+    width: 100%;
+}

package/src/width/core/width-4.css

@@ -0,0 +1,19 @@
+/* =========================================================================== *\
+    Width 4's
+\* =========================================================================== */
+
+.w-1-4 {
+    width: 25%;
+}
+
+.w-2-4 {
+    width: 50%;
+}
+
+.w-3-4 {
+    width: 75%;
+}
+
+.w-4-4 {
+    width: 100%;
+}

package/src/width/core/width-5.css

@@ -0,0 +1,23 @@
+/* =========================================================================== *\
+    Width 5's
+\* =========================================================================== */
+
+.w-1-5 {
+    width: calc(20%);
+}
+
+.w-2-5 {
+    width: calc(40%);
+}
+
+.w-3-5 {
+    width: calc(60%);
+}
+
+.w-4-5 {
+    width: calc(80%);
+}
+
+.w-5-5 {
+    width: 100%;
+}

package/src/width/core/width-6.css

@@ -0,0 +1,27 @@
+/* =========================================================================== *\
+    Width 6's
+\* =========================================================================== */
+
+.w-1-6 {
+    width: calc(100% / 6);
+}
+
+.w-2-6 {
+    width: calc(100% / 6 * 2);
+}
+
+.w-3-6 {
+    width: 50%;
+}
+
+.w-4-6 {
+    width: calc(100% / 6 * 4);
+}
+
+.w-5-6 {
+    width: calc(100% / 6 * 5);
+}
+
+.w-6-6 {
+    width: 100%;
+}

package/src/width/core/width-7.css

@@ -0,0 +1,31 @@
+/* =========================================================================== *\
+    Width 7's
+\* =========================================================================== */
+
+.w-1-7 {
+    width: calc(100% / 7);
+}
+
+.w-2-7 {
+    width: calc(100% / 7 * 2);
+}
+
+.w-3-7 {
+    width: calc(100% / 7 * 3);
+}
+
+.w-4-7 {
+    width: calc(100% / 7 * 4);
+}
+
+.w-5-7 {
+    width: calc(100% / 7 * 5);
+}
+
+.w-6-7 {
+    width: calc(100% / 7 * 6);
+}
+
+.w-7-7 {
+    width: 100%;
+}

package/src/width/core/width-8.css

@@ -0,0 +1,35 @@
+/* =========================================================================== *\
+    Width 8's
+\* =========================================================================== */
+
+.w-1-8 {
+    width: calc(100% / 8);
+}
+
+.w-2-8 {
+    width: 25%;
+}
+
+.w-3-8 {
+    width: calc(100% / 8 * 3);
+}
+
+.w-4-8 {
+    width: 50%;
+}
+
+.w-5-8 {
+    width: calc(100% / 8 * 5);
+}
+
+.w-6-8 {
+    width: 75%;
+}
+
+.w-7-8 {
+    width: calc(100% / 8 * 7);
+}
+
+.w-8-8 {
+    width: 100%;
+}

package/src/width/core/width-9.css

@@ -0,0 +1,39 @@
+/* =========================================================================== *\
+    Width 9's
+\* =========================================================================== */
+
+.w-1-9 {
+    width: calc(100% / 9);
+}
+
+.w-2-9 {
+    width: calc(100% / 9 * 2);
+}
+
+.w-3-9 {
+    width: calc(100% / 9 * 3);
+}
+
+.w-4-9 {
+    width: calc(100% / 9 * 4);
+}
+
+.w-5-9 {
+    width: calc(100% / 9 * 5);
+}
+
+.w-6-9 {
+    width: calc(100% / 9 * 6);
+}
+
+.w-7-9 {
+    width: calc(100% / 9 * 7);
+}
+
+.w-8-9 {
+    width: calc(100% / 9 * 8);
+}
+
+.w-9-9 {
+    width: 100%;
+}

package/src/width/lg/width-0.css

@@ -0,0 +1,9 @@
+/* =========================================================================== *\
+    No width
+\* =========================================================================== */
+
+@media (--c-bp-lg) {
+    .w-lg-0 {
+        width: 0;
+    }
+}

package/src/width/lg/width-1.css

@@ -0,0 +1,10 @@
+/* =========================================================================== *\
+    Full width
+\* =========================================================================== */
+
+@media (--c-bp-lg) {
+    .w-lg-100,
+    .w-lg-1-1 {
+        width: 100%;
+    }
+}

package/src/width/lg/width-10.css

@@ -0,0 +1,45 @@
+/* =========================================================================== *\
+    Width 10's
+\* =========================================================================== */
+
+@media (--c-bp-lg) {
+    .w-lg-1-10 {
+        width: calc(10%);
+    }
+
+    .w-lg-2-10 {
+        width: calc(20%);
+    }
+
+    .w-lg-3-10 {
+        width: calc(30%);
+    }
+
+    .w-lg-4-10 {
+        width: calc(40%);
+    }
+
+    .w-lg-5-10 {
+        width: 50%;
+    }
+
+    .w-lg-6-10 {
+        width: calc(60%);
+    }
+
+    .w-lg-7-10 {
+        width: calc(70%);
+    }
+
+    .w-lg-8-10 {
+        width: calc(80%);
+    }
+
+    .w-lg-9-10 {
+        width: calc(90%);
+    }
+
+    .w-lg-10-10 {
+        width: 100%;
+    }
+}

package/src/width/lg/width-11.css

@@ -0,0 +1,49 @@
+/* =========================================================================== *\
+    Width 11's
+\* =========================================================================== */
+
+@media (--c-bp-lg) {
+    .w-lg-1-11 {
+        width: calc(100% / 11);
+    }
+
+    .w-lg-2-11 {
+        width: calc(100% / 11 * 2);
+    }
+
+    .w-lg-3-11 {
+        width: calc(100% / 11 * 3);
+    }
+
+    .w-lg-4-11 {
+        width: calc(100% / 11 * 4);
+    }
+
+    .w-lg-5-11 {
+        width: calc(100% / 11 * 5);
+    }
+
+    .w-lg-6-11 {
+        width: calc(100% / 11 * 6);
+    }
+
+    .w-lg-7-11 {
+        width: calc(100% / 11 * 7);
+    }
+
+    .w-lg-8-11 {
+        width: calc(100% / 11 * 8);
+    }
+
+    .w-lg-9-11 {
+        width: calc(100% / 11 * 9);
+    }
+
+    .w-lg-10-11 {
+        width: calc(100% / 11 * 10);
+    }
+
+    .w-lg-11-11 {
+        width: 100%;
+    }
+}