loading...
Cover image for Neomorphism designs, UI components library

Neomorphism designs, UI components library

ismail9k profile image Abdelrahman Ismail Updated on ãƒŧ2 min read

Every while a new design trend arise and became the dominator of the shape of the period. Recently, the neomorphic design style becoming very trending and is gaining more and more popularity.

The Neomorphism Design

You can form this effect, by adding two shadows to your flat-designed elements, one is a light shadow from the top left of the element, and the other is a dark shadow towards the bottom right. the combination of both creates the effect of the elements pushing themselves through your display.

You can read more about how to apply this technic in-depth here: Design trends: Neomorphic design.

Neomorphism design components

The first time I saw this design concept, I immediately loved it. I started to apply it to some basic web components; buttons, inputs, etc..

Then I had an idea, why not create a full set of UI components based on this concept.

I reviewed the most famous frameworks and components libraries structure and concepts, to design the structure I will follow. In the end, I summed up to:

  • Each component will have five sizes (xs, sm, md, lg, xl).
  • Components size will depend on its font-size only; when change the component's font-size property, its width, height, margin, and padding will be changed respectively because they all are in em unit.
  • The grid will have also five media breaking points (xs, sm, md, lg, xl).
  • Shadows depth will have five levels, in addition to two shadows style emboss and deboss.
  • Classes naming conventions will be a modified version of SUIT naming convention
  • The components are written in Stylus because it's the best ðŸĪŠðŸĪŠ.

After TWO days of hard work ðŸĪ“ðŸĪ“, and lots of potions coffee. I want to introduce Neomorphism, UI components library. (creative name, right? ðŸĪ·â€â™‚ïļðŸĪ·â€â™‚ïļ)

GitHub logo ismail9k / neomorphism

UI components library in the new neomorphism design style

Final words

This project very far from completion, it still work-in-progress. I plan to include more components, and support dark-theme too, and maybe in the future expose it as React/Vuejs components. I just wanted to share it as early as possible, to gather feedback, and maybe to force myself, to dedicate more time to work on it 😭😭. Thank you for reading.

Posted on by:

Discussion

pic
Editor guide
 

Hi,

Nice work

I'm wondering how to use the dark.
Looking at the neomorphism.css file there seems to be adark theme.

theme. I'm abe to apply a button style like this. kind of blueish but I guess the colors can be changed.

How would you apply the dark theme to the whole site?

Thanks in advance

Jean-Pierre

 

Amazing work, Abdelrahman!

Just shared your work on our Webdesign Trends article (in German) on DrWeb.de. Keep up the great work! 🙏ðŸŧ

 

Wow, very appreciated. Thank you Markus.

 
 

Thank you I am glad that you liked it

 

Great stuff, Ismail! Your design looks good and I'm looking forward to seeing what you make of it in the future. Cheers!

 

Thank you for your support. Cheers!

 

there's a typo in "Styles", should be "Stylus" ;)

 

Ooops, nice catch 😅😅