cacao-css 3.14.0 → 3.17.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 3.17.0 (July 28, 2022)
+
+- Added u-size1of1 as an alternate class to u-sizeFull.
+
+## 3.16.0 (July 21, 2022)
+
+- Added `Image--fullWidth` class to make an image expand to full width.
+
+## 3.15.0 (May 12, 2022)
+
+- Added global box sizing style. Removed `box-sizing` from individual components.
+- Added ImageConstrain class to add size constraints to images.
+- Added portrait size options to the `Constrain` classes.
+
 ## 3.14.0 (May 12, 2022)
 
 - Removed the small screen font styles that cause the font to be smaller on small screens. This is no longer necessary with high resolution mobile phones.

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "cacao-css",
     "description": "A set of composable CSS modules that provide a solid foundation for starting a new project.",
-    "version": "3.14.0",
+    "version": "3.17.0",
     "main": "gulfile.js",
     "author": "Aptuitiv, Inc <hello@aptuitiv.com>",
     "license": "MIT",

package/src/css/base/base.css

@@ -119,3 +119,14 @@ button:focus {
 [hidden] {
     display: none !important;
 }
+
+/**
+ * Use a more intuitive box-sizing model
+ * See: https://www.joshwcomeau.com/css/custom-css-reset
+ */
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}

package/src/css/components/arrange/arrange.css

@@ -18,17 +18,13 @@
 }
 
 /**
- * 1. Protect against the component expanding beyond the confines of its
- *    container if properties affecting the box-model are applied to the
- *    component. Mainly necessary because of (5).
- * 2. Rely on table layout.
- * 3. Zero out the default spacing that might be on an element (e.g., `ul`).
- * 4. Make sure the component fills at least the full width of its parent.
- * 5. Reset the table-layout algorithm in case a component is nested.
+ * 1. Rely on table layout.
+ * 2. Zero out the default spacing that might be on an element (e.g., `ul`).
+ * 3. Make sure the component fills at least the full width of its parent.
+ * 4. Reset the table-layout algorithm in case a component is nested.
  */
 
 .Arrange {
-    box-sizing: border-box; /* 1 */
     display: table; /* 2 */
     margin: 0; /* 3 */
     min-width: 100%; /* 4 */

package/src/css/components/button/button.css

@@ -30,9 +30,7 @@
 }
 
 /**
- * 1. Normalize `box-sizing` across all elements that this component could be
- *    applied to.
- * 2. Prevent button text from being selectable.
+ * 1. Prevent button text from being selectable.
  */
 
 .Button {
@@ -40,7 +38,6 @@
     background: var(--Button-background);
     border: var(--Button-border);
     border-radius: var(--Button-border-radius);
-    box-sizing: border-box; /* 1 */
     color: var(--Button-color);
     cursor: pointer;
     display: inline-flex;

package/src/css/components/constrain/constrain.css

@@ -25,7 +25,6 @@
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
-    box-sizing: border-box;
     display: block;
     padding-bottom: 100%;
     width: 100%;
@@ -39,7 +38,14 @@
     background-size: contain;
 }
 
-/* Constrain ratios
+/* Square constrain ratio
+   ========================================================================== */
+
+.Constrain--1by1 {
+    padding-bottom: 100%;
+}
+
+/* Landscape constrain ratios
    ========================================================================== */
 
 .Constrain--5by4 {
@@ -75,6 +81,42 @@
     padding-bottom: 33.333333%;
 }
 
+/* Portrait constrain ratios
+   ========================================================================== */
+
+.Constrain--4by5 {
+    padding-bottom: 125%;
+}
+
+.Constrain--3by4 {
+    padding-bottom: 133.333333%;
+}
+
+.Constrain--2by3 {
+    padding-bottom: 150%;
+}
+
+.Constrain--5by8,
+.Constrain--10by16 {
+    padding-bottom: 160%;
+}
+
+.Constrain--3by5 {
+    padding-bottom: 166.666666%;
+}
+
+.Constrain--9by16 {
+    padding-bottom: 177.777777%;
+}
+
+.Constrain--1by2 {
+    padding-bottom: 200%;
+}
+
+.Constrain--1by3 {
+    padding-bottom: 300%;
+}
+
 /* Crop gravities
    ========================================================================== */
 

package/src/css/components/constrain/image.css

@@ -0,0 +1,29 @@
+/* =========================================================================== *\
+    Image constrain
+\* =========================================================================== */
+
+/**
+ * Constrains an image of unknown size to the specified aspect ratio.
+ * 
+ * Used in combination with .Constrain classes. An example would be:
+ * <div class="ImageConstrain Constrain--16by9"><img src="/my/image/here"></div>
+ */
+
+/** @define ImageConstrain */
+
+.ImageConstrain {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
+/* postcss-bem-linter: ignore */
+.ImageConstrain img {
+    height: 100%;
+    image-orientation: none;
+    left: 0;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    width: 100%;
+}

package/src/css/components/constrain/index.css

@@ -1 +1,2 @@
 @import './constrain';
+@import './image';

package/src/css/components/container/container.css

@@ -15,12 +15,9 @@
 
 /**
  * Fluid and centered by default.
- *
- * 1. Ensure that the container width includes margins & padding.
  */
 
 .Container {
-    box-sizing: border-box; /* 1 */
     margin-left: auto;
     margin-right: auto;
     max-width: var(--Container-width);

package/src/css/components/form/selectmenu.css

@@ -24,7 +24,6 @@
 .SelectInput {
     background: var(--SelectInput-background);
     border: var(--SelectInput-border);
-    box-sizing: border-box;
     color: var(--SelectInput-color);
     display: inline-block;
     outline: none;
@@ -58,7 +57,6 @@
     appearance: none; /* 1 */
     background: transparent; /* 1 */
     border: 0; /* 1 */
-    box-sizing: border-box;
     display: block;
     font-family: inherit;
     margin: 0; /* 1 */

package/src/css/components/form/textinput.css

@@ -21,7 +21,6 @@
     background: var(--TextInput-background);
     border: var(--TextInput-border);
     border-radius: 0;
-    box-sizing: border-box;
     color: var(--TextInput-color);
     outline: none;
     padding: var(--TextInput-padding);

package/src/css/components/grid/grid.css

@@ -29,7 +29,6 @@
  */
 
 .Grid {
-    box-sizing: border-box;
     display: flex; /* 1 */
     flex-flow: row wrap;
     list-style: none; /* 1 */
@@ -135,7 +134,6 @@
  */
 
 .Grid-cell {
-    box-sizing: inherit;
     flex: 0 0 100%; /* 1 */
     margin: 0;
     padding: 0;

package/src/css/components/image/image.css

@@ -17,7 +17,6 @@
  */
 
 .Image {
-    box-sizing: border-box;
     height: auto;
     margin-bottom: var(--Image-spacing);
     max-width: 100%;
@@ -44,6 +43,10 @@
     margin-left: 1em;
 }
 
+.Image--fullWidth {
+    width: 100%;
+}
+
 @media (--c-bp-sm) {
     .Image--left,
     .Image--right {

package/src/css/components/image/wrapper.css

@@ -6,7 +6,6 @@
 /* @define ImageWrapper */
 
 .ImageWrapper {
-    box-sizing: border-box;
     margin-bottom: var(--Image-spacing);
 }
 

package/src/css/components/media/media.css

@@ -22,7 +22,6 @@
    ========================================================================== */
 
 .Media {
-    box-sizing: border-box;
     display: flex;
 }
 

package/src/css/components/navigation/dropdown.css

@@ -28,7 +28,6 @@
 .Dropdown-menu {
     background: var(--Dropdown-background);
     box-shadow: 0 22px 35px 0 rgba(0, 0, 0, .1);
-    box-sizing: border-box;
     display: none;
     left: 0;
     list-style: none;
@@ -54,7 +53,6 @@
    ========================================================================== */
 
 .Dropdown-item {
-    box-sizing: border-box;
     position: relative;
 }
 
@@ -74,7 +72,6 @@
    ========================================================================== */
 
 .Dropdown-link {
-    box-sizing: border-box;
     color: var(--Dropdown-link-color);
     display: block;
     font-size: var(--Dropdown-fontSize);

package/src/css/components/navigation/footer.css

@@ -18,7 +18,6 @@
  */
 
 .FooterNav {
-    box-sizing: border-box;
     display: inline-block;
     font-size: var(--FooterNav-fontSize);
     line-height: var(--FooterNav-lineHeight);
@@ -33,7 +32,6 @@
 
 .FooterNav-item {
     border-left: 1px solid var(--FooterNav-link-color);
-    box-sizing: border-box;
     display: inline-block;
     padding: 0 20px;
 }
@@ -48,7 +46,6 @@
  */
 
 .FooterNav-link {
-    box-sizing: border-box;
     color: var(--FooterNav-link-color);
     display: block;
     text-decoration: none;

package/src/css/components/navigation/mainnav.css

@@ -19,7 +19,6 @@
  */
 
 .MainNav {
-    box-sizing: border-box;
     display: inline-block;
     font-family: var(--MainNav-fontFamily);
     font-size: var(--MainNav-fontSize);
@@ -34,7 +33,6 @@
  */
 
 .MainNav-item {
-    box-sizing: border-box;
     display: inline-block;
     margin-left: 1em;
 }
@@ -57,7 +55,6 @@
 
 .MainNav-link {
     background: var(--MainNav-link-background);
-    box-sizing: border-box;
     color: var(--MainNav-link-color);
     display: block;
     padding: .5em 1.5rem;

package/src/css/utils/size/size-lg.css

@@ -13,9 +13,6 @@
      * Specify the proportional width of an object.
      * Intentional redundancy build into each set of unit classes.
      * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
-     *
-     * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
-     *    http://git.io/vllMD
      */
 
     /* postcss-bem-linter: ignore */
@@ -167,9 +164,9 @@
      * Make an element the width of its parent.
      */
 
+    .u-lg-size1of1,
     .u-lg-size12of12,
     .u-lg-sizeFull {
-        box-sizing: border-box !important;
         display: block !important;
         width: 100% !important;
     }
@@ -180,7 +177,6 @@
      */
 
     .u-lg-sizeAuto {
-        box-sizing: border-box !important;
         height: auto !important;
         width: auto !important;
     }

package/src/css/utils/size/size-md.css

@@ -13,9 +13,6 @@
      * Specify the proportional width of an object.
      * Intentional redundancy build into each set of unit classes.
      * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
-     *
-     * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
-     *    http://git.io/vllMD
      */
 
     /* postcss-bem-linter: ignore */
@@ -167,9 +164,9 @@
      * Make an element the width of its parent.
      */
 
+    .u-md-size1of1,
     .u-md-size12of12,
     .u-md-sizeFull {
-        box-sizing: border-box !important;
         display: block !important;
         width: 100% !important;
     }
@@ -180,7 +177,6 @@
      */
 
     .u-md-sizeAuto {
-        box-sizing: border-box !important;
         height: auto !important;
         width: auto !important;
     }

package/src/css/utils/size/size-sm.css

@@ -13,9 +13,6 @@
      * Specify the proportional width of an object.
      * Intentional redundancy build into each set of unit classes.
      * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
-     *
-     * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
-     *    http://git.io/vllMD
      */
 
     /* postcss-bem-linter: ignore */
@@ -167,9 +164,9 @@
      * Make an element the width of its parent.
      */
 
+    .u-sm-size1of1,
     .u-sm-size12of12,
     .u-sm-sizeFull {
-        box-sizing: border-box !important;
         display: block !important;
         width: 100% !important;
     }
@@ -180,7 +177,6 @@
      */
 
     .u-sm-sizeAuto {
-        box-sizing: border-box !important;
         height: auto !important;
         width: auto !important;
     }

package/src/css/utils/size/size-xs.css

@@ -13,9 +13,6 @@
      * Specify the proportional width of an object.
      * Intentional redundancy build into each set of unit classes.
      * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
-     *
-     * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
-     *    http://git.io/vllMD
      */
 
     /* postcss-bem-linter: ignore */
@@ -167,9 +164,9 @@
      * Make an element the width of its parent.
      */
 
+    .u-xs-size1of1,
     .u-xs-size12of12,
     .u-xs-sizeFull {
-        box-sizing: border-box !important;
         display: block !important;
         width: 100% !important;
     }
@@ -180,7 +177,6 @@
      */
 
     .u-xs-sizeAuto {
-        box-sizing: border-box !important;
         height: auto !important;
         width: auto !important;
     }

package/src/css/utils/size/size.css

@@ -11,9 +11,6 @@
  * Specify the proportional width of an object.
  * Intentional redundancy build into each set of unit classes.
  * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
- *
- * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
- *    http://git.io/vllMD
  */
 
 /* postcss-bem-linter: ignore */
@@ -163,9 +160,9 @@
  * Make an element the width of its parent.
  */
 
+.u-size1of1,
 .u-size12of12,
 .u-sizeFull {
-    box-sizing: border-box !important;
     display: block !important;
     width: 100% !important;
 }