cacao-css 6.0.0 → 6.2.0

package/README.md

@@ -1,24 +1,17 @@
 # Cacao
 
+Cacao is a utility class CSS library. It intentionally does not provide styles for specific components. Rather, it has utility classes for doing common things like grids, setting heights and widths, and gutters.
+
+> The `embed` style is the exception to that rule, but it only provides the minimal CSS to responsively embed an iframe.
+
 ## Installation
 
 Install Cacao via NPM:
 
 ```bash
-npm install cacao-css@4
+npm install cacao-css
 ```
 
-Add a copy of [imports.css](imports.css) to your project. This file allows you to configure what modules are included in your final project. This helps to keep the CSS lean and the performance high. The relative imports are expecting to be placed under "my-project/src/css/main.css". You may need to adjust the imports if using a different folder structure.
-
-Using the default imports, you get access to aspect ratios (used for embedded iframes), embeds, images, gutters, displays, margins, paddings, and a basic grid. You can uncomment out import lines to include specific modules. Responsive classes are not added by default and must be added by uncommenting an import for the responsive viewport.
-
-## Customization
-
-You can customize Cacao simply by overriding a class. You can also override the breakpoints by creating your own `@custom-media` directives as found in [config.css](src/config.css).
-
-## Resources
+## Documentation
 
-- [Changelog](./CHANGELOG.md)
-- [Development](./DEVELOPMENT.md)
-- [Local Testing](./LOCAL_TESTING.md)
-- [Migrating from version 3](./Migrating-from-version3.md)
+[View the documentation for Cacao CSS](https://aptuitiv.github.io/cacao/).

package/dist/aspect/2xl/combined-import.css

@@ -0,0 +1,6 @@
+/* =========================================================================== *
+   Aspect Ratio utilities - 2xl - imports all the 2xl aspect utility files
+ * =========================================================================== */
+
+@import './horizontal.css';
+@import './vertical.css';

package/dist/aspect/2xs/combined-import.css

@@ -0,0 +1,6 @@
+/* =========================================================================== *
+   Aspect Ratio utilities - 2xs - imports all the 2xs aspect utility files
+ * =========================================================================== */
+
+@import './horizontal.css';
+@import './vertical.css';

package/dist/aspect/3xl/combined-import.css

@@ -0,0 +1,6 @@
+/* =========================================================================== *
+   Aspect Ratio utilities - 3xl - imports all the 3xl aspect utility files
+ * =========================================================================== */
+
+@import './horizontal.css';
+@import './vertical.css';

package/dist/aspect/3xs/combined-import.css

@@ -0,0 +1,6 @@
+/* =========================================================================== *
+   Aspect Ratio utilities - 3xs - imports all the 3xs aspect utility files
+ * =========================================================================== */
+
+@import './horizontal.css';
+@import './vertical.css';

package/dist/aspect/4xl/combined-import.css

@@ -0,0 +1,6 @@
+/* =========================================================================== *
+   Aspect Ratio utilities - 4xl - imports all the 4xl aspect utility files
+ * =========================================================================== */
+
+@import './horizontal.css';
+@import './vertical.css';

package/dist/aspect/5xl/combined-import.css

@@ -0,0 +1,6 @@
+/* =========================================================================== *
+   Aspect Ratio utilities - 5xl - imports all the 5xl aspect utility files
+ * =========================================================================== */
+
+@import './horizontal.css';
+@import './vertical.css';

package/dist/aspect/combined-import.css

@@ -0,0 +1,6 @@
+/* =========================================================================== *
+   Aspect Ratio utilities - imports all the  aspect utility files
+ * =========================================================================== */
+
+@import './horizontal.css';
+@import './vertical.css';

package/dist/aspect/lg/combined-import.css

@@ -0,0 +1,6 @@
+/* =========================================================================== *
+   Aspect Ratio utilities - lg - imports all the lg aspect utility files
+ * =========================================================================== */
+
+@import './horizontal.css';
+@import './vertical.css';

package/dist/aspect/md/combined-import.css

@@ -0,0 +1,6 @@
+/* =========================================================================== *
+   Aspect Ratio utilities - md - imports all the md aspect utility files
+ * =========================================================================== */
+
+@import './horizontal.css';
+@import './vertical.css';

package/dist/aspect/sm/combined-import.css

@@ -0,0 +1,6 @@
+/* =========================================================================== *
+   Aspect Ratio utilities - sm - imports all the sm aspect utility files
+ * =========================================================================== */
+
+@import './horizontal.css';
+@import './vertical.css';

package/dist/aspect/xl/combined-import.css

@@ -0,0 +1,6 @@
+/* =========================================================================== *
+   Aspect Ratio utilities - xl - imports all the xl aspect utility files
+ * =========================================================================== */
+
+@import './horizontal.css';
+@import './vertical.css';

package/dist/aspect/xs/combined-import.css

@@ -0,0 +1,6 @@
+/* =========================================================================== *
+   Aspect Ratio utilities - xs - imports all the xs aspect utility files
+ * =========================================================================== */
+
+@import './horizontal.css';
+@import './vertical.css';

package/dist/display/2xl/combined-import.css

@@ -0,0 +1,10 @@
+/* =========================================================================== *
+   Display utilities - 2xl - imports all the 2xl display utility files
+ * =========================================================================== */
+
+@import './align.css';
+@import './display.css';
+@import './flex.css';
+@import './justify.css';
+@import './order.css';
+@import './print.css';

package/dist/display/2xs/combined-import.css

@@ -0,0 +1,10 @@
+/* =========================================================================== *
+   Display utilities - 2xs - imports all the 2xs display utility files
+ * =========================================================================== */
+
+@import './align.css';
+@import './display.css';
+@import './flex.css';
+@import './justify.css';
+@import './order.css';
+@import './print.css';

package/dist/display/3xl/combined-import.css

@@ -0,0 +1,10 @@
+/* =========================================================================== *
+   Display utilities - 3xl - imports all the 3xl display utility files
+ * =========================================================================== */
+
+@import './align.css';
+@import './display.css';
+@import './flex.css';
+@import './justify.css';
+@import './order.css';
+@import './print.css';

package/dist/display/3xs/combined-import.css

@@ -0,0 +1,10 @@
+/* =========================================================================== *
+   Display utilities - 3xs - imports all the 3xs display utility files
+ * =========================================================================== */
+
+@import './align.css';
+@import './display.css';
+@import './flex.css';
+@import './justify.css';
+@import './order.css';
+@import './print.css';

package/dist/display/4xl/combined-import.css

@@ -0,0 +1,10 @@
+/* =========================================================================== *
+   Display utilities - 4xl - imports all the 4xl display utility files
+ * =========================================================================== */
+
+@import './align.css';
+@import './display.css';
+@import './flex.css';
+@import './justify.css';
+@import './order.css';
+@import './print.css';

package/dist/display/5xl/combined-import.css

@@ -0,0 +1,10 @@
+/* =========================================================================== *
+   Display utilities - 5xl - imports all the 5xl display utility files
+ * =========================================================================== */
+
+@import './align.css';
+@import './display.css';
+@import './flex.css';
+@import './justify.css';
+@import './order.css';
+@import './print.css';

package/dist/display/combined-import.css

@@ -0,0 +1,10 @@
+/* =========================================================================== *
+   Display utilities - imports all the  display utility files
+ * =========================================================================== */
+
+@import './align.css';
+@import './display.css';
+@import './flex.css';
+@import './justify.css';
+@import './order.css';
+@import './print.css';

package/dist/display/lg/combined-import.css

@@ -0,0 +1,10 @@
+/* =========================================================================== *
+   Display utilities - lg - imports all the lg display utility files
+ * =========================================================================== */
+
+@import './align.css';
+@import './display.css';
+@import './flex.css';
+@import './justify.css';
+@import './order.css';
+@import './print.css';

package/dist/display/md/combined-import.css

@@ -0,0 +1,10 @@
+/* =========================================================================== *
+   Display utilities - md - imports all the md display utility files
+ * =========================================================================== */
+
+@import './align.css';
+@import './display.css';
+@import './flex.css';
+@import './justify.css';
+@import './order.css';
+@import './print.css';

package/dist/display/sm/combined-import.css

@@ -0,0 +1,10 @@
+/* =========================================================================== *
+   Display utilities - sm - imports all the sm display utility files
+ * =========================================================================== */
+
+@import './align.css';
+@import './display.css';
+@import './flex.css';
+@import './justify.css';
+@import './order.css';
+@import './print.css';

package/dist/display/xl/combined-import.css

@@ -0,0 +1,10 @@
+/* =========================================================================== *
+   Display utilities - xl - imports all the xl display utility files
+ * =========================================================================== */
+
+@import './align.css';
+@import './display.css';
+@import './flex.css';
+@import './justify.css';
+@import './order.css';
+@import './print.css';

package/dist/display/xs/combined-import.css

@@ -0,0 +1,10 @@
+/* =========================================================================== *
+   Display utilities - xs - imports all the xs display utility files
+ * =========================================================================== */
+
+@import './align.css';
+@import './display.css';
+@import './flex.css';
+@import './justify.css';
+@import './order.css';
+@import './print.css';

package/dist/embed/embed.css

@@ -4,19 +4,19 @@
 \* =========================================================================== */
 
 .embed {
-    position: relative;
-    height: 100%;
     flex-shrink: 0;
-    overflow: hidden;
+    height: 100%;
     max-width: 100%;
+    overflow: hidden;
+    position: relative;
 }
 
 .embed iframe,
 .embed object,
 .embed embed {
+    height: 100%;
+    left: 0;
     position: absolute;
     top: 0;
-    left: 0;
     width: 100%;
-    height: 100%;
 }

package/dist/grid-column/2xl/col-1.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 1's
+    Grid column size: 1's
 \* =========================================================================== */
 
 @media (--m-2xl) {

package/dist/grid-column/2xl/col-10.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 10's
+    Grid column size: 10's
 \* =========================================================================== */
 
 @media (--m-2xl) {

package/dist/grid-column/2xl/col-11.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 11's
+    Grid column size: 11's
 \* =========================================================================== */
 
 @media (--m-2xl) {

package/dist/grid-column/2xl/col-12.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 12's
+    Grid column size: 12's
 \* =========================================================================== */
 
 @media (--m-2xl) {

package/dist/grid-column/2xl/col-2.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 2's
+    Grid column size: 2's
 \* =========================================================================== */
 
 @media (--m-2xl) {

package/dist/grid-column/2xl/col-3.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 3's
+    Grid column size: 3's
 \* =========================================================================== */
 
 @media (--m-2xl) {

package/dist/grid-column/2xl/col-4.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 4's
+    Grid column size: 4's
 \* =========================================================================== */
 
 @media (--m-2xl) {

package/dist/grid-column/2xl/col-5.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 5's
+    Grid column size: 5's
 \* =========================================================================== */
 
 @media (--m-2xl) {

package/dist/grid-column/2xl/col-6.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 6's
+    Grid column size: 6's
 \* =========================================================================== */
 
 @media (--m-2xl) {

package/dist/grid-column/2xl/col-7.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 7's
+    Grid column size: 7's
 \* =========================================================================== */
 
 @media (--m-2xl) {

package/dist/grid-column/2xl/col-8.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 8's
+    Grid column size: 8's
 \* =========================================================================== */
 
 @media (--m-2xl) {

package/dist/grid-column/2xl/col-9.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 9's
+    Grid column size: 9's
 \* =========================================================================== */
 
 @media (--m-2xl) {

package/dist/grid-column/2xl/combined-import.css

@@ -0,0 +1,17 @@
+/* =========================================================================== *
+   Grid column utilities - 2xl - imports all the 2xl grid-column utility files
+ * =========================================================================== */
+
+@import './col-1.css';
+@import './col-10.css';
+@import './col-11.css';
+@import './col-12.css';
+@import './col-2.css';
+@import './col-3.css';
+@import './col-4.css';
+@import './col-5.css';
+@import './col-6.css';
+@import './col-7.css';
+@import './col-8.css';
+@import './col-9.css';
+@import './col-fill.css';

package/dist/grid-column/2xs/col-1.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 1's
+    Grid column size: 1's
 \* =========================================================================== */
 
 @media (--m-2xs) {

package/dist/grid-column/2xs/col-10.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 10's
+    Grid column size: 10's
 \* =========================================================================== */
 
 @media (--m-2xs) {

package/dist/grid-column/2xs/col-11.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 11's
+    Grid column size: 11's
 \* =========================================================================== */
 
 @media (--m-2xs) {

package/dist/grid-column/2xs/col-12.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 12's
+    Grid column size: 12's
 \* =========================================================================== */
 
 @media (--m-2xs) {

package/dist/grid-column/2xs/col-2.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 2's
+    Grid column size: 2's
 \* =========================================================================== */
 
 @media (--m-2xs) {

package/dist/grid-column/2xs/col-3.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 3's
+    Grid column size: 3's
 \* =========================================================================== */
 
 @media (--m-2xs) {

package/dist/grid-column/2xs/col-4.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 4's
+    Grid column size: 4's
 \* =========================================================================== */
 
 @media (--m-2xs) {

package/dist/grid-column/2xs/col-5.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 5's
+    Grid column size: 5's
 \* =========================================================================== */
 
 @media (--m-2xs) {

package/dist/grid-column/2xs/col-6.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 6's
+    Grid column size: 6's
 \* =========================================================================== */
 
 @media (--m-2xs) {

package/dist/grid-column/2xs/col-7.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 7's
+    Grid column size: 7's
 \* =========================================================================== */
 
 @media (--m-2xs) {

package/dist/grid-column/2xs/col-8.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 8's
+    Grid column size: 8's
 \* =========================================================================== */
 
 @media (--m-2xs) {

package/dist/grid-column/2xs/col-9.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 9's
+    Grid column size: 9's
 \* =========================================================================== */
 
 @media (--m-2xs) {

package/dist/grid-column/2xs/combined-import.css

@@ -0,0 +1,17 @@
+/* =========================================================================== *
+   Grid column utilities - 2xs - imports all the 2xs grid-column utility files
+ * =========================================================================== */
+
+@import './col-1.css';
+@import './col-10.css';
+@import './col-11.css';
+@import './col-12.css';
+@import './col-2.css';
+@import './col-3.css';
+@import './col-4.css';
+@import './col-5.css';
+@import './col-6.css';
+@import './col-7.css';
+@import './col-8.css';
+@import './col-9.css';
+@import './col-fill.css';

package/dist/grid-column/3xl/col-1.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 1's
+    Grid column size: 1's
 \* =========================================================================== */
 
 @media (--m-3xl) {

package/dist/grid-column/3xl/col-10.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 10's
+    Grid column size: 10's
 \* =========================================================================== */
 
 @media (--m-3xl) {

package/dist/grid-column/3xl/col-11.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 11's
+    Grid column size: 11's
 \* =========================================================================== */
 
 @media (--m-3xl) {

package/dist/grid-column/3xl/col-12.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 12's
+    Grid column size: 12's
 \* =========================================================================== */
 
 @media (--m-3xl) {

package/dist/grid-column/3xl/col-2.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 2's
+    Grid column size: 2's
 \* =========================================================================== */
 
 @media (--m-3xl) {

package/dist/grid-column/3xl/col-3.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 3's
+    Grid column size: 3's
 \* =========================================================================== */
 
 @media (--m-3xl) {

package/dist/grid-column/3xl/col-4.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 4's
+    Grid column size: 4's
 \* =========================================================================== */
 
 @media (--m-3xl) {

package/dist/grid-column/3xl/col-5.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 5's
+    Grid column size: 5's
 \* =========================================================================== */
 
 @media (--m-3xl) {

package/dist/grid-column/3xl/col-6.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 6's
+    Grid column size: 6's
 \* =========================================================================== */
 
 @media (--m-3xl) {

package/dist/grid-column/3xl/col-7.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 7's
+    Grid column size: 7's
 \* =========================================================================== */
 
 @media (--m-3xl) {

package/dist/grid-column/3xl/col-8.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 8's
+    Grid column size: 8's
 \* =========================================================================== */
 
 @media (--m-3xl) {

package/dist/grid-column/3xl/col-9.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Grid 9's
+    Grid column size: 9's
 \* =========================================================================== */
 
 @media (--m-3xl) {