A lightweight front-end framework for building accessible, bespoke interfaces.
MIT License
Bot releases are hidden (Show)
Published by claudia-romano over 1 year ago
(no breaking changes)
Changelog:
Published by sebastiano-guerriero over 1 year ago
(no breaking changes)
Changelog:
Published by sebastiano-guerriero almost 2 years ago
(no breaking changes)
Changelog:
.link
class to typography custom stylePublished by sebastiano-guerriero almost 2 years ago
(no breaking changes)
Changelog:
Published by sebastiano-guerriero almost 2 years ago
(no breaking changes)
Changelog:
.icon
base class to make it compatible with icon fontsPublished by sebastiano-guerriero about 2 years ago
(no breaking changes)
Changelog:
--border-o-base
variable to modify the base border opacity valuePublished by sebastiano-guerriero about 2 years ago
(no breaking changes)
Changelog:
.shadow-ring
utility class and CSS custom property.gap-0
utility classPublished by sebastiano-guerriero over 2 years ago
(no breaking changes)
This version includes new column-count and shadow CSS utility classes.
Published by sebastiano-guerriero over 2 years ago
(no breaking changes)
This version includes new vertical-align, opacity, border opacity, color opacity, background opacity CSS utility classes.
Published by sebastiano-guerriero over 2 years ago
(no breaking changes)
This version includes new vertical-align, opacity, border opacity, color opacity, background opacity CSS utility classes.
Published by claudia-romano almost 3 years ago
(no breaking changes)
This version includes minor changes to the reset and form style.
Published by sebastiano-guerriero almost 3 years ago
(no breaking changes)
This version includes a fix for PurgeCSS, caused by how the (new) SASS modules handle comments.
Published by claudia-romano almost 3 years ago
(no breaking changes)
This version includes a minor fix to the fallback grid system (negative margins system for older browsers not supporting the Gap property).
Published by sebastiano-guerriero about 3 years ago
(no breaking changes)
This version includes a minor change to the .text-component
in the custom-style/_typography.scss file and a minor gulpfile change.
Published by claudia-romano about 3 years ago
Updated the Gulp configuration file.
Published by claudia-romano about 3 years ago
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:
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.
The new color system includes 4 variations of the background color:
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! 🌚
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>
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.
.form-error-msg
class has been deprecated and replaced by utility classes (example)..radio-list
and .checkbox-list
classes have been deprecated (see radio/checkbox component).gridFallback
mixin has been deprecated (we no longer support IE11)..zindex-{value}
classes have been replaced by .z-index-{value}
(more info).--zindex-{value}
variables have been replaced by --z-index-{value}
.media-wrapper
has been deprecated and replaced by the aspect-ratio classes..v-space-{value}
classes have been replaced by .text-space-y-{value}
(more info).--text-vspace-multiplier
variables have been replaced by --text-space-y-multiplier
.hidden
class is replaced by .invisible
(more info)..has-margin@{breakpoint}
and .has-padding@{breakpoint}
classes have been deprecated (use the margin and padding utility classes).If you're running a project on CodyFrame v2:
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:
@use '../base' as *;
on top of all your custom-style/* files (see the custom-style files in CodyFrame 3).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 ;)
Published by claudia-romano about 3 years ago
Fixed compatibility issues with CodyFrame 3.
Published by sebastiano-guerriero about 3 years ago
(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:
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).
We've included 4 new colors in the color palette (in the custom-style/_colors.scss
file):
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.
We've included a bunch of new utility classes:
More info on the new util classes as soon as we release v3.
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.
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.