cacao-css 4.5.0 → 5.0.0

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

package/src/aspect/{horizontal.css → core/horizontal.css}

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Horizontal Aspect Ratio Utilities
+    Horizontal aspect ratio utilities
 \* =========================================================================== */
 
 .aspect-1-1 {

package/src/aspect/{vertical.css → core/vertical.css}

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Vertical Aspect Ratio Utilities
+    Vertical aspect ratio utilities
 \* =========================================================================== */
 
 .aspect-1-1 {

package/src/aspect/lg/horizontal.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Horizontal aspect ratio utilities
+\* =========================================================================== */
+
+@media (--c-bp-lg) {
+    .aspect-lg-1-1 {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-lg-5-4 {
+        aspect-ratio: 5 / 4; /* 1.25:1 */
+    }
+
+    .aspect-lg-4-3 {
+        aspect-ratio: 4 / 3; /* 1.3:1 */
+    }
+
+    .aspect-lg-7-5 {
+        aspect-ratio: 7 / 5; /* 1.4:1 */
+    }
+
+    .aspect-lg-3-2 {
+        aspect-ratio: 3 / 2; /* 1.5:1 */
+    }
+
+    .aspect-lg-16-9 {
+        aspect-ratio: 16 / 9; /* 1.7:1 */
+    }
+
+    .aspect-lg-2-1 {
+        aspect-ratio: 2 / 1; /* 2:1 */
+    }
+
+    .aspect-lg-7-3,
+    .aspect-lg-21-9 {
+        aspect-ratio: 7 / 3; /* 2.3:1 */
+    }
+
+    .aspect-lg-3-1 {
+        aspect-ratio: 3 / 1; /* 3.0:1 */
+    }
+}

package/src/aspect/lg/vertical.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Vertical aspect ratio utilities
+\* =========================================================================== */
+
+@media (--c-bp-lg) {
+    .aspect-lg-1-1 {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-lg-4-5 {
+        aspect-ratio: 4 / 5; /* 1:1.25 */
+    }
+
+    .aspect-lg-3-4 {
+        aspect-ratio: 3 / 4; /* 1:1.3 */
+    }
+
+    .aspect-lg-5-7 {
+        aspect-ratio: 5 / 7; /* 1:1.4 */
+    }
+
+    .aspect-lg-2-3 {
+        aspect-ratio: 2 / 3; /* 1:1.5 */
+    }
+
+    .aspect-lg-9-16 {
+        aspect-ratio: 9 / 16; /* 1:1.7 */
+    }
+
+    .aspect-lg-1-2 {
+        aspect-ratio: 1 / 2; /* 1:2 */
+    }
+
+    .aspect-lg-3-7,
+    .aspect-lg-9-21 {
+        aspect-ratio: 3 / 7; /* 1:2.3 */
+    }
+
+    .aspect-lg-1-3 {
+        aspect-ratio: 1 / 3; /* 1:3.0 */
+    }
+}

package/src/aspect/md/horizontal.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Horizontal aspect ratio utilities
+\* =========================================================================== */
+
+@media (--c-bp-md) {
+    .aspect-md-1-1 {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-md-5-4 {
+        aspect-ratio: 5 / 4; /* 1.25:1 */
+    }
+
+    .aspect-md-4-3 {
+        aspect-ratio: 4 / 3; /* 1.3:1 */
+    }
+
+    .aspect-md-7-5 {
+        aspect-ratio: 7 / 5; /* 1.4:1 */
+    }
+
+    .aspect-md-3-2 {
+        aspect-ratio: 3 / 2; /* 1.5:1 */
+    }
+
+    .aspect-md-16-9 {
+        aspect-ratio: 16 / 9; /* 1.7:1 */
+    }
+
+    .aspect-md-2-1 {
+        aspect-ratio: 2 / 1; /* 2:1 */
+    }
+
+    .aspect-md-7-3,
+    .aspect-md-21-9 {
+        aspect-ratio: 7 / 3; /* 2.3:1 */
+    }
+
+    .aspect-md-3-1 {
+        aspect-ratio: 3 / 1; /* 3.0:1 */
+    }
+}

package/src/aspect/md/vertical.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Vertical aspect ratio utilities
+\* =========================================================================== */
+
+@media (--c-bp-md) {
+    .aspect-md-1-1 {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-md-4-5 {
+        aspect-ratio: 4 / 5; /* 1:1.25 */
+    }
+
+    .aspect-md-3-4 {
+        aspect-ratio: 3 / 4; /* 1:1.3 */
+    }
+
+    .aspect-md-5-7 {
+        aspect-ratio: 5 / 7; /* 1:1.4 */
+    }
+
+    .aspect-md-2-3 {
+        aspect-ratio: 2 / 3; /* 1:1.5 */
+    }
+
+    .aspect-md-9-16 {
+        aspect-ratio: 9 / 16; /* 1:1.7 */
+    }
+
+    .aspect-md-1-2 {
+        aspect-ratio: 1 / 2; /* 1:2 */
+    }
+
+    .aspect-md-3-7,
+    .aspect-md-9-21 {
+        aspect-ratio: 3 / 7; /* 1:2.3 */
+    }
+
+    .aspect-md-1-3 {
+        aspect-ratio: 1 / 3; /* 1:3.0 */
+    }
+}

package/src/aspect/sm/horizontal.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Horizontal aspect ratio utilities
+\* =========================================================================== */
+
+@media (--c-bp-sm) {
+    .aspect-sm-1-1 {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-sm-5-4 {
+        aspect-ratio: 5 / 4; /* 1.25:1 */
+    }
+
+    .aspect-sm-4-3 {
+        aspect-ratio: 4 / 3; /* 1.3:1 */
+    }
+
+    .aspect-sm-7-5 {
+        aspect-ratio: 7 / 5; /* 1.4:1 */
+    }
+
+    .aspect-sm-3-2 {
+        aspect-ratio: 3 / 2; /* 1.5:1 */
+    }
+
+    .aspect-sm-16-9 {
+        aspect-ratio: 16 / 9; /* 1.7:1 */
+    }
+
+    .aspect-sm-2-1 {
+        aspect-ratio: 2 / 1; /* 2:1 */
+    }
+
+    .aspect-sm-7-3,
+    .aspect-sm-21-9 {
+        aspect-ratio: 7 / 3; /* 2.3:1 */
+    }
+
+    .aspect-sm-3-1 {
+        aspect-ratio: 3 / 1; /* 3.0:1 */
+    }
+}

package/src/aspect/sm/vertical.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Vertical aspect ratio utilities
+\* =========================================================================== */
+
+@media (--c-bp-sm) {
+    .aspect-sm-1-1 {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-sm-4-5 {
+        aspect-ratio: 4 / 5; /* 1:1.25 */
+    }
+
+    .aspect-sm-3-4 {
+        aspect-ratio: 3 / 4; /* 1:1.3 */
+    }
+
+    .aspect-sm-5-7 {
+        aspect-ratio: 5 / 7; /* 1:1.4 */
+    }
+
+    .aspect-sm-2-3 {
+        aspect-ratio: 2 / 3; /* 1:1.5 */
+    }
+
+    .aspect-sm-9-16 {
+        aspect-ratio: 9 / 16; /* 1:1.7 */
+    }
+
+    .aspect-sm-1-2 {
+        aspect-ratio: 1 / 2; /* 1:2 */
+    }
+
+    .aspect-sm-3-7,
+    .aspect-sm-9-21 {
+        aspect-ratio: 3 / 7; /* 1:2.3 */
+    }
+
+    .aspect-sm-1-3 {
+        aspect-ratio: 1 / 3; /* 1:3.0 */
+    }
+}

package/src/aspect/xl/horizontal.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Horizontal aspect ratio utilities
+\* =========================================================================== */
+
+@media (--c-bp-xl) {
+    .aspect-xl-1-1 {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-xl-5-4 {
+        aspect-ratio: 5 / 4; /* 1.25:1 */
+    }
+
+    .aspect-xl-4-3 {
+        aspect-ratio: 4 / 3; /* 1.3:1 */
+    }
+
+    .aspect-xl-7-5 {
+        aspect-ratio: 7 / 5; /* 1.4:1 */
+    }
+
+    .aspect-xl-3-2 {
+        aspect-ratio: 3 / 2; /* 1.5:1 */
+    }
+
+    .aspect-xl-16-9 {
+        aspect-ratio: 16 / 9; /* 1.7:1 */
+    }
+
+    .aspect-xl-2-1 {
+        aspect-ratio: 2 / 1; /* 2:1 */
+    }
+
+    .aspect-xl-7-3,
+    .aspect-xl-21-9 {
+        aspect-ratio: 7 / 3; /* 2.3:1 */
+    }
+
+    .aspect-xl-3-1 {
+        aspect-ratio: 3 / 1; /* 3.0:1 */
+    }
+}

package/src/aspect/xl/vertical.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Vertical aspect ratio utilities
+\* =========================================================================== */
+
+@media (--c-bp-xl) {
+    .aspect-xl-1-1 {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-xl-4-5 {
+        aspect-ratio: 4 / 5; /* 1:1.25 */
+    }
+
+    .aspect-xl-3-4 {
+        aspect-ratio: 3 / 4; /* 1:1.3 */
+    }
+
+    .aspect-xl-5-7 {
+        aspect-ratio: 5 / 7; /* 1:1.4 */
+    }
+
+    .aspect-xl-2-3 {
+        aspect-ratio: 2 / 3; /* 1:1.5 */
+    }
+
+    .aspect-xl-9-16 {
+        aspect-ratio: 9 / 16; /* 1:1.7 */
+    }
+
+    .aspect-xl-1-2 {
+        aspect-ratio: 1 / 2; /* 1:2 */
+    }
+
+    .aspect-xl-3-7,
+    .aspect-xl-9-21 {
+        aspect-ratio: 3 / 7; /* 1:2.3 */
+    }
+
+    .aspect-xl-1-3 {
+        aspect-ratio: 1 / 3; /* 1:3.0 */
+    }
+}

package/src/aspect/xs/horizontal.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Horizontal aspect ratio utilities
+\* =========================================================================== */
+
+@media (--c-bp-xs) {
+    .aspect-xs-1-1 {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-xs-5-4 {
+        aspect-ratio: 5 / 4; /* 1.25:1 */
+    }
+
+    .aspect-xs-4-3 {
+        aspect-ratio: 4 / 3; /* 1.3:1 */
+    }
+
+    .aspect-xs-7-5 {
+        aspect-ratio: 7 / 5; /* 1.4:1 */
+    }
+
+    .aspect-xs-3-2 {
+        aspect-ratio: 3 / 2; /* 1.5:1 */
+    }
+
+    .aspect-xs-16-9 {
+        aspect-ratio: 16 / 9; /* 1.7:1 */
+    }
+
+    .aspect-xs-2-1 {
+        aspect-ratio: 2 / 1; /* 2:1 */
+    }
+
+    .aspect-xs-7-3,
+    .aspect-xs-21-9 {
+        aspect-ratio: 7 / 3; /* 2.3:1 */
+    }
+
+    .aspect-xs-3-1 {
+        aspect-ratio: 3 / 1; /* 3.0:1 */
+    }
+}

package/src/aspect/xs/vertical.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Vertical aspect ratio utilities
+\* =========================================================================== */
+
+@media (--c-bp-xs) {
+    .aspect-xs-1-1 {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-xs-4-5 {
+        aspect-ratio: 4 / 5; /* 1:1.25 */
+    }
+
+    .aspect-xs-3-4 {
+        aspect-ratio: 3 / 4; /* 1:1.3 */
+    }
+
+    .aspect-xs-5-7 {
+        aspect-ratio: 5 / 7; /* 1:1.4 */
+    }
+
+    .aspect-xs-2-3 {
+        aspect-ratio: 2 / 3; /* 1:1.5 */
+    }
+
+    .aspect-xs-9-16 {
+        aspect-ratio: 9 / 16; /* 1:1.7 */
+    }
+
+    .aspect-xs-1-2 {
+        aspect-ratio: 1 / 2; /* 1:2 */
+    }
+
+    .aspect-xs-3-7,
+    .aspect-xs-9-21 {
+        aspect-ratio: 3 / 7; /* 1:2.3 */
+    }
+
+    .aspect-xs-1-3 {
+        aspect-ratio: 1 / 3; /* 1:3.0 */
+    }
+}

package/src/aspect/xxl/horizontal.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Horizontal aspect ratio utilities
+\* =========================================================================== */
+
+@media (--c-bp-xxl) {
+    .aspect-xxl-1-1 {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-xxl-5-4 {
+        aspect-ratio: 5 / 4; /* 1.25:1 */
+    }
+
+    .aspect-xxl-4-3 {
+        aspect-ratio: 4 / 3; /* 1.3:1 */
+    }
+
+    .aspect-xxl-7-5 {
+        aspect-ratio: 7 / 5; /* 1.4:1 */
+    }
+
+    .aspect-xxl-3-2 {
+        aspect-ratio: 3 / 2; /* 1.5:1 */
+    }
+
+    .aspect-xxl-16-9 {
+        aspect-ratio: 16 / 9; /* 1.7:1 */
+    }
+
+    .aspect-xxl-2-1 {
+        aspect-ratio: 2 / 1; /* 2:1 */
+    }
+
+    .aspect-xxl-7-3,
+    .aspect-xxl-21-9 {
+        aspect-ratio: 7 / 3; /* 2.3:1 */
+    }
+
+    .aspect-xxl-3-1 {
+        aspect-ratio: 3 / 1; /* 3.0:1 */
+    }
+}

package/src/aspect/xxl/vertical.css

@@ -0,0 +1,42 @@
+/* =========================================================================== *\
+    Vertical aspect ratio utilities
+\* =========================================================================== */
+
+@media (--c-bp-xxl) {
+    .aspect-xxl-1-1 {
+        aspect-ratio: 1 / 1; /* 1.0:1 */
+    }
+
+    .aspect-xxl-4-5 {
+        aspect-ratio: 4 / 5; /* 1:1.25 */
+    }
+
+    .aspect-xxl-3-4 {
+        aspect-ratio: 3 / 4; /* 1:1.3 */
+    }
+
+    .aspect-xxl-5-7 {
+        aspect-ratio: 5 / 7; /* 1:1.4 */
+    }
+
+    .aspect-xxl-2-3 {
+        aspect-ratio: 2 / 3; /* 1:1.5 */
+    }
+
+    .aspect-xxl-9-16 {
+        aspect-ratio: 9 / 16; /* 1:1.7 */
+    }
+
+    .aspect-xxl-1-2 {
+        aspect-ratio: 1 / 2; /* 1:2 */
+    }
+
+    .aspect-xxl-3-7,
+    .aspect-xxl-9-21 {
+        aspect-ratio: 3 / 7; /* 1:2.3 */
+    }
+
+    .aspect-xxl-1-3 {
+        aspect-ratio: 1 / 3; /* 1:3.0 */
+    }
+}

package/src/{base/base.css → base.css}

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Reasonable Base Defaults
+    Reasonable base defaults for some elements
 \* =========================================================================== */
 
 /**

package/src/config.css

@@ -1,8 +1,17 @@
 /* =========================================================================== *\
-    Cacao Configuration
+    Cacao configuration
+    Custom variables and media queries
 \* =========================================================================== */
 
-@custom-media --c-bp-sm (min-width: 36em);
-@custom-media --c-bp-md (min-width: 48em);
-@custom-media --c-bp-lg (min-width: 64em);
-@custom-media --c-bp-xl (min-width: 80em);
+/**
+ * These breakpoints are inspired by Pure. https://purecss.io/grids/#:~:text=%3C/div%3E-,Default%20Media%20Queries,-When%20using%20Responsive
+ * Cacao is a mobile-first system.
+ * Because of the use of em , these will scale with browser zoom and settings.
+ * 1em = 16px
+ */
+@custom-media --c-bp-xs (min-width: 27em); /* 432px */
+@custom-media --c-bp-sm (min-width: 36em); /* 576px */
+@custom-media --c-bp-md (min-width: 48em); /* 768px */
+@custom-media --c-bp-lg (min-width: 64em); /* 1024px */
+@custom-media --c-bp-xl (min-width: 80em); /* 1280px */
+@custom-media --c-bp-xxl (min-width: 100em); /* 1600px */

package/src/display/core/align.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Alignment Utilities
+    Alignment utilities
 \* =========================================================================== */
 
 .align-start {

package/src/display/core/display.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Display Utilities
+    Display utilities
 \* =========================================================================== */
 
 .flex {

package/src/display/core/flex.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Flexbox Utilities
+    Flexbox utilities
 \* =========================================================================== */
 
 .flex-row {

package/src/display/core/justify.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Justification Utilities
+    Justification utilities
 \* =========================================================================== */
 
 .justify-start {

package/src/display/core/order.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Order Utilities
+    Order utilities
 \* =========================================================================== */
 
 .order-1 {

package/src/display/core/print.css

@@ -0,0 +1,20 @@
+/* ===========================================================================
+    Print styles - show or hide content when printing
+=========================================================================== */
+
+/* Hide content when not printing */
+.print-show {
+    display: none;
+}
+
+@media print {
+    /* Hide content when printing */
+    .print-hide {
+        display: none m !important;
+    }
+
+    /* Show content only when printing */
+    .print-show {
+        display: block !important;
+    }
+}

package/src/display/lg/align.css

@@ -1,16 +1,16 @@
 /* =========================================================================== *\
-    Alignment Utilities
+    Alignment utilities
 \* =========================================================================== */
 
 @media (--c-bp-lg) {
     .align-start-lg {
         align-items: flex-start;
     }
-    
+
     .align-center-lg {
         align-items: center;
     }
-    
+
     .align-end-lg {
         align-items: flex-end;
     }

package/src/display/lg/display.css

@@ -1,24 +1,24 @@
 /* =========================================================================== *\
-    Display Utilities
+    Display utilities
 \* =========================================================================== */
 
 @media (--c-bp-lg) {
     .flex-lg {
         display: flex;
     }
-    
+
     .flex-inline-lg {
         display: inline-flex;
     }
-    
+
     .block-lg {
         display: block;
     }
-    
+
     .inline-lg {
         display: inline;
     }
-    
+
     .hidden-lg {
         display: none;
     }