Skip to content

v2.8.0
Compare
Choose a tag to compare
@sebastiano-guerriero sebastiano-guerriero released this 23 Sep 10:05
v2.8.0
88a79c0

CodyFrame v2.8.0

What's new in CodyFrame v2.8.0:

How to upgrade

To safely upgrade to v2.8.0, make sure to follow one of the following two options:

1) You use the Global Editors

If you're using our global editors, export again the SCSS of typography and spacing, and paste it into your project.

2) You don't use the Global Editors

If you're not using the global editors, make the following changes to the (custom-style) spacing and typography files:

custom-style/_spacing.scss

// separate the --space-unit and the spacing scale
:root {
  --space-unit:  1em;
}

// 👇 target the :root and all the HTML elements
:root, * {
  --space-xxxxs: calc(0.125 * var(--space-unit)); 
  --space-xxxs:  calc(0.25 * var(--space-unit));
  --space-xxs:   calc(0.375 * var(--space-unit));
  --space-xs:    calc(0.5 * var(--space-unit));
  --space-sm:    calc(0.75 * var(--space-unit));
  --space-md:    calc(1.25 * var(--space-unit));
  --space-lg:    calc(2 * var(--space-unit));
  --space-xl:    calc(3.25 * var(--space-unit));
  --space-xxl:   calc(5.25 * var(--space-unit));
  --space-xxxl:  calc(8.5 * var(--space-unit));
  --space-xxxxl: calc(13.75 * var(--space-unit));
  --component-padding: var(--space-md);
}

@supports(--css: variables) {
  @include breakpoint(md) {
    :root {
      --space-unit:  1.25em;
    }
  }
}

custom-style/_typography.scss

:root {
  --text-base-size: 1em;
  --text-scale-ratio: 1.2;

  // 👇 add the --text-unit variable
  // if Em units → --text-unit: 1em;
  // if not Em units (e.g., Rem/Px) → --text-unit: var(--text-base-size);
  --text-unit: 1em;
}

// 👇 separate the type scale, target the :root and all the HTML elements
:root, * {
                  // 👇 replace 1em with the --text-unit variable
  --text-xs: calc((var(--text-unit) / var(--text-scale-ratio)) / var(--text-scale-ratio));
  --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
  --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
  --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
  --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
  --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
  --text-xxxxl: calc(var(--text-xxxl) * var(--text-scale-ratio));
}

@supports(--css: variables) {
  @include breakpoint(md) {
    :root {
      --text-base-size: 1.25em;
      --text-scale-ratio: 1.25;
    }
  }
}

New

What's new:

New responsive controls powered by the --space-unit and --text-unit variables

We've made some core framework changes to enable more control over the responsiveness of your components.

Now you can edit the --space-unit on a component level. Here are some examples of what you can do:

.component {
  // switch to spacing system based on Rem units
  --space-unit: 1rem;

  // increase component spacing by 1.2
  --space-unit: 1.2em;

  // decrease component spacing by 0.8
  --space-unit: 0.8;
}

You can also edit typography using the --text-unit variable.

If you want to change the typography unit (e.g., from Em to Rem), don't forget to reset the font-size. Here's an example:

.component {
  // switch to typography system based on Rem units
  --text-unit: 1rem;
  font-size: var(--text-unit);

  // increase component typography by 1.2
  --text-unit: 1.2em;
  font-size: var(--text-unit);

  // alternative option: use textUnit mixin
  @include textUnit(1rem);
}

New Shared Styles visual editor

Create a library of reusable styles using our new Shared Styles visual editor:

codyhouse.co/ds/globals/shared-styles

New space-unit-{unit} and text-unit-{unit} utility classes

Class Description
.space-unit-rem use Rem units for spacing
.space-unit-em use Em units for spacing
.space-unit-px use Px units for spacing
.text-unit-rem use Rem units for typography
.text-unit-em use Em units for typography
.text-unit-px use Px units for typography

New break-word utility class

Class Description
.break-word break a word to prevent text from overflowing its (parent) box.

New text-shadow utility classes

Class Description
.text-shadow-xs text-shadow: 0 1px 1px rgba(#000, 0.15);
.text-shadow-sm text-shadow: 0 1px 2px rgba(#000, 0.25);
.text-shadow-md text-shadow: 0 1px 2px rgba(#000, 0.1), 0 2px 4px rgba(#000, 0.2);
.text-shadow-lg text-shadow: 0 1px 4px rgba(#000, 0.1), 0 2px 8px rgba(#000, 0.15), 0 4px 16px rgba(#000, 0.2);
.text-shadow-xl text-shadow: 0 1px 4px rgba(#000, 0.1), 0 2px 8px rgba(#000, 0.15), 0 4px 16px rgba(#000, 0.2), 0 6px 24px rgba(#000, 0.25);
.text-shadow-none text-shadow: none;

New resetFocusTabsStyle() function

New resetFocusTabsStyle() function: call this function after you have dynamically added .js-tab-focus elements to the DOM; this makes sure the proper outline style is applied to these new inserted elements.

Changes

What's changed:

textUnit mixin

The textUnit mixin no longer accepts a second variable. Now it updates the --text-unit variable and the font-size:

.component {
  @include textUnit(1rem);
}

// equivalent to 👇
.component {
  --text-unit: 1rem;
  font-size: var(--text-unit);
}
Assets 2
Loading