cacao-css 4.0.0 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 4.2.0 (Dec 19, 2023) - Breaking change
+
+- Fixed the order of import examples. The gutter styles have to come after grid styles.
+- Breaking Change - Changed the aspect ratio styles into two separate files. `aspect/horizontal.css` and `aspect/vertical.css`. Imports will need to be updated. Also added new aspect ratios.
+
+## 4.1.0 (Nov 30, 2023)
+
+- Added typography word break and word wrap styles.
+- Added clearfix utility.
+
 ## 4.0.0 (Nov 6, 2023)
 
 - Changed default breakpoints to be mobile first.

package/imports.css

@@ -1,10 +1,10 @@
 /* =========================================================================== *\
     Cacao CSS
-    
+
     To be included by a project to selectively include modules.
-    
+
     Ideally located at "my-project/src/css/main.css".
-    
+
     Most imports are commented out by default. You should uncomment
     modules that your project needs. This keeps the CSS lean and mean.
 \* =========================================================================== */
@@ -21,7 +21,8 @@
 @import '../../node_modules/cacao-css/src/base/base.css';
 
 /* Aspect Ratios */
-@import '../../node_modules/cacao-css/src/aspect/aspect.css';
+@import '../../node_modules/cacao-css/src/aspect/horizontal.css';
+/* @import '../../node_modules/cacao-css/src/aspect/vertical.css'; */
 
 /* Embed */
 @import '../../node_modules/cacao-css/src/embed/embed.css';
@@ -29,6 +30,9 @@
 /* Images */
 @import '../../node_modules/cacao-css/src/image/image.css';
 
+/* Layout */
+@import '../../node_modules/cacao-css/src/layout/layout.css';
+
 /* Fit */
 /* @import '../../node_modules/cacao-css/src/fit/fit.css'; */
 
@@ -55,34 +59,10 @@
 
 /* Typography */
 /* @import '../../node_modules/cacao-css/src/typography/align.css'; */
+/* @import '../../node_modules/cacao-css/src/typography/break.css'; */
 /* @import '../../node_modules/cacao-css/src/typography/transform.css'; */
 /* @import '../../node_modules/cacao-css/src/typography/weight.css'; */
 
-/* Gutter */
-@import '../../node_modules/cacao-css/src/gutter/core/all.css';
-@import '../../node_modules/cacao-css/src/gutter/core/horizontal.css';
-@import '../../node_modules/cacao-css/src/gutter/core/vertical.css';
-
-/* Gutter (sm) */
-/* @import '../../node_modules/cacao-css/src/gutter/sm/all.css'; */
-/* @import '../../node_modules/cacao-css/src/gutter/sm/horizontal.css'; */
-/* @import '../../node_modules/cacao-css/src/gutter/sm/vertical.css'; */
-
-/* Gutter (md) */
-/* @import '../../node_modules/cacao-css/src/gutter/md/all.css'; */
-/* @import '../../node_modules/cacao-css/src/gutter/md/horizontal.css'; */
-/* @import '../../node_modules/cacao-css/src/gutter/md/vertical.css'; */
-
-/* Gutter (lg) */
-/* @import '../../node_modules/cacao-css/src/gutter/lg/all.css'; */
-/* @import '../../node_modules/cacao-css/src/gutter/lg/horizontal.css'; */
-/* @import '../../node_modules/cacao-css/src/gutter/lg/vertical.css'; */
-
-/* Gutter (xl) */
-/* @import '../../node_modules/cacao-css/src/gutter/xl/all.css'; */
-/* @import '../../node_modules/cacao-css/src/gutter/xl/horizontal.css'; */
-/* @import '../../node_modules/cacao-css/src/gutter/xl/vertical.css'; */
-
 /* Display */
 /* @import '../../node_modules/cacao-css/src/display/core/align.css'; */
 @import '../../node_modules/cacao-css/src/display/core/display.css';
@@ -189,6 +169,31 @@
 /* @import '../../node_modules/cacao-css/src/grid/xl/col-11.css'; */
 /* @import '../../node_modules/cacao-css/src/grid/xl/col-12.css'; */
 
+/* Gutter */
+@import '../../node_modules/cacao-css/src/gutter/core/all.css';
+@import '../../node_modules/cacao-css/src/gutter/core/horizontal.css';
+@import '../../node_modules/cacao-css/src/gutter/core/vertical.css';
+
+/* Gutter (sm) */
+/* @import '../../node_modules/cacao-css/src/gutter/sm/all.css'; */
+/* @import '../../node_modules/cacao-css/src/gutter/sm/horizontal.css'; */
+/* @import '../../node_modules/cacao-css/src/gutter/sm/vertical.css'; */
+
+/* Gutter (md) */
+/* @import '../../node_modules/cacao-css/src/gutter/md/all.css'; */
+/* @import '../../node_modules/cacao-css/src/gutter/md/horizontal.css'; */
+/* @import '../../node_modules/cacao-css/src/gutter/md/vertical.css'; */
+
+/* Gutter (lg) */
+/* @import '../../node_modules/cacao-css/src/gutter/lg/all.css'; */
+/* @import '../../node_modules/cacao-css/src/gutter/lg/horizontal.css'; */
+/* @import '../../node_modules/cacao-css/src/gutter/lg/vertical.css'; */
+
+/* Gutter (xl) */
+/* @import '../../node_modules/cacao-css/src/gutter/xl/all.css'; */
+/* @import '../../node_modules/cacao-css/src/gutter/xl/horizontal.css'; */
+/* @import '../../node_modules/cacao-css/src/gutter/xl/vertical.css'; */
+
 /* Margin */
 /* @import '../../node_modules/cacao-css/src/margin/core/all.css'; */
 @import '../../node_modules/cacao-css/src/margin/core/bottom.css';

package/package.json

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

package/src/aspect/horizontal.css

@@ -0,0 +1,40 @@
+/* =========================================================================== *\
+    Horizontal Aspect Ratio Utilities
+\* =========================================================================== */
+
+.aspect-1-1 {
+    aspect-ratio: 1 / 1; /* 1.0:1 */
+}
+
+.aspect-5-4 {
+    aspect-ratio: 5 / 4; /* 1.25:1 */
+}
+
+.aspect-4-3 {
+    aspect-ratio: 4 / 3; /* 1.3:1 */
+}
+
+.aspect-7-5 {
+    aspect-ratio: 7 / 5; /* 1.4:1 */
+}
+
+.aspect-3-2 {
+    aspect-ratio: 3 / 2; /* 1.5:1 */
+}
+
+.aspect-16-9 {
+    aspect-ratio: 16 / 9; /* 1.7:1 */
+}
+
+.aspect-2-1 {
+    aspect-ratio: 2 / 1; /* 2:1 */
+}
+
+.aspect-7-3,
+.aspect-21-9 {
+    aspect-ratio: 7 / 3; /* 2.3:1 */
+}
+
+.aspect-3-1 {
+    aspect-ratio: 3 / 1; /* 3.0:1 */
+}

package/src/aspect/vertical.css

@@ -0,0 +1,40 @@
+/* =========================================================================== *\
+    Vertical Aspect Ratio Utilities
+\* =========================================================================== */
+
+.aspect-1-1 {
+    aspect-ratio: 1 / 1; /* 1.0:1 */
+}
+
+.aspect-4-5 {
+    aspect-ratio: 4 / 5; /* 1:1.25 */
+}
+
+.aspect-3-4 {
+    aspect-ratio: 3 / 4; /* 1:1.3 */
+}
+
+.aspect-5-7 {
+    aspect-ratio: 5 / 7; /* 1:1.4 */
+}
+
+.aspect-2-3 {
+    aspect-ratio: 2 / 3; /* 1:1.5 */
+}
+
+.aspect-9-16 {
+    aspect-ratio: 9 / 16; /* 1:1.7 */
+}
+
+.aspect-1-2 {
+    aspect-ratio: 1 / 2; /* 1:2 */
+}
+
+.aspect-3-7,
+.aspect-9-21 {
+    aspect-ratio: 3 / 7; /* 1:2.3 */
+}
+
+.aspect-1-3 {
+    aspect-ratio: 1 / 3; /* 1:3.0 */
+}

package/src/fit/fit.css

@@ -6,6 +6,6 @@
     object-fit: cover;
 }
 
-.fir-contain {
+.fit-contain {
     object-fit: contain;
 }

package/src/gutter/core/all.css

@@ -26,6 +26,11 @@
     --gap: 50px;
 }
 
-.g-0, .g-1, .g-2, .g-3, .g-4, .g-5 {
+.g-0,
+.g-1,
+.g-2,
+.g-3,
+.g-4,
+.g-5 {
     gap: var(--gap);
 }

package/src/layout/layout.css

@@ -0,0 +1,13 @@
+/* =========================================================================== *\
+    Layout Options
+\* =========================================================================== */
+
+.clearfix::before,
+.clearfix::after {
+    content: ' ' !important;
+    display: table !important;
+}
+
+.clearfix::after {
+    clear: both !important;
+}

package/src/typography/break.css

@@ -0,0 +1,27 @@
+/* ===========================================================================
+    Word wrapping and word break styles
+=========================================================================== */
+
+/**
+ * Break strings when their length exceeds the width of their container.
+ */
+
+.break-word {
+    overflow-wrap: break-word !important;
+}
+
+/**
+ * word-break breaks more aggressively than overflow-wrap and it best for URLS or long strings
+ * that could be all "one word".
+ */
+.break-all {
+    word-break: break-all;
+}
+
+/**
+ * Prevent whitespace wrapping
+ */
+
+.no-wrap {
+    white-space: nowrap !important;
+}

package/src/aspect/aspect.css

@@ -1,23 +0,0 @@
-/* =========================================================================== *\
-    Aspect Ratio Utilities
-\* =========================================================================== */
-
-.aspect-1-1 {
-    aspect-ratio: 1 / 1;
-}
-
-.aspect-2-1 {
-    aspect-ratio: 2 / 1;
-}
-
-.aspect-4-3 {
-    aspect-ratio: 4 / 3;
-}
-
-.aspect-16-9 {
-    aspect-ratio: 16 / 9;
-}
-
-.aspect-21-9 {
-    aspect-ratio: 21 / 9;
-}