A lightweight front-end framework for building accessible, bespoke interfaces.
MIT License
Bot releases are hidden (Show)
Published by sebastiano-guerriero over 3 years ago
(no breaking changes)
What's new:
Published by sebastiano-guerriero over 3 years ago
(no breaking changes)
What's new in CodyFrame:
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>
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; }
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%;
}
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>
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); |
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>
We've added the following new visibility classes:
Class | Description |
---|---|
.visible |
visibility: visible; |
.hidden |
visibility: hidden; |
Published by sebastiano-guerriero over 3 years ago
New top/right/bottom/left util classes + new translate util 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; |
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 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>
Published by sebastiano-guerriero almost 4 years ago
New adjustHSLA
mixin, minor changes to the Util.setHeight()
function, minor updates to the grid system.
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);
}
The setHeight()
util function now accepts a custom timing function.
Possible values: easeInOutQuad, easeInQuart, easeOutQuart, easeInOutQuart, easeOutElastic. Default timing function is linear.
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>
Published by sebastiano-guerriero almost 4 years ago
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 |
Published by sebastiano-guerriero almost 4 years ago
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 |
Published by sebastiano-guerriero almost 4 years ago
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).
Published by sebastiano-guerriero almost 4 years ago
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:
What's new:
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.
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.
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>
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>
What's changed:
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.
Published by sebastiano-guerriero about 4 years ago
What's new in CodyFrame v2.8.0:
To safely upgrade to v2.8.0, make sure to follow one of the following two options:
If you're using our global editors, export again the SCSS of typography and spacing, and paste it into your project.
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;
}
}
}
What's new:
--space-unit
and --text-unit
variablesWe'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);
}
Create a library of reusable styles using our new Shared Styles visual editor:
codyhouse.co/ds/globals/shared-styles
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 |
Class | Description |
---|---|
.break-word |
break a word to prevent text from overflowing its (parent) box. |
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; |
resetFocusTabsStyle()
functionNew 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.
What's changed:
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);
}
Published by sebastiano-guerriero about 4 years ago
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).
.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; }
We've added the custom-style/_util.scss file with an example of how to create custom utility classes.
We've added min-width: 0; to grid items to prevent a potential flexbox bug caused by content overflow.
.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.
Published by claudia-romano about 4 years ago
Published by sebastiano-guerriero over 4 years ago
<div class="grid">
<button class="btn btn--primary col col-content@md">Button</button>
</div>
Published by sebastiano-guerriero over 4 years ago
We've been listening to the feedback we've received following the release of version 2.7.0 ("Simplified Framework Structure"). We've tested the option of importing specific (base) partials, but our solution didn't work with the new SASS Module System if the _base.scss is imported multiple times within the same file.
We've decided to bring back the Base folder with the partials.
If you're using the $cody-base-partials
variable introduced in v2.7.1 to import specific partials, it still works. However, we suggest importing directly the partials because this variable will be deprecated in v3.0.
// ⚠️ it still works
$cody-base-partials: 'breakpoints', 'mixins';
@import 'base';
// ✅ better solution
@import '~codyhouse-framework/main/assets/css/base/breakpoints';
@import '~codyhouse-framework/main/assets/css/base/mixins';
However, if you're using the new SASS modules, you can't update the variable using the "with" configuration:
// ❌ this won't work
@use 'base' as * with (
$cody-base-partials: 'breakpoints' 'mixins',
);
// ✅ this works
@use '~codyhouse-framework/main/assets/css/base/breakpoints' as *;
@use '~codyhouse-framework/main/assets/css/base/mixins' as *;
Published by sebastiano-guerriero over 4 years ago
v.2.7.2 includes the following new utility classes:
Published by sebastiano-guerriero over 4 years ago
The _base.scss file is composed of 15 sections (partials). Use the $cody-base-partials
SCSS variable to import only specific partials:
// optional -> import only specific _base.scss partials
// $cody-base-partials: 'accessibility', 'breakpoints', 'buttons', 'colors', 'forms', 'grid-layout', 'icons', 'mixins', 'reset', 'shared-styles', 'spacing', 'typography', 'util', 'visibility', 'z-index';
// example 👇 - import only breakpoints and mixins
$cody-base-partials: 'breakpoints', 'mixins';
@import 'base';
Published by sebastiano-guerriero over 4 years ago
v.2.7.0 is all about simplifying the framework file structure. We've decided to remove the /base folder and include all the base rules directly in the _base.scss file.
This change shouldn't affect in any way existing users. It's safe to assume all users are importing the _base.scss file of the framework in their project, and they can safely continue to do so.
We've improved the custom-style templates (the .scss files included in the /custom-style folder) by adding more comments and custom properties that were previously hidden in the documentation.
If you're upgrading to v.2.7.0 -> we've removed the default background color and color for the buttons in the _base.scss file. It means that in the rare case you didn't set any style in the /custom-style/_buttons.scss file for your buttons, you should at least add a background color and a color:
// make sure you've at least set a very basic style for your buttons in the custom-style/_buttons.scss file
.btn--primary {
background-color: var(--color-primary);
color: var(--color-white);
}
.btn--subtle {
background-color: var(--color-contrast-lower);
color: var(--color-contrast-higher);
}
.btn--accent {
background-color: var(--color-accent);
color: var(--color-white);
}
Published by claudia-romano over 4 years ago
🆕 Added the following new utility classes:
🔬 Modified the way the style.css file is included in the index.html
Published by sebastiano-guerriero over 4 years ago
.backdrop-blur-10
and .backdrop-blur-20
utility classes to created blurred background effects;.pointer-events-auto
utility class (in case you're using .pointer-events-none
on a parent element and you want the child to be interactive);.icon--xxxs
and .icon--xxxl
utility classesPublished by sebastiano-guerriero over 4 years ago
col-content
class to a grid item and its width will depend on its content (e.g., you can have a full width button by applying the col-12
class, and then resize it to "auto" width at a specific breakpoint by applying col-content@md
)print:is-hidden
class to hide an element if the page is printed