cacao-css 5.5.0 → 6.0.0

package/CHANGELOG.md

@@ -1,309 +0,0 @@
-# Changelog
-
-## 5.5.0 (August 14, 2024)
-
-- Fixed the vertical gutter styling to only affect the row-gap. Previously it was setting the `—gap` variable. This would affect the margin on an element if it also used the “grid” class because that used `—gap` to set the margin. That was not supposed to happen.
-  
-## 5.4.0 (August 2, 2024)
-
-- Removed aspect-ratio style from `embed`. Because this is set and the embed styles are typically loaded after the aspect ratio styles, this aspect-ratio style overrode the aspect-ratio class.
-
-## 5.3.0 (August 1, 2024)
-
-- Added "auto" width classes.
-
-## 5.2.0 (August 1, 2024)
-
-- Added width styles.
-
-## 5.1.0 (August 1, 2024)
-
-- Added inline-block breakpoint styles.
-- Added position styles.
-
-## 5.0.0 (July 18, 2024)
-
-- Added print styles.
-- Added push and pull classes.
-- Added `xs` and `xxl` breakpoint sizes.
-- **Breaking change**: Added responsive styles for aspect ratios. The imports for the `src/aspect` files needs to be updated.
-- **Breaking change**: Moved `embed` file to a "core" folder in case in the future we add responsive styles. The imports for the `src/embed` files need to be updated.
-- **Breaking change**: Added responsive styles for object fit utilities. The imports for the `src/fit` files needs to be updated.
-- **Breaking change**: Moved `image` file to a "core" folder in case in the future we add responsive styles. The imports for the `src/image` files need to be updated.
-- **Breaking change**: Moved `layout` file to a "core" folder in case in the future we add responsive styles. The imports for the `src/layout` files need to be updated.
-- **Breaking change**: Moved `links` file to a "core" folder in case in the future we add responsive styles. The imports for the `src/links` files need to be updated.
-- **Breaking change**: Moved `spacing` file to a "core" folder in case in the future we add responsive styles. The imports for the `src/spacing` files need to be updated.
-- **Breaking change**: Added responsive styles for typography. The imports for the `src/typography` files needs to be updated.
-- **Breaking change**: Moved the `reset/reset.css` and `base/base.css` file to the root folder. The imports will need to be adjsuted in your code.
-
-### Migration
-
-Compare the `imports.css` file to your own `imports.css` file and update accordingly.
-
-## 4.6.0 (Jul 15, 2024)
-
-- Added `col-fill` styles for a grid column that will fill the remaining space.
-  
-## 4.5.0 (Jul 10, 2024)
-
-- Set embeds not to shrink if they are in a flex container.
-- Removed the overflow hidden on grid columns.
-  
-## 4.4.0 (Feb 23, 2024)
-
-- Added `text-start`, `text-end`, and `text-justify` classes.
-
-## 4.3.0 (Jan 25, 2024)
-
-- Added `inline-block` class to set an element as `inline-block`
-
-### Breaking change
-
-- Renamed `flex-inline` to `inline-flex`. This was done to better match the actual style.
-
-## 4.2.2 (Dec 21, 2023)
-
-- Fixed the `image-left` and `image-right` classes to have the correct max width.
-
-## 4.2.1 (Dec 21, 2023)
-
-- Fixed the `image-left` and `image-right` classes to always have a bottom margin.
-
-## 4.2.0 (Dec 19, 2023) - Breaking change
-
-- Fixed the order of import examples. The gutter styles have to come after grid styles.
-- Breaking Change - Changed the aspect ratio styles into two separate files. `aspect/horizontal.css` and `aspect/vertical.css`. Imports will need to be updated. Also added new aspect ratios.
-
-## 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.
-- Changed breakpoints to use em instead of px.
-- Updated utility classes names to be more succinct.
-- Removed many rarely used classes.
-- Removed all component classes. You should provide you own components now for more flexibility.
-
-## 3.21.0 (May 11, 2023)
-
-- Updated b and strong to actually be bold.
-
-## 3.20.0 (April 28, 2023)
-
-- Take 3.... Updated more hover states to only be applied if hover is supported by the device.
-
-## 3.19.0 (April 28, 2023)
-
-- Take 2.... Updated more hover states to only be applied if hover is supported by the device.
-
-## 3.18.0 (April 28, 2023)
-
-- Updated hover states to only be applied if hover is supported by the device.
-
-## 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.
-
-## 3.13.0 (December 17, 2021)
-
-- Added smooth scrolling on the `<html>` tag by default.
-
-## 3.12.0 (December 3, 2021)
-
-- Added vertical margin spacing utilities.
-- Added full width/height utilities.
-
-## 3.11.0 (Sept 21, 2021)
-
-- Updated .Button class to use `display: inline-flexbox` instead of `display: inline`
-- Updated .TextInput to use `small`, `medium` and `large` class sizes
-- Added responsive flexbox classes
-- Added `margin-right` utility classes
-- Added `margin-left` utility classes
-- Fixed `u-textBreak` so that it uses `overflow-wrap` instead of `word-wrap`
-
-## 3.10.0 (July 28, 2021)
-
-Updated ColumnList--noStyle to also remove the left padding on the list.
-
-## 3.9.0 (April 1, 2021)
-
-- Removed the inline block fallback styles for the Grid component since Flexbox is widely supported in browsers now.
-
-## 3.8.0 (April 1, 2021)
-
-Skipped because this tag already accidentally existed.
-
-## 3.7.0 (Aug 19, 2020)
-
-- Updated the Gulp configuration to use modern techniques.
-- Added fallback styles for the select menu text when the select menu is focused.
-
-## 3.6.1 (Nov 19, 2018)
-
-- Fixed font issue for select menus
-
-## 3.6.0 (Jan 19, 2018)
-
-- Added auto size utility
-
-## 3.5.0 (Jan 19, 2018)
-
-- Set the button active/focus state.
-- Set the default state for the image wrapper to be inline-block so that the caption is under the image.
-
-## 3.4.0 (Nov 6, 2017)
-
-- Set a specific color for select input border.
-- Added default table border collapse styles.
-- Added basic print styles.
-
-## 3.3.0 (Oct 16, 2017)
-
-- Adjusted some of the font sizes and margins to be based of of rem and ems instead of pixels.
-    The goal is to improve accessibility and relative font sizing.
-
-## 3.2.0 (Oct 13, 2017)
-
-- Added ImageWrapper and ImageCaption classes.
-
-## 3.1.0 (Oct 13, 2017)
-
-- Moved the text input and select menu styles to be under the "forms" component.
-
-## 3.0.0 (Oct 13, 2017)
-
-- Changed the focus of Cacao to be just on the CSS. A Yeoman generator called [cacao-branchcms](https://github.com/aptuitiv/generator-cacao-branchcms) has been setup to bootstrap a site with Cacao, theme files, images and Javascript.
-
-## 2.8.0 (July 25, 2017)
-
-- Added notes about setting up a new site
-- Removed the 'default' value for the Javascript tag since it's default one already.
-- Updated packages and stylelint
-
-## 2.7.0 (July 7, 2017)
-
-- Fixed the order of the javascript in the footer.
-- Added support for copying theme files as a gulp task.
-- Updated stylelint.
-- Form templates - moved the field description to be below the field and to be a smaller font size.
-- Changed the default Javascript placement to be in the footer.
-- Updated slick carousel to the latest version.
-- Added drift-zoom library for zooming images when hovering over them.
-- Added "xl" utility selector size.
-- Changed the gulp-changed-in-place plugin for gulp-newer. That plugin works better with gulp-remember to combine all source files even if one changed. gulp-changed-in-place would only process the one changed file.
-
-## 2.6.0 (May 27, 2017)
-
-- Removed dist folder.
-- Updated packages to latest versions.
-- Included SVG files in the type of images to be processed.
-- Changed build path to 'build' instead of 'dist'.
-- Added theme files and moved all layout files to be built to build/theme/custom.
-- Added Header/Footer as default style components.
-- Updated navigation templates.
-- Added Breadcrumb default style.
-- Added list arrow styles.
-- Updated default button styles.
-- Added pagination styles.
-- Added default footer navigation.
-- Added default Content container styles.
-- Added default background utility style.
-- Added arrange component styles.
-- Added form templates.
-- Updated gulp watch task to use glob-watcher instead of gulp-batch as sometimes gulp-batch would stop recognizing changed files.
-- Added new 5/3 constrain size.
-- Added sidebar navigation.
-- Updated the BEM linter utilitySelector to include “xs-“ as a utility size.
-- Updated Constrain and FlexEmbed ratios to be consistent.
-- Updated form styles.
-- Added blog theme templates.
-- Added store theme templates.
-- Added ColumnList styles to convert an ul/ol list into columns.
-- Added jQuery form plugin as part of the core forms javascript.
-- Removed ap_drilldown_plugin.
-
-## 2.5.0 (February 12, 2017)
-
-- Changed '0%' to 'auto' for the flex grow utility classes as '0%' was causing issues in some versions of Safari.
-
-## 2.4.0 (November 25, 2016)
-
-- Added right margin to radio buttons and checkboxes.
-- Added default styles for disabled inputs.
-
-## 2.3.0 (November 16, 2016)
-
-- Fixed nunjucks support.
-- Added sample pages to the 'dist' directory to show different responsive navigation options.
-- Added two built-in responsive navigation options in the src/styles/lib/components/navigation folder.
-
-## 2.2.0 (November 9, 2016)
-
-- Added responsive styles for the typography utility classes.
-- Consolidated the dropdown and mainnav navigation components into one "navigation" component.
-- Added margin gutter utility classes.
-- Added responsive styles for all the padding utility classes.
-- Formatted code to have consistent line indents.
-- Added "u-block" responsive styles.
-- Added size12of12 as an alternate full width size class.
-
-## 2.1.0 (October 10, 2016)
-
-- Added left/right padding utilities.
-- Change the u-linkClean class to keep the link "clean" on hover.
-
-## 2.0.0 (September 26, 2016)
-
-- Combined Cacao and Cacao Cracker together to make it easier to get a project started
-- Added some additional documentation
-
-## 1.4.0 (September 18, 2016)
-
-- Added Form component for errors, labels and required elements
-- Added Message component for success and error messages
-
-## 1.3.0 (September 9, 2016)
-
-- Added telephone link styles
-- Changed container width from 960px to 1200px
-- Added extra large gutter sizes
-- Added utility text size classes
-- Changed default table column and header styles to have padding and top vertical alignment
-- Added config file to hold common breakpoints
-- Added responsive margin utility classes
-- Added arrow to the "Back" link for the mobile nav menu
-- Added extra small size utility classes
-
-## 1.2.1 (May 26, 2016)
-
-- Updated style lint to conform to version 4.5 where some rules were deprecated and renamed.
-
-## 1.2.0 (March 8, 2016)
-
-- Updated style lint max lines rule
-
-## 1.1.0 (February 8, 2016)
-
-- Added: visual test styles and tests for components
-
-## 1.0.0 (February 2, 2016)
-
-- Initial 1.0 release

package/Migrating-from-version3.md

@@ -1,172 +0,0 @@
-# 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-gutters*`             | `.px-*`     |
-| `.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-1-1` or `.w-100` |
-| `.u-size*of*`             | `.col-*-*` or `.w-*-*` |
-| `.u-textBreak`            | `.break-word`       |
-| `.u-textBreakAll`         | `.break-all`        |
-| `.u-textLeft`             | `.text-start`       |
-| `.u-textNoWrap`           | `.no-wrap`          |
-| `.u-textUpper`            | `.text-upper`       |
-| `.u-textCenter`           | `.text-center`      |
-| `.u-textRight`            | `.text-end`         |
-| `.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--withGutterSm` → `g-1`
-- `Grid--withGutter` → `g-2`
-- `Grid--withGutterLg` → `g-4`
-- `Grid--withGutterXlg` → `g-5` (although a `g-6` would be nice since the margin is about 60px)