Claymorphism is a trendy new design approach that’s all about creating soft, inflated, and tactile UI elements. With the power of clay.css, you can easily integrate this style into your web projects. This guide will teach you how to install and use clay.css to bring a touch of charm and vibrancy to your designs.

Why Claymorphism?

Claymorphism, a term introduced by Michał Malewicz, focuses on creating soft 3D elements that seem to float above the background, distancing itself from the accessibility issues that come with neumorphism. It’s the perfect way to amp up your user interface with delightful visual appeal.

Installation

Getting started with clay.css is a breeze! You can choose one of the following methods to install it:

• CDN: Add the following line in your HTML file:

<link rel="stylesheet" href="https://unpkg.com/claymorphism-css/dist/clay.css">

• NPM: You can also install it via npm:

npm i claymorphism-css

• Manual: Simply download and add dist/clay.css or dist/clay.scss to your project.

Usage

To apply the claymorphism style, all you need is a single CSS class:

<div class="clay">
  Fluffy ipsum dolor sit amet consectetur...
</div>

The clay class gives you the freedom to customize claymorphic styles through CSS properties. For example:

<div class="clay card">
  Fluffy ipsum dolor sit amet consectetur...
</div>

You can modify styles using CSS variables:

.card {
    --clay-background: #f76d6d;
    --clay-border-radius: 48px;
    color: #f1f1f1;
    padding: 48px;
}

Options (CSS Variables)

• --clay-background
• --clay-border-radius
• --clay-shadow-outset
• --clay-shadow-inset-primary
• --clay-shadow-inset-secondary

SASS Mixin

If you’re using SASS, you can leverage its powerful mixins to apply styles flexibly:

@import claymorphism-css/dist/clay.scss;

@include clay(
  $background: [value],
  $border-radius: [value],
  $shadow-outset: [value],
  $shadow-inset-primary: [value],
  $shadow-inset-secondary: [value]
);

FAQ

How do I apply claymorphism styles to pseudo-elements or pseudo-selectors?

Using SASS, this can easily be accomplished with the mixin. In vanilla CSS, however, you would need to apply styles manually since utility classes cannot do this directly. You would use the default values provided by the clay class as shown above.

Why not build the entire framework design system?

Claymorphism is still a relatively new concept. Creating an entire design system may lead to accessibility issues and a complex framework, so the decision was made to keep it simple and flexible. This allows customization without compromising on usability.

Troubleshooting

If you encounter any issues while implementing clay.css, ensure that you have included the styles in your project correctly and that you are applying the class to the correct HTML elements. Make sure your CSS variables are properly set up, or else the styles may not appear as intended. For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Conclusion

With clay.css, integrating the delightful claymorphism UI style into your project becomes a fun and intuitive process. Give your components a fluffy, charming, and modern touch with this innovative approach!