CodyFrame v3.0.0

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.25
@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 (see Colors section 👆)

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 ;)

CodyFrame v2.9.0

(no breaking changes)

The purpose of this release is to have a version compatible with the upcoming changes of v3.

CodyFrame v3 will include new utility classes and a modified color theme system. These changes are included in this release too. By doing so, we're ensuring the components, once updated, will be compatible with both v2 and v3 projects.

What's changed:

New: Default Dark Theme
New: Background Color Variations
New: Utility Classes
Deprecated: --text-vspace-multiplier
Deprecated: --zindex-{value}

New: Default Dark Theme

We've included a default dark theme in the custom-style/_colors.scss file. This change won't affect the color palette of your project because it's not included in the basic style (you won't import this change if you update the node module).

New: Background Color Variations

We've included 4 new colors in the color palette (in the custom-style/_colors.scss file):

bg-lighter
bg-light
bg-dark
bg-darker

While you can ignore this change in the existing projects (this change won't be imported if you update the node module), some components may be updated with the new colors. You can update your color palette using the color editor; the generated code won't affect the current color palette of your project; it will only add four new colors.

We'll share more information about how the new color system works as soon as we release v3.

New: Utility Classes

We've included a bunch of new utility classes:

sr-only-focusable
inner-glow
background-position classes
radius-inherit
responsive max-width modifiers
flex-nowrap
and more...

More info on the new util classes as soon as we release v3.

Deprecated: --text-vspace-multiplier

The --text-vspace-multiplier variable is replaced with the --text-space-y-multiplier variable. Also, the .v-space-{size} utility classes are replaced with the .text-space-y-{size} classes.

However, v2.9.0 includes a fallback for the depracated version so they will still work in your projects.

Deprecated: --zindex-{value}

The --zindex-{value} variables are replaced with the --z-index-{value} variable. Also, the .zindex-{value} utility classes are replaced with the .z-index-{value} classes.

However, v2.9.0 includes a fallback for the depracated version so they will still work in your projects.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CodyFrame v2.9.3

CodyFrame v3.0.4

CodyFrame v3.0.3

CodyFrame v3.0.2

CodyFrame v3.0.0

New: SASS modules

Updated - Colors

Updated - Grid System

Updated: Spacing and Typography

Breaking changes

How to upgrade

Browser support

Contributors

CodyFrame v2.9.0

New: Default Dark Theme

New: Background Color Variations

New: Utility Classes

Deprecated: --text-vspace-multiplier

Deprecated: --zindex-{value}

CodyFrame v2.8.9

Releases: codyhouse/codyhouse-framework

v2.9.3

CodyFrame v2.9.3

v3.0.4

CodyFrame v3.0.4

v2.9.2

v3.0.3

CodyFrame v3.0.3

v3.0.2

CodyFrame v3.0.2

v3.0.1

v3.0.0

CodyFrame v3.0.0

New: SASS modules

Updated - Colors

Updated - Grid System

Updated: Spacing and Typography

Breaking changes

How to upgrade

Browser support

Contributors

v2.9.1

v2.9.0

CodyFrame v2.9.0

New: Default Dark Theme

New: Background Color Variations

New: Utility Classes

Deprecated: --text-vspace-multiplier

Deprecated: --zindex-{value}

v2.8.9

CodyFrame v2.8.9