Code Monkey home page Code Monkey logo

neumorph.scss's Introduction

Neumorph.scss


what is Neumorph.scss?

see demo page

Neumorph.scss is a bundle of bootstrap 4 styles integrated with neumorphism.scss clases to make a simple soft design.


Getting started

Neumorph.scss brings you a layer you can use between bootstrap and your styles.

You only need to import one of the variations stylesheets on your proyect or compile your own and start writting clases at html elements, like you usually do with bootstrap.


Variations

Check Dark and Light themes and choose what you need, Neumorph.scss with bootstrap _utilities & grid only or with full bootstrap styles.

Light themed

  • neumorph.css
  • neumorph.min.css
  • neumorph-full.css
  • neumorph-full.min.css

Dark themed

  • neumorph-dark.css
  • neumorph-dark.min.css
  • neumorph-dark-full.css
  • neumorph-dark-full.min.css

Custom styles

Check ./src/themes/np-theme.scss, you can edit theme vars to set your own theme vars, including colors, sizing, radius and transition time.

Then just run a compile command to get your own themed neumorph.

Compile commands

Run following commands to compile your custom neumorph.scss version into ./dist/css/custom/.

Output

--

$ npm run sass-custom 
  • Output: ./dist/css/custom/neumorph-custom.css
$ npm run sass-custom-min
  • Output: ./dist/css/custom/neumorph-custom.min.css

You can import this file to your project and start working with it.

ATENTION - Pre-release, use with caution.

This is a personal use micro library builded to work by myself that i wanted to share, use it by your own responsability.

neumorph.scss's People

Contributors

chemaalfonso avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.