Added 'Get Started' Guidelines in index.html

2.7.5

Added 'Get Started' Guidelines in index.html

Fixed minor grid issue

• Added flex-grow: 0 to the .col-content class. Now you can switch from .col (auto-sized column) to .col-content (column size determined by content) at a specific breakpoint.

<div class="grid">
  <button class="btn btn--primary col col-content@md">Button</button>
</div>

• Moved the text size classes (e.g., .text-xl) to the _util.scss partial. Now they have higher specificity compared to the base style of the form elements (e.g., legend and label elements).

Revert to Base folder with partials

We've been listening to the feedback we've received following the release of version 2.7.0 ("Simplified Framework Structure"). We've tested the option of importing specific (base) partials, but our solution didn't work with the new SASS Module System if the _base.scss is imported multiple times within the same file.

We've decided to bring back the Base folder with the partials.

If you're using the $cody-base-partials variable introduced in v2.7.1 to import specific partials, it still works. However, we suggest importing directly the partials because this variable will be deprecated in v3.0.

// ⚠️  it still works
$cody-base-partials: 'breakpoints', 'mixins';
@import 'base';

// ✅ better solution
@import '~codyhouse-framework/main/assets/css/base/breakpoints';
@import '~codyhouse-framework/main/assets/css/base/mixins';

However, if you're using the new SASS modules, you can't update the variable using the "with" configuration:

// ❌ this won't work
@use 'base' as * with (
  $cody-base-partials: 'breakpoints' 'mixins',
);

// ✅ this works
@use '~codyhouse-framework/main/assets/css/base/breakpoints' as *;
@use '~codyhouse-framework/main/assets/css/base/mixins' as *;

New utility classes

v.2.7.2 includes the following new utility classes:

• .margin-0, .margin-{side}-0, .padding-0, .padding-{side}-0
• .text-justify (including responsive modifiers; e.g., .text-justify@md)
• .cursor-default
• .color-opacity-0, .border-opacity-0, .bg-opacity-0
• .width-0, .height-0
• .radius-full (border-radius: 50em)

Added option to import specific _base.scss partials

The _base.scss file is composed of 15 sections (partials). Use the $cody-base-partials SCSS variable to import only specific partials:

// optional -> import only specific _base.scss partials

// $cody-base-partials: 'accessibility', 'breakpoints', 'buttons', 'colors', 'forms', 'grid-layout', 'icons', 'mixins', 'reset', 'shared-styles', 'spacing', 'typography', 'util', 'visibility', 'z-index';

// example 👇 - import only breakpoints and mixins
$cody-base-partials: 'breakpoints', 'mixins';
@import 'base';

Simplified framework file structure

v.2.7.0 is all about simplifying the framework file structure. We've decided to remove the /base folder and include all the base rules directly in the _base.scss file.

This change shouldn't affect in any way existing users. It's safe to assume all users are importing the _base.scss file of the framework in their project, and they can safely continue to do so.

We've improved the custom-style templates (the .scss files included in the /custom-style folder) by adding more comments and custom properties that were previously hidden in the documentation.

If you're upgrading to v.2.7.0 -> we've removed the default background color and color for the buttons in the _base.scss file. It means that in the rare case you didn't set any style in the /custom-style/_buttons.scss file for your buttons, you should at least add a background color and a color:

// make sure you've at least set a very basic style for your buttons in the custom-style/_buttons.scss file
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn--subtle {
  background-color: var(--color-contrast-lower);
  color: var(--color-contrast-higher);
}

.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-white);
}

New util classes + style.css import minor changes (index.html)

🆕 Added the following new utility classes:

• .font-italic;
• .z-index-header, .z-index-popover, .z-index-fixed-element and .z-index-overlay;
• .isolate, .blend-multiply and .blend-overlay to create blend effects;
• .flip, .flip-x and .flip-y.

🔬 Modified the way the style.css file is included in the index.html

v2.6.1: New util classes + elastic easing function

- Added .text-xxxxl and .text-xxxxl@{breakpoint} util classes;
- Added .momentum-scrolling and .overscroll-contain util classes;
- Adding custom breakpoints will now modify the responsive helper classes;
- Added new JS  elastic easing function.

New util classes + easing functions

• Added .backdrop-blur-10 and .backdrop-blur-20 utility classes to created blurred background effects;
• Added .pointer-events-auto utility class (in case you're using .pointer-events-none on a parent element and you want the child to be interactive);
• Added new JS easing functions;
• Added .icon--xxxs and .icon--xxxl utility classes

New .col-content grid class

• 🆕 Apply the col-content class to a grid item and its width will depend on its content (e.g., you can have a full width button by applying the col-12 class, and then resize it to "auto" width at a specific breakpoint by applying col-content@md)
• 🆕 Use the print:is-hidden class to hide an element if the page is printed