Javascript-Clay.css v1.0.5: Easily add claymorphic styles to any HTML element with this micro class and SASS mixin.

icon
Latest Release: v1.0.5
  • Fix 37990f5
  • Docs update 80e1773
  • Docs 611ae71

https://github.com/codeAdrian/clay.css/compare/v1.0.4...v1.0.5

Source code(tar.gz)
Source code(zip)

clay.css

Extensible and configurable micro CSS util class and SASS mixin for adding claymorphism styles to your components.

About

Claymorphism is a fresh new concept. The name was coined by Michał Malewicz and the designers are excited to explore the possibilities of this approach to UI design.

It features inflated fluffy 3D elements which look charming and introduce a much more vibrant look compared to the usual flat designs.

What sets claymorphism apart from neumorphism is that it floats above the background instead of being connected to it, eliminating accessibility issues and design restrictions of the latter.

Installation

CDN

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

NPM

npm i claymorphism-css
yarn add claymorphism-css

Manual

Download and add the dist/clay.css or dist/clay.scss manually.

Usage

This is a minimal, single class CSS util that applies only basic claymorphism styles:

  • Background
  • Border radius
  • One outset shadow
  • Two inset shadows
<div class="clay">
  Fluffy ipsum dolor sit amet consectetur...
</div>

This CSS class allows you to easily change the claymorphic styles via CSS properies. These changes and additional styles should be applied with the extending class.

<div class="clay card">
  Fluffy ipsum dolor sit amet consectetur...
</div>
.card{
  /* Modify clay.css properties */
  --clay-background: #f76d6d;
  --clay-border-radius: 48px;

  /* Extended styles */
  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

SASS mixin allows you more flexibility in applying claymorphism styles to your components. For example, this way you can easily add styles to pseudo-elements or pseudo-selectors or use the mixin in other SASS mixins or functions.

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

@import @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?

If you are using SASS, you can easily do it with the mixin. See the example above.

If you are using vanilla CSS and a util class, you cannot apply it to pseudo-elements and pseudo-selectors.

You'll have to apply the following styles manually. Check out the default values provided by the clay class.

  background: [value];
  border-radius: [value];
  box-shadow: [value];

Why not build the entire framework / design system?

This is a relatively new and unexplored concept, so I didn't want to build an entire design system or a CSS framework that enforces styles on buttons. inputs, nav, cards and other elements, etc. and end up with accessibility issues and a framework that is hard to maintain.

I wanted to leave it unopinionated and simple, so its easily customizable and can be sprinkled throughout your project. This approach allows you full control over the styles and how you adapt them to your design.

I've built a demo page and it was really fun, useful and intuitive. CSS variables are easy to memorize and easily customizable.

Sponsors

If you enjoy using clay.css, please consider supporting the development of the project. Your name and link will appear here.

Become a sponsor!

Comments

  • Add syntax highlighting to some code blocks
    Add syntax highlighting to some code blocks

    Jan 10, 2022

    Add syntax highlighting to code blocks which are not highlighted yet, for enchanced readability.

    Reply
  • it's cool
    it's cool

    Jan 19, 2022

    null

                                                                                                                                                                                                           
    Reply
  • Is there any way to make the edges curved?
    Is there any way to make the edges curved?

    Jan 18, 2022

    Hi! I just came across this library thanks to TLDR. I was wondering if this library just adds shadows and round corners or there is any kind of support for making the edges kind of curved, just like in the examples linked in your demo page:

    Selection_136

    I am currently using custom images to do that, which makes the work kind of difficult when working with different sizes. I guess it could be done with css shapes but it'd be equally painful and wouldn't be supported in all browsers. Also, if the shadow is applied as css afterwards, the shadow would be rather flat, not following the round shape of the image.

    Thanks!

    Reply