DEV Community

loading...
Cover image for Neomorphic Calculator 🧮 + Dark Mode 🖤

Neomorphic Calculator 🧮 + Dark Mode 🖤

Roden
Frontend developer from Russia
・2 min read

Introduction

Over the past year or even more, it is difficult not to pay attention to how interest in Neomorphism is rapidly growing in web design. And indeed, it is difficult to pass by such an unusual approach in the development of interfaces. Also, many developers have been posting their work on various resources for a long time, demonstrating how using simple shadows you can create beautiful and unusual elements. So I also decided to keep up.

Alt Text

Therefore, today I would like to present to you my calculator made in the style of Neomorphism. It also has a Dark Theme, which you can launch using the switch in the upper right corner.

You can download the project from my Github repository or CodePen.

GitHub logo Kerthin / calculator-templateSait

A calculator made in the style of neomorphism.

Kerthin logo

Build Status completion Status Version
Version Size Version

Description

The project is a working calculator made in the style of neomorphism.

Use technology.

The following technologies were used to create this project:

Task-Manager

Software platform

Preprocessors

Package manager

Languages


Plugins

To develop the project through gulp, I used the following types of NPM plugins:





























































Plugin Status Description
gulp-sourcemaps gulp-sourcemaps-status Intended for generation of css source maps which will be necessary at debugging of a code.
gulp-imagemin gulp-imagemin-status Minify PNG, JPEG, GIF and SVG images with imagemin
gulp-autoprefixer gulp-autoprefixer-status Prefix CSS with Autoprefixer
imagemin-pngquant imagemin-pngquant-status
Pngquant imagemin plugin
gulp-uglify gulp-uglify-status Minify JavaScript with UglifyJS3.
gulp-rigger gulp-rigger-status
Rigger is a build time include engine for Javascript, CSS, CoffeeScript.
gulp-minify-css gulp-minify-css-status
Gulp plugin to minify CSS
rimraf rimraf-status The UNIX command rm -rf for node.
gulp-watch gulp-watch-status File watcher that uses super-fast chokidar and emits vinyl objects.
gulp-pug gulp-pug-status This Gulp plugin enables you to compile your Pug templates into HTML or JS.




Full Page Demo

Alt Text

Dark Mode

Alt Text

CodePen

(See in the format 0.5x)

Responsive

Alt Text

The site is adapted for screen resolutions such as:
@media 414px
@media 375px
@media 320px

The End

Well, that's it. The project is very small, so there is no need to write large texts here. Thank you for paying attention to my article. Goodbye.

I can advise you to subscribe to my Twitter, I also post my works there.

P.S.
After each mathematical action, press the equal sign.

Alt Text

Discussion (12)

Collapse
lamka02sk profile image
lamka02sk • Edited

This is actually one of the few use cases where neomorphism looks amazing. Good job!

Collapse
kerthin profile image
Roden Author

Thank you for your high appreciation of mine .

Collapse
it718 profile image
IT Solutionist, Specialist

Thanks for publishing. Very neccessarry. Great!

Collapse
kerthin profile image
Roden Author

You're welcome. 🎉

Collapse
nabilafzal profile image
nabilafzal19

So beautiful

Collapse
kerthin profile image
Roden Author

Thanks 😊

Collapse
tosimile profile image
Adeloye Ayomiposi Jeremiah

Whaoo
Beautiful

Collapse
zaxwebs profile image
Zack Webster • Edited

This is one of the best implementations I've come across, Roden.

Collapse
kerthin profile image
Roden Author

Thank you for appreciating my work so highly.

Collapse
kerthin profile image
Roden Author

Thanks 🎉

Collapse
rachaelm profile image
Rachael Moody

So cool! I just want to reach out and push all the buttons. Lol