cacao-css 4.0.0 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 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.
 \* =========================================================================== */
@@ -29,6 +29,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,6 +58,7 @@
 
 /* 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'; */
 

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.1.0",
     "author": "Aptuitiv, Inc <hello@aptuitiv.com>",
     "license": "MIT",
     "repository": {

package/src/fit/fit.css

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

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;
+}