CodyHouse

Web design nuggets

[Sebastiano Guerriero @guerriero_se]

✨ CSS tip!

Try replacing :focus-within with :has(input:focus-visible) to make focus visible only during keyboard navigation ↓

[Sebastiano Guerriero @guerriero_se]

How to use the :where CSS selector to solve specificity problems ↓

[Sebastiano Guerriero @guerriero_se]

How to create a customizable 'flipped' border-radius in CSS ↓

[Sebastiano Guerriero @guerriero_se]

It's time for a change @codywebhouse ↓

From a business standpoint, we have failed.

Why?

- Our entire model was too dependent on our CSS framework.
- Adoption of the framework has been low.
- Users love our components but are hesitant to learn a new framework just to use them.

This created a funnel that severely impacted our revenue.

But this isn't goodbye!

@romano_cla and I have agreed on a new plan.

We're creating a new component library that stands out with:
- Superior design and coding
- High customization via CSS variables
- No framework dependencies—simply copy/paste into your project
- Pure CSS
- Vanilla JS modules

Looking Ahead:
No ETA yet, but if you've previously purchased our library or do so in the coming weeks, you'll receive the new components at no additional cost. The existing components and framework will always remain available for download.

We believe in building a better CodyHouse. Stay tuned!

[CodyHouse @codywebhouse]

@ianhawes new and better ones 👀

[Claudia Romano @romano_cla]

Conditional CSS using inline variables ↓

[CodyHouse @codywebhouse]

Next steps decided. Exciting updates ahead... Stay tuned!

[CodyHouse @codywebhouse]

@c_ortega32 Hi Carlos, we're alive and well! We've been focused on our sister project @nucleoapp, just launched (btw using CodyFrame). Next, we'll start planning the future of CodyHouse.

[Nucleo Icons @nucleoicons]

💥 Introducing Nucleo v4 – A new era in icon management begins!

https://t.co/SGd0NrsUky

[Claudia Romano @romano_cla]

Working on a new CodyFrame feature: view the grid columns, as in tools like Figma!

Particularly useful when creating complex layouts.

Cool thing: it automatically adapts when you modify the grid classes.

[CodyHouse @codywebhouse]

@schmolzp At the moment, we don't have this option. For our projects, we run PurgeCSS anytime we need to push the project live. One option we could consider is creating a single SCSS file for each group of utility classes, as an alternative to importing util.scss. Would that help?

[CodyHouse @codywebhouse]

@c_ortega32 Hi Carlos, sorry for the super late reply! We're OK! We don't have an ETA yet, but it's next on our roadmap 👍

[Claudia Romano @romano_cla]

Quick recap on merging arrays in JS - I still get confused sometimes 🤔

- push + spread operator to append an array to another
- unshift + spread to prepend an array to another
- concat to merge two arrays without modifying them

More info & examples 👇
https://t.co/KhDBXFFyyL

[CodyHouse @codywebhouse]

✂️ You can now generate VS Code snippets compatible with your CodyFrame configurations:

https://t.co/twtnNEPnUt

[Claudia Romano @romano_cla]

Comparing dates in JS can be a tricky task! These 3 points will help you master it:

- Use Date objects for relational operations (< or >)
- Use the getTime() method for equality (e.g., ===)
- Use built-in methods, like getFullYear(), for comparing specific attributes of a date

[CodyHouse @codywebhouse]

3/3 — Use the text-indent utility classes to modify the text indentation of the first line

[CodyHouse @codywebhouse]

🚀 We just shipped CodyFrame v4.0.8!

What's new:

1/3 — Gradient borders with support for border-radius

[CodyHouse @codywebhouse]

2/3 — Use the line-clamp utility classes to truncate text at a specific number of lines