Skip to content

Releases: codyhouse/codyhouse-framework

v2.8.8

04 May 12:42
Compare
Choose a tag to compare

CodyFrame v2.8.8

(no breaking changes)

What's new:

  • Fixed a minor issue with the aspect-ratio utility classes
  • Added the basic gap-0 util class

v2.8.7

15 Apr 09:14
Compare
Choose a tag to compare

CodyFrame v2.8.7

(no breaking changes)

What's new in CodyFrame:

Icon Size

In the .icon component, the size is now equal to the --size variable.

:root {
  --icon-xxxs: 8px;
  --icon-xxs:  12px;
  // ...
  --icon-xxxl: 128px;
}

.icon {
  --size: 1em;
  height: var(--size);
  width: var(--size);
  // ...
}

.icon--xxxs { --size: var(--icon-xxxs); }
.icon--xxs  { --size: var(--icon-xxs); }
// ...
.icon--xxxl { --size: var(--icon-xxxl); }

The advantage: now you can easily set off-scale size values by updating the --size value inline:

<svg class="icon" style="--size: 20px;" viewBox="0 0 16 16">
  <!-- ... -->
</svg>

New Aspect-Ratio Classes

We've added new aspect-ratio classes:

Class Description
.aspect-ratio-16:9 --aspect-ratio: 16/9;
.aspect-ratio-3:2 --aspect-ratio: 3/2;
.aspect-ratio-4:3 --aspect-ratio: 4/3;
.aspect-ratio-5:4 --aspect-ratio: 5/4;
.aspect-ratio-1:1 --aspect-ratio: 1/1;
.aspect-ratio-4:5 --aspect-ratio: 4/5;
.aspect-ratio-3:4 --aspect-ratio: 3/4;
.aspect-ratio-2:3 --aspect-ratio: 2/3;
.aspect-ratio-9:16 --aspect-ratio: 9/16;

How you can create additional aspect-ratio classes:

.aspect-ratio-21\:9 { --aspect-ratio: 21/9; }

New Transform Classes

Now the transform utility classes take advantage of CSS custom properties: you can combine multiple transformations by applying multiple classes (i.e., different transform classes won't overwite each other).

[class^="flip"], [class*=" flip"],
[class^="-rotate"], [class*=" -rotate"],
[class^="rotate"], [class*=" rotate"],
[class^="-translate"], [class*=" -translate"],
[class^="translate"], [class*=" translate"],
[class^="-scale"], [class*=" -scale"],
[class^="scale"], [class*=" scale"],
[class^="-skew"], [class*=" -skew"]
[class^="skew"], [class*=" skew"] {
  --translate: 0;
  --rotate: 0;
  --skew: 0;
  --scale: 1;

  transform: translate3d(var(--translate-x, var(--translate)), var(--translate-y, var(--translate)), var(--translate-z, 0)) rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0)) rotateZ(var(--rotate-z, var(--rotate))) skewX(var(--skew-x, var(--skew))) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, var(--scale))) scaleY(var(--scale-y, var(--scale)));
}

New utility classes:

Class Description
.rotate-90 --rotate: 90deg;
.rotate-180 --rotate: 180deg;
.rotate-270 --rotate: 270deg;

To create a new class, update the relative custom property value:

.rotate-45 {
  --rotate: 45deg;
}

.hover\:scale-2:hover {
  --scale: 2;
}

.-translate-y-100\% {
  --translate-y: -100%;
}

New SVG Classes

We've added the following new SVG utility classes:

Class Description
.fill-current fill: currentColor;
.stroke-current stroke: currentColor;
.stroke-1 stroke-width: 1px;
.stroke-2 stroke-width: 2px;
.stroke-3 stroke-width: 3px;
.stroke-4 stroke-width: 4px;

The .fill-current/.stroke-current classes set the fill/stroke value equal to the current text color. As a consequence, you can use the color utility classes in combo with .fill-current/.stroke-current classes to change the color of your inline SVG elements.

Example:

<svg class="fill-current color-primary" width="48" height="48" viewBox="0 0 48 48">
  <!-- ... -->
</svg>

New Scroll-Behavior Classes

Now you can use the scroll-behavior utility class to add smooth scrolling:

Class Description
.scroll-smooth scroll-behavior: smooth;

By default, the page will scroll to the target element. To set a scroll padding (i.e., a gap between the top of the viewport and the element the page scrolls to), use the scroll-padding utility classes:

Class Description
.scroll-padding-xxxxs scroll-padding: var(--space-xxxxs);
.scroll-padding-xxxs scroll-padding: var(--space-xxxs);
.scroll-padding-xxs scroll-padding: var(--space-xxs);
.scroll-padding-xs scroll-padding: var(--space-xs);
.scroll-padding-sm scroll-padding: var(--space-sm);
.scroll-padding-md scroll-padding: var(--space-md);
.scroll-padding-lg scroll-padding: var(--space-lg);
.scroll-padding-xl scroll-padding: var(--space-xl);
.scroll-padding-xxl scroll-padding: var(--space-xxl);
.scroll-padding-xxxl scroll-padding: var(--space-xxxl);
.scroll-padding-xxxxl scroll-padding: var(--space-xxxxl);

New Top/Bottom/Right/Left Classes

We've included new top/bottom/right/left utility classes and their responsive variations.

New top classes (right/bottom/left follow the same pattern):

Class Description
.top-xxxxs top: var(--space-xxxxs);
.top-xxxs top: var(--space-xxxs);
.top-xxs top: var(--space-xxs);
.top-xs top: var(--space-xs);
.top-sm top: var(--space-sm);
.top-md top: var(--space-md);
.top-lg top: var(--space-lg);
.top-xl top: var(--space-xl);
.top-xxl top: var(--space-xxl);
.top-xxxl top: var(--space-xxxl);
.top-xxxxl top: var(--space-xxxxl);

Responsive variation example:

<div class="position-sticky@md top-md@md">
  <!-- ... -->
</div>

New Visibility Classes

We've added the following new visibility classes:

Class Description
.visible visibility: visible;
.hidden visibility: hidden;

v2.8.6

19 Jan 09:00
Compare
Choose a tag to compare

CodyFrame v2.8.6

New top/right/bottom/left util classes + new translate util classes.

New Position Classes

Class Description
.top-50% top: 50%;
.bottom-50% bottom: 50%;
.left-50% left: 50%;
.right-50% right: 50%;
.inset-0 top: 0; right: 0; bottom: 0; left: 0;

New Translate Classes

Class Description
.-translate-50% transform: translate(-50%, -50%);
.-translate-x-50% transform: translateX(-50%);
.-translate-y-50% transform: translateY(-50%);
.translate-50% transform: translate(50%, 50%);
.translate-x-50% transform: translateX(50%);
.translate-y-50% transform: translateY(50%);

How To

How to center an element in position absolute using the new classes:

<div class="position-relative">
  <div class="position-absolute top-50% left-50% -translate-50%">
    Centered content!
  </div>
</div>

v2.8.5

12 Jan 09:38
Compare
Choose a tag to compare

CodyFrame v2.8.5

New adjustHSLA mixin, minor changes to the Util.setHeight() function, minor updates to the grid system.

adjustHSLA

We've introduced a new color function to modify any HSLA value of a color variable:

.component {
  // adjustHSLA($color, $hueMultiplier: 1, $saturationMultiplier: 1, $lightnessMultiplier: 1, $opacity: 1)
  background-color: adjustHSLA(var(--color-primary), 0.85, 1, 1, 0.9);
}

Util.setHeight

The setHeight() util function now accepts a custom timing function.

Possible values: easeInOutQuad, easeInQuart, easeOutQuart, easeInOutQuart, easeOutElastic. Default timing function is linear.

Grid Offset

Now you can reset the offset to 0 at a specific breakpoint:

<ul class="grid">
  <li class="col-6 offset-2 offset-0@md"></li>
</ul>

v2.8.4

15 Dec 08:44
Compare
Choose a tag to compare

CodyFrame v2.8.4

We've added support for text and background gradients.

Now you can create gradients using the Color Editor. The tool will generate background gradient utility classes, while the (connected) Typography Editor will generate text gradient classes.

More info on the Colors documentation page.

Background Gradients

Class Description
.bg-gradient-primary radial gradient
.bg-gradient-primary-top linear gradient to top
.bg-gradient-primary-right linear gradient to right
.bg-gradient-primary-bottom linear gradient to bottom
.bg-gradient-primary-left linear gradient to left

Color Gradients

Class Description
.color-gradient-primary-top linear gradient to top
.color-gradient-primary-right linear gradient to right
.color-gradient-primary-bottom linear gradient to bottom
.color-gradient-primary-left linear gradient to left

v2.8.3

07 Dec 09:04
Compare
Choose a tag to compare

CodyFrame v2.8.3

We've added the following utility classes:

Aspect Ratio

Class Description
.aspect-ratio-16:9 set aspect-ratio = 16:9
.aspect-ratio-4:3 set aspect-ratio = 4:3
.aspect-ratio-1:1 set aspect-ratio = 1:1

Here's how you can create additional aspect ratio classes in the /custom-style/_util.scss file of CodyFrame:

.aspect-ratio-21\:9 { --aspect-ratio: 21/9; }

Perspective

Class Description
.perspective-xs perspective: 250px;
.perspective-sm perspective: 500px;
.perspective-md perspective: 1000px;
.perspective-lg perspective: 1500px;
.perspective-xl perspective: 3000px;

Transform Origin

Class Description
.origin-center set transform-origin in the center
.origin-top set transform-origin in the top
.origin-right set transform-origin in the right
.origin-bottom set transform-origin in the bottom
.origin-left set transform-origin in the left
.origin-top-left set transform-origin in the top-left
.origin-top-right set transform-origin in the top-right
.origin-bottom-right set transform-origin in the bottom-right
.origin-bottom-left set transform-origin in the bottom-left

v2.8.2

23 Nov 09:24
Compare
Choose a tag to compare

CodyFrame v2.8.2

In the (custom-style) buttons and forms SCSS files, the custom properties have been moved to the root element to make them accessible to other components.

Example (custom-style/_buttons.scss):

:root {
  --btn-padding-y: var(--space-xxs); // padding top/bottom
  --btn-padding-x: var(--space-sm); // padding left/right
  --btn-radius: 0.25em; // border radius
  --btn-font-size: 1em; // font size
}

This upgrade is not required if you're using CodyFrame as an npm module (no changes to the base style).

v2.8.1

10 Nov 09:55
Compare
Choose a tag to compare

CodyFrame v2.8.1

If you're using v2.8.0, feel free to upgrade. There are no breaking changes.

If your version is < v2.8.0, check first the instructions about how to upgrade to v2.8.0.

What's new in CodyFrame v2.8.1:

New

What's new:

New grid gap classes

We've introduced new .gap-y-{size} (i.e., row gap) and gap-x-{size} (i.e., column gap) classes.

These classes are also available as responsive modifiers.

<!-- 👇 set vertical gap = var(--space-md) -->
<ul class="grid gap-y-md">
  <!-- ... -->
</ul>

<!-- 👇 set horizontal gap = var(--space-sm) -->
<ul class="grid gap-x-sm">
  <!-- ... -->
</ul>

<!-- 👇 responsive modifiers -->
<ul class="grid gap-md gap-y-lg@md">
  <!-- ... -->
</ul>

Starting from v.2.8.1, you can also set the gap by specifying a custom value for the --gap, --gap-y, and --gap-x variables:

<!-- 👇 Example 1 - setting the gap variable inline -->
<ul class="grid" style="--gap: 8px;">
  <!-- ... -->
</ul>

<!-- 👇 Example 2 - setting the gap variable in CSS -->
<ul class="my-custom-grid grid">
  <!-- ... -->
</ul>

<style>
  .my-custom-grid {
    --gap: 8px;
  }
</style>

Check our documentation for more information about CodyFrame's grid system.

PurgeCSS

We've integrated PurgeCSS into all our configuration files (Gulp, Webpack, WP, Shopify, and Laravel Mix).

PurgeCSS is a tool to remove unused CSS.

If you enable PurgeCSS, make sure to install it and ignore the custom + components style in the style.scss file of CodyFrame:

@import 'base';
/*! purgecss start ignore */
@import 'custom-style';
@import 'components/**/*.scss';
/*! purgecss end ignore */

If you're not using Gulp, you'll find the other configuration files in our documentation.

New width/height responsive helpers

Edit the height/width at a specific breakpoint adding the @{breakpoint} suffix to the height/width utility classes:

<div class="height-100vh height-auto@md">
  <!-- ... -->
</div>

<div class="width-100% width-auto@md">
  <!-- ... -->
</div>

New position responsive helpers

Edit the position at a specific breakpoint adding the @{breakpoint} suffix to the position utility classes:

<div class="position-sticky@md top-0@md">
  <!-- ... -->
</div>

Changes

What's changed:

New task if you're supporting IE

We've created a separate task if you're supporting older browsers (e.g., IE11):

npm run gulp watch-ie

If you support older browsers, make sure to uncomment the following script in the <head> of the index.html file:

<link id="codyframe" rel="stylesheet" href="assets/css/style.css">
<!-- browsers not supporting CSS variables -->
<script>
  if(!('CSS' in window) || !CSS.supports('color', 'var(--color-var)')) {var cfStyle = document.getElementById('codyframe');if(cfStyle) {var href = cfStyle.getAttribute('href');href = href.replace('style.css', 'style-fallback.css');cfStyle.setAttribute('href', href);}}
</script>

Up to v2.8.0, the gulp watch command was also generating the style-fallback.css file (where we replace the CSS variables with their computed value). Generating a fallback was also slowing down a little the compiling process.

We've decided to separate the two commands to remove the extra compiling time for users that don't support IE.

v2.8.0

23 Sep 10:05
Compare
Choose a tag to compare

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

Improved (custom-style) buttons and forms templates

11 Aug 08:33
Compare
Choose a tag to compare

Buttons + Forms templates

The (custom-style) buttons and forms templates now have the custom properties defined inside the .btn and .form-control classes (easier to understand for early framework adopters).

Example:

.btn { // style affecting all buttons
  --btn-padding-y: var(--space-xs); // padding top/bottom
  --btn-padding-x: var(--space-sm); // padding left/right
  --btn-radius: 0.25em; // border radius
  --btn-font-size: 1em; // font size
  box-shadow: var(--shadow-xs);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: .2s;
}

We use custom properties for padding and border radius so that it's possible to override them using the utility classes.

The .form-control class now includes a new variable:

.form-control {
  --form-control-font-size: 1em; // font size
}

If you're using older framework versions, editing this variable won't produce any effects (you can use the font-size property instead).

New radius utility classes

.radius-top-left-0 { border-top-left-radius: 0; }
.radius-top-right-0 { border-top-right-radius: 0; }
.radius-bottom-right-0 { border-bottom-right-radius: 0; }
.radius-bottom-left-0 { border-bottom-left-radius: 0; }

New _util.scss template

We've added the custom-style/_util.scss file with an example of how to create custom utility classes.

Minor Grid fix

We've added min-width: 0; to grid items to prevent a potential flexbox bug caused by content overflow.

Icon Sizes

.icon--{size} classes now update the width+height of the icons instead of the font-size. This change prevents the margins applied to the icons to bloat when using Em units.