Releases: codyhouse/codyhouse-framework
v2.8.8
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
CodyFrame v2.8.7
(no breaking changes)
What's new in CodyFrame:
- Icon Size
- New Aspect-Ratio Classes
- New Transform Classes
- New SVG Classes
- New Scroll-Behavior Classes
- New Top/Bottom/Right/Left Classes
- New Visibility Classes
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
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
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
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
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
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
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
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
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.