Two years ago, we launched CodyFrame v2. In June 2019, the framework was downloaded about 500 times. Last month, it was downloaded almost 7000 times. We're still small, but we keep growing! 💪

Today we're introducing the next chapter: CodyFrame v3! The new version is not a revolution. Any 'major' change we had in mind over the last 2 years was packed into a 2.x version. The core of the framework remains unchanged. There is, however, some cool new stuff we're thrilled to show!

Explore the new features:

• New: SASS modules
• Updated: colors
• Updated: grid
• Updated: spacing and typography
• Breaking changes
• How to upgrade
• Browser support

New - SASS Modules #

We've integrated the SASS module system, which is a powerful new way to import SCSS files and their dependencies.

One of the advantages is how easy it is to modify default framework settings. For example, here's how to set the breakpoints and the grid columns:

@use 'base' with (
  $breakpoints: (
    'xs': 32rem,
    'sm': 48rem,
    'md': 64rem,
    'lg': 80rem,
    'xl': 90rem
  ),
  $grid-columns: 12
);

The component dependencies are now declared in the component code using the @use rule.

@use '../base' as *;
@use '_1_custom-select.scss' as *;
@use '_1_radios-checkboxes.scss' as *;

/* -------------------------------- 

File#: _2_checkout
Title: Checkout

-------------------------------- */

.checkout {
  position: relative;
  z-index: 1;
}

// ...

The indexes ('_2_' in the above example), previously used to import the SCSS files in the right order, are no longer necessary. However, we're keeping them to prevent issues in case your project is running on CodyFrame 2.

Also, the @use rules will be ignored if you're using CodyFrame 2, so don't worry if they're included in the code of the components from now on.

Updated - Colors #

The new color system includes 4 variations of the background color:

• --color-bg-lighter
• --color-bg-light
• --color-bg
• --color-bg-dark
• --color-bg-darker 

Therefore, all the utility classes have been integrated with the new background variations. For example, you can use .bg-dark to set a darker background color.

While this may sound like a minor change, it's not: the new variations allow you to set proper elevation levels and create perfect-working color themes with no need to create 'theme specific' CSS.

We're using the new background color variations in our components. If you have a CodyFrame 2 project you're working on, you can either copy the SCSS generated by the color editor and paste it in your 'custom-style/_colors.scss' file, or add the new background colors manually.

For example:

:root, [data-theme="default"] {
  // background
  @include defineColorHSL(--color-bg-darker, 210, 4%, 89%);
  @include defineColorHSL(--color-bg-dark, 180, 3%, 94%);
  @include defineColorHSL(--color-bg, 0, 0%, 100%);
  @include defineColorHSL(--color-bg-light, 180, 3%, 100%);
  @include defineColorHSL(--color-bg-lighter, 210, 4%, 100%);

  // color contrasts
  @include defineColorHSL(--color-contrast-lower, 180, 1%, 84%);
  @include defineColorHSL(--color-contrast-low, 210, 2%, 64%);
  @include defineColorHSL(--color-contrast-medium, 204, 2%, 46%);
  @include defineColorHSL(--color-contrast-high, 210, 7%, 21%);
  @include defineColorHSL(--color-contrast-higher, 204, 28%, 7%);
}

Oh, we've also included a new dark theme in the framework! 🌚

Updated - Grid System #

CodyFrame grid system is based on flexbox. In v3, we're getting rid of the negative margin hack used to create the grid gaps, and we're replacing them with the Gap property.

Negative margins can cause a few problems, in particular when you nest a grid element into another. These problems are finally gone (although we're still using margins as a fallback for older browsers)!

One new feature is the possibility to modify the number of grid columns using the .grid-col-{numberOfColumns} utility classes.

Example:

<div class="grid grid-col-5">
  <!-- 👆 you're creating a grid with 5 columns -->
</div>

Updated: Spacing and Typography #

The spacing and typography systems now use Rem units, but we're still offering the powerful compounding effects of the Em units.

Here's how:

You can still edit the whole spacing and typography systems by updating a single variable, thanks to the CSS custom properties:

// 👇 at the medium breakpoint, increase all spacing variables by 1.5625 and all typography variables by 1.15
@include breakpoint(md) {
  :root {
    --space-unit:  1.5625rem;
    --text-base-size: 1.25rem;
  }
}

If, for example, you have a component with tons of text elements and you want to reduce the font size of all of them at once, you can switch to Em units using the text-unit utility classes:

<!-- 👇 switch to Em units + reduce text-size of all children proportionally using .text-sm  -->
<div class="text-unit-em text-sm">
  <h1 class="text-md">Title</h1>
  <p class="text-sm">Lorem ipsum dolor sit.</p>
  <!-- ... -->
</div>

or the --text-unit custom property. For example, on the text-component, in the 'custom-style/_typography.scss' file, we set Em units for both spacing and typography:

.text-component {
  --text-unit: 1em;
  --space-unit: 1em;
}

If you prefer using the Em (or Pixel) units, you can still do so by editing your custom style. Check our typography and spacing documentation pages for more info.

Breaking changes #

• the .form-error-msg class has been deprecated and replaced by utility classes (example).
• the .radio-list and .checkbox-list classes have been deprecated (see radio/checkbox component).
• the gridFallback mixin has been deprecated (we no longer support IE11).
• the .zindex-{value} classes have been replaced by .z-index-{value} (more info).
• the --zindex-{value} variables have been replaced by --z-index-{value}
• the .media-wrapper has been deprecated and replaced by the aspect-ratio classes.
• the .v-space-{value} classes have been replaced by .text-space-y-{value} (more info).
• the --text-vspace-multiplier variables have been replaced by --text-space-y-multiplier
• the .hidden class is replaced by .invisible (more info).
• the .has-margin@{breakpoint} and .has-padding@{breakpoint} classes have been deprecated (use the margin and padding utility classes).

How to upgrade #

If you're running a project on CodyFrame v2: 

• make sure to upgrade to v2.9.1
• integrate the new background color variations

We've made all the components compatible with both CodyFrame 2.9.1 and 3 and we're not discontinuing v2 (e.g., if we create a new util class in CodyFrame v3, we'll include it into v2 as well).

In other words, if you upgrade to the latest 2.x version and integrate the background color variations, you can continue using v2. 

If you want to upgrade to v3:

• make sure to check all the breaking changes listed above
• switch from node-sass to dart-sass
• add @use '../base' as *; on top of all your custom-style/* files (see the custom-style files in CodyFrame 3).

Browser support #

CodyFrame supports the latest, stable releases of all major browsers. We're dropping support for IE11; you can still use CodyFrame 2.9 if you need to support IE ;)