Neomorphic Calculator 🧮 + Dark Mode 🖤

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.

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.

Kerthin / calculator-templateSait

A calculator made in the style of neomorphism.

Description

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

Demo

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