cacao-css 5.0.0 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 5.1.0 (August 1, 2024)
+
+- Added inline-block breakpoint styles.
+- Added position styles.
+
 ## 5.0.0 (July 18, 2024)
 
 - Added print styles.

package/Migrating-from-version3.md

@@ -0,0 +1,167 @@
+# Migrating from version 3
+
+Migrating from version 3 to version 4 or 5 is a big change. We recommend that you stage the website somewhere becasue the update is disruptive until it's done.
+
+**Note:** \*\* **= option.** **Ex:** **\`**mt-\*\*\*`→`mt-2\`.
+
+## Number System
+
+The number system used throughout most of v3 is copied over to v4. For example: `mt-1` is equivalent to `margin-top: 10px;`.
+
+## Breakpoints
+
+Breakpoints have been updated to be mobile-first. Additionally, the actual breakpoint values have been changed to be more in line with other frameworks.
+
+These breakpoints are [inspired by Pure](https://purecss.io/grids/#:~:text=%3C/div%3E-,Default%20Media%20Queries,-When%20using%20Responsive) . We are moving to a mobile-first system. Because of the use of `em` , these will scale with browser zoom and settings.
+
+1em = 16px
+
+| Key  | Breakpoint | Screen   |
+| ---- | ---------- | -------- |
+| `sm` | > `36em`   | `576px`  |
+| `md` | > `48em`   | `768px`  |
+| `lg` | > `64em`   | `1024px` |
+| `xl` | > `80em`   | `1280px` |
+
+## Updated Classes
+
+| v3                        | v4                  |
+| ------------------------- | ------------------- |
+| `.u-cf`                   | `.clearfix`         |
+| `.u-cleanContent`         | `.last-child-sb-0`  |
+| `.u-hiddenVisually`       | `.visually-hidden`  |
+| `.u-hidden`               | `.hidden`           |
+| `.u-block`                | `.block`            |
+| `.u-inline`               | `.inline`           |
+| `.u-flex`                 | `.flex`             |
+| `.u-flexInline`           | `.inline-flex`      |
+| `.u-flexRowReverse`       | `.flex-reverse`     |
+| `.u-flexCol`              | `.flex-col`         |
+| `.u-flexColReverse`       | `.flex-col-reverse` |
+| `.u-flexJustifyStart`     | `.justify-start`    |
+| `.u-flexJustifyEnd`       | `.justify-end`      |
+| `.u-flexJustifyCenter`    | `.justify-center`   |
+| `.u-flexJustifyBetween`   | `.justify-between`  |
+| `.u-flexJustifyAround`    | `.justify-around`   |
+| `.u-flexAlignItemsStart`  | `.align-start`      |
+| `.u-flexAlignItemsEnd`    | `.align-end`        |
+| `.u-flexAlignItemsCenter` | `.align-center`     |
+| `.u-linkSubtle`           | `.link-subtle`      |
+| `.u-margTop*`             | `.mt-*`             |
+| `.u-margRight*`           | `.me-*`             |
+| `.u-margBottom*`          | `.mb-*`             |
+| `.u-margLeft*`            | `.ms-*`             |
+| `.u-padTop*`              | `.pt-*`             |
+| `.u-padRight*`            | `.pe-*`             |
+| `.u-padBottom*`           | `.pb-*`             |
+| `.u-padLeft*`             | `.ps-*`             |
+| `.u-posAbsolute`          | `.absolute`         |
+| `.u-posRelative`          | `.relative`         |
+| `.u-posStatic`            | `.static`           |
+| `.u-printHide`            | `.print-hide`       |
+| `.u-printShow`            | `.print-show`       |
+| `.u-heightFull`           | `.h-100`            |
+| `.u-widthFull`            | `.w-100`            |
+| `.u-size*of*`             | `.col-*-*`          |
+| `.u-textBreak`            | `.break-word`       |
+| `.u-textBreakAll`         | `.break-all`        |
+| `.u-textNoWrap`           | `.no-wrap`          |
+| `.u-textUpper`            | `.text-upper`       |
+| `.u-textCenter`           | `.text-center`      |
+| `.u-weightNormal`         | `.weight-normal`    |
+| `.u-weightBold`           | `.weight-bold`      |
+
+## Removed Classes
+
+- [`.u-align*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/align/align.css)
+- [`.u-inlineBlock`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/display/display.css#L52)
+- [`.u-table*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/display/display.css#L58)
+- [`.u-flexRow`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/flex/flex.css#L26)
+- [`.u-flexWrap`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/flex/flex.css#L47)
+- [`.u-flexAlignItemsStretch`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/flex/flex.css#L103)
+- [`.u-flexAlignItemsBaseline`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/flex/flex.css#L107C1-L107C26)
+- [`.u-flexAlignContent*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/flex/flex.css#L112)
+- [`.u-flexAlignSelf*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/flex/flex.css#L157)
+- [`.u-flexOrder*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/flex/flex.css#L185)
+- [`.u-flexGrow`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/flex/flex.css#L201)
+- [`.u-flexExpand`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/flex/flex.css#L231)
+- [`.u-img*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/image/image.css) [](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/layout/layout.css#L8)
+- [`.u-float*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/layout/layout.css#L32)
+- [`.u-nbfc`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/layout/layout.css#L44)
+- [`.u-nbfcAlt`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/layout/layout.css#L57)
+- [`.u-linkClean`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/link/link.css)
+- [`.u-linkObvious`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/link/link.css)
+- [`.u-linkNatural`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/link/link.css)
+- [`.u-linkComplex`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/link/link.css)
+- [`.u-guttersMarg*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/margin/gutters.css)
+- [`.u-spacedMarg*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/margin/spaced.css)
+- [`.u-gutters*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/padding/gutters.css)
+- [`.u-spaced*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/padding/spaced.css) replaced with vertical padding `.py-*`
+- [`.u-pull*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/pull/pull.css) , spiritually succeeded by `.order-*`. But, there are also `.pull-` classes if you just need to move something to the left.
+- [`.u-push*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/push/push.css) , spiritually succeeded by `.order-*`. But, there are also `.push-` classes if you just need to move something to the right.
+- [`.u-radius*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/radius/radius.css)
+- [`.u-text*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/typography/typography.css#L30) , exceptions for `.u-textUpper` and `.u-textCenter`.
+- [`.u-style*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/typography/typography.css#L41)
+- [`.u-weight*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/typography/typography.css#L67) , exceptions for `.u-weightNormal` and `.u-weightBold`.
+- [`.u-fontSize*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/typography/typography.css#L98)
+
+## Components
+
+All components have been removed from Cacao. The purpose of Cacao has pivoted to being only a reset/base and core utilities.
+
+### Changed to a Utility
+
+- [`.Constrain`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/constrain/constrain.css) → `.aspect`. Many options removed.
+- [`.FlexEmbed`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/flexembed/flexembed.css) → `.embed`. Use `.aspect` for an aspect ratio.
+- [`.Grid`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/grid/grid.css) → `.grid`. Alignment and gutters can be handled using the new Flex utilities.
+- [`.Image--*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/image/image.css) → `.image-*`. Only ported options for `left` and `right`.
+
+### Removed
+
+- [`.Arrange`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/arrange/arrange.css)
+- [`.Breadcrumb`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/breadcrumb/breadcrumb.css)
+- [`.Button`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/button/button.css)
+- [`.Container`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/container/container.css)
+- [`.Content`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/content/content.css)
+- [`.FormError`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/form/error.css)
+- [`.FormLabel`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/form/label.css)
+- [`.FormRequired`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/form/required.css)
+- [`.SelectInput`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/form/selectmenu.css)
+- [`.FormSuccess`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/form/success.css)
+- [`.TextInput`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/form/textinput.css)
+- [`.ImageCaption`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/image/caption.css)
+- [`.ImageWrapper`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/image/wrapper.css)
+- [`.ColumnList`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/list/columns.css)
+- [`.List`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/list/list.css)
+- [`.Media`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/media/media.css)
+- [`.Message`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/message/message.css)
+- [`.NavBar`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/navigation/bar.css)
+- [`.Dropdown`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/navigation/dropdown.css)
+- [`.FooterNav`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/navigation/footer.css)
+- [`.MainNav`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/navigation/mainnav.css)
+- [`.SidebarNav`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/navigation/sidebar.css)
+- [`.SmScBtn`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/navigation/small-screen-button.css)
+- [`.Pagination`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/pagination/pagination.css)
+- [`.Triangle`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/triangle/triangle.css)
+
+## Grid styles
+
+### Equal height grids
+
+Remove `Grid--equalHeight` from the grid div.
+
+Add `flex` class to the grid column divs.
+
+### Aligning cells
+
+Change these classes on the grid div.
+
+- `Grid--alignBottom` → `align-end`
+- `Grid--alignMiddle` → `align-center`
+- `Grid-alignCenter` → `justify-center`
+- `Grid--alignRight` → `justify-right`
+
+### Grid gutters
+
+- `Grid--withGutter` → `g-2`
+- `Grid--withGutterXlg` → `g-5` (although a `g-6` would be nice since the margin is about 60px)

package/imports.css

@@ -13,7 +13,7 @@
     modules that your project needs. This keeps the CSS lean and mean.
 \* =========================================================================== */
 
-/* stylelint-disable comment-empty-line-before */
+/* stylelint-disable comment-empty-line-before -- Disabled so that an extra line isn't added between each commented out code line. */
 
 /* ------------------------------------ *\
     Core files that should always be included
@@ -32,8 +32,8 @@
     Aspect Ratios
 \* ------------------------------------ */
 
-@import '../../node_modules/cacao-css/src/aspect/horizontal.css';
-/* @import '../../node_modules/cacao-css/src/aspect/vertical.css'; */
+@import '../../node_modules/cacao-css/src/aspect/core/horizontal.css';
+/* @import '../../node_modules/cacao-css/src/aspect/core/vertical.css'; */
 
 /* Aspect Ratios (xs) */
 
@@ -134,30 +134,24 @@
     Fit
 \* ------------------------------------ */
 
-/* @import '../../node_modules/cacao-css/src/fit/fit.css'; */
+/* @import '../../node_modules/cacao-css/src/fit/core/fit.css'; */
 
 /* Fit (xs) */
-
 /* @import '../../node_modules/cacao-css/src/fit/xs/fit.css'; */
 
 /* Fit (sm) */
-
 /* @import '../../node_modules/cacao-css/src/fit/sm/fit.css'; */
 
 /* Fit (md) */
-
 /* @import '../../node_modules/cacao-css/src/fit/md/fit.css'; */
 
 /* Fit (lg) */
-
 /* @import '../../node_modules/cacao-css/src/fit/lg/fit.css'; */
 
 /* Fit (xl) */
-
 /* @import '../../node_modules/cacao-css/src/fit/xl/fit.css'; */
 
 /* Fit (xxl) */
-
 /* @import '../../node_modules/cacao-css/src/fit/xxl/fit.css'; */
 
 /* ------------------------------------ *\
@@ -711,6 +705,30 @@
 /* @import '../../node_modules/cacao-css/src/push/xxl/push-11.css'; */
 /* @import '../../node_modules/cacao-css/src/push/xxl/push-12.css'; */
 
+/* ------------------------------------ *\
+    Position
+\* ------------------------------------ */
+
+/* @import '../../node_modules/cacao-css/src/position/core/position.css'; */
+
+/* Position (xs) */
+/* @import '../../node_modules/cacao-css/src/position/xs/position.css'; */
+
+/* Position (sm) */
+/* @import '../../node_modules/cacao-css/src/position/sm/position.css'; */
+
+/* Position (md) */
+/* @import '../../node_modules/cacao-css/src/position/md/position.css'; */
+
+/* Position (lg) */
+/* @import '../../node_modules/cacao-css/src/position/lg/position.css'; */
+
+/* Position (xl) */
+/* @import '../../node_modules/cacao-css/src/position/xl/position.css'; */
+
+/* Position (xxl) */
+/* @import '../../node_modules/cacao-css/src/position/xxl/position.css'; */
+
 /* ------------------------------------ *\
     Size
 \* ------------------------------------ */
@@ -718,27 +736,21 @@
 /* @import '../../node_modules/cacao-css/src/size/core/size.css'; */
 
 /* Size (xs) */
-
 /* @import '../../node_modules/cacao-css/src/size/xs/size.css'; */
 
 /* Size (sm) */
-
 /* @import '../../node_modules/cacao-css/src/size/sm/size.css'; */
 
 /* Size (md) */
-
 /* @import '../../node_modules/cacao-css/src/size/md/size.css'; */
 
 /* Size (lg) */
-
 /* @import '../../node_modules/cacao-css/src/size/lg/size.css'; */
 
 /* Size (xl) */
-
 /* @import '../../node_modules/cacao-css/src/size/xl/size.css'; */
 
 /* Size (xxl) */
-
 /* @import '../../node_modules/cacao-css/src/size/xxl/size.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.0.0",
+    "version": "5.1.0",
     "author": "Aptuitiv, Inc <hello@aptuitiv.com>",
     "license": "MIT",
     "repository": {

package/src/display/lg/display.css

@@ -19,6 +19,10 @@
         display: inline;
     }
 
+    .inline-block-lg {
+        display: inline-block;
+    }
+
     .hidden-lg {
         display: none;
     }

package/src/display/md/display.css

@@ -19,6 +19,10 @@
         display: inline;
     }
 
+    .inline-block-md {
+        display: inline-block;
+    }
+
     .hidden-md {
         display: none;
     }

package/src/display/sm/display.css

@@ -19,6 +19,10 @@
         display: inline;
     }
 
+    .inline-block-sm {
+        display: inline-block;
+    }
+
     .hidden-sm {
         display: none;
     }

package/src/display/xl/display.css

@@ -19,6 +19,10 @@
         display: inline;
     }
 
+    .inline-block-xl {
+        display: inline-block;
+    }
+
     .hidden-xl {
         display: none;
     }

package/src/display/xs/display.css

@@ -19,6 +19,10 @@
         display: inline;
     }
 
+    .inline-block-xs {
+        display: inline-block;
+    }
+
     .hidden-xs {
         display: none;
     }

package/src/display/xxl/display.css

@@ -19,6 +19,10 @@
         display: inline;
     }
 
+    .inline-block-xxl {
+        display: inline-block;
+    }
+
     .hidden-xxl {
         display: none;
     }

package/src/position/core/position.css

@@ -0,0 +1,23 @@
+/* =========================================================================== *\
+   Positioning utilities
+\* =========================================================================== */
+
+.absolute {
+    position: absolute;
+}
+
+.fixed {
+    position: fixed;
+}
+
+.relative {
+    position: relative;
+}
+
+.static {
+    position: static;
+}
+
+.sticky {
+    position: sticky;
+}

package/src/position/lg/position.css

@@ -0,0 +1,25 @@
+/* =========================================================================== *\
+   Positioning utilities
+\* =========================================================================== */
+
+@media (--c-bp-lg) {
+    .absolute-lg {
+        position: absolute;
+    }
+
+    .fixed-lg {
+        position: fixed;
+    }
+
+    .relative-lg {
+        position: relative;
+    }
+
+    .static-lg {
+        position: static;
+    }
+
+    .sticky-lg {
+        position: sticky;
+    }
+}

package/src/position/md/position.css

@@ -0,0 +1,25 @@
+/* =========================================================================== *\
+   Positioning utilities
+\* =========================================================================== */
+
+@media (--c-bp-md) {
+    .absolute-md {
+        position: absolute;
+    }
+
+    .fixed-md {
+        position: fixed;
+    }
+
+    .relative-md {
+        position: relative;
+    }
+
+    .static-md {
+        position: static;
+    }
+
+    .sticky-md {
+        position: sticky;
+    }
+}

package/src/position/sm/position.css

@@ -0,0 +1,25 @@
+/* =========================================================================== *\
+   Positioning utilities
+\* =========================================================================== */
+
+@media (--c-bp-sm) {
+    .absolute-sm {
+        position: absolute;
+    }
+
+    .fixed-sm {
+        position: fixed;
+    }
+
+    .relative-sm {
+        position: relative;
+    }
+
+    .static-sm {
+        position: static;
+    }
+
+    .sticky-sm {
+        position: sticky;
+    }
+}

package/src/position/xl/position.css

@@ -0,0 +1,25 @@
+/* =========================================================================== *\
+   Positioning utilities
+\* =========================================================================== */
+
+@media (--c-bp-xl) {
+    .absolute-xl {
+        position: absolute;
+    }
+
+    .fixed-xl {
+        position: fixed;
+    }
+
+    .relative-xl {
+        position: relative;
+    }
+
+    .static-xl {
+        position: static;
+    }
+
+    .sticky-xl {
+        position: sticky;
+    }
+}

package/src/position/xs/position.css

@@ -0,0 +1,25 @@
+/* =========================================================================== *\
+   Positioning utilities
+\* =========================================================================== */
+
+@media (--c-bp-xs) {
+    .absolute-xs {
+        position: absolute;
+    }
+
+    .fixed-xs {
+        position: fixed;
+    }
+
+    .relative-xs {
+        position: relative;
+    }
+
+    .static-xs {
+        position: static;
+    }
+
+    .sticky-xs {
+        position: sticky;
+    }
+}

package/src/position/xxl/position.css

@@ -0,0 +1,25 @@
+/* =========================================================================== *\
+   Positioning utilities
+\* =========================================================================== */
+
+@media (--c-bp-xxl) {
+    .absolute-xxl {
+        position: absolute;
+    }
+
+    .fixed-xxl {
+        position: fixed;
+    }
+
+    .relative-xxl {
+        position: relative;
+    }
+
+    .static-xxl {
+        position: static;
+    }
+
+    .sticky-xxl {
+        position: sticky;
+    }
+}