Neumorphic.css
Neumorphic CSS framework by Webments. (WIP)
Install / Use
/learn @webments/Neumorphic.cssREADME
neumorphic.css is a lightweight, responsive and modern CSS framework.
- Lightweight (~1.51kB minzipped), blazing fast.
- Flexbox-based, responsive and mobile-friendly layout
- Elegantly designed and developed elements and components
Table of Contents
- Getting started
- Documentation and Usage
- Compatibility
- Contributing
- Contributors
- Community
- Versioning
- Copyright and License
<a name="gettingstarted"></a>Getting started
neumorphic.css is available via either NPM (preferred), Yarn, or a CDN.
NPM
- Obtain the package via NPM
npm i webments-neumorphic
- Insert the line below to your head area in your HTML file
<!-- index.html -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="node_modules/webments-neumorphic/dist/css/neumorphic.min.css" />
</head>
<body></body>
</html>
Yarn
- Obtain the package via Yarn
yarn add webments-neumorphic
- Insert the line below to your head area in your HTML file
<!-- index.html -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="node_modules/webments-neumorphic/dist/css/neumorphic.min.css" />
</head>
<body></body>
</html>
CDN
- Obtain the stylesheet via unpkg.com CDN. The latest option automatically uses the latest release version which might include radical and important changes such as class name changes which may result in broken styles in your projects. You might want to consider using a version-specific release.
Latest (stable channel, automatically updated)
https://unpkg.com/webments-neumorphic@latest/dist/css/neumorphic.min.css
Version-specific (stable channel, not automatically updated)
https://unpkg.com/webments-neumorphic@[latest_version]/dist/css/paper.min.css
Make sure to replace latest_version to the latest available version from the npm package manager (without the brackets!)
e.g. https://unpkg.com/webments-neumorphic@0.1.0/dist/css/paper.min.css (version number not up to date, shown as example)
- Import the CDN from your head area in your HTML file
<!-- index.html -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/webments-neumorphic/dist/css/neumorphic.min.css" />
</head>
<body></body>
</html>
You can load a specific version listed in the releases section in this repository like in the example above.
<a name="usage"></a>Documentation and Usage
neumorphic.css and all other Webments frameworks only provide components based on their design languages.
You can see previews and learn about component usages (documentation) here.
After installing with your favorite method, you can start using the library using the components from the preview page, index.html (same class names are a must per CSS declaration).
<a name="compatbility"></a>Compatibility
neumorphic.css is compatible and has been tested with recent versions of
- Chrome
- Edge
- Firefox
- Opera
- Safari
- Internet Explorer (partially supported)
The compatibility information above is based on our test and research information and doesn't mean that it won't work with other browsers.
<a name="contributing"></a>Contributing
All Webments frameworks are open to contributions from everyone! You can fork the repository, make your changes, and submit as pull requests to help improve them. Make sure to read the Code of Conduct and the Contributing guide before submitting contributions. You can also check out the necessary license information.
<a name="contributors">Contributors
Thanks goes to these wonderful people (emoji key):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tr> <td align="center"><a href="https://www.ardacebi.com"><img src="https://avatars3.githubusercontent.com/u/17576065?v=4" width="100px;" alt=""/><br /><sub><b>Arda Çebi</b></sub></a><br /><a href="https://github.com/Webments/neumorphic.css/commits?author=ardacebi" title="Code">💻</a> <a href="#design-ardacebi" title="Design">🎨</a> <a href="https://github.com/Webments/neumorphic.css/commits?author=ardacebi" title="Documentation">📖</a></td> <td align="center"><a href="http://baranonen.com"><img src="https://avatars1.githubusercontent.com/u/40770499?v=4" width="100px;" alt=""/><br /><sub><b>Baran Önen</b></sub></a><br /><a href="https://github.com/Webments/neumorphic.css/commits?author=baranonen" title="Code">💻</a> <a href="#design-baranonen" title="Design">🎨</a></td> <td align="center"><a href="http://mercode.org"><img src="https://avatars1.githubusercontent.com/u/40173707?v=4" width="100px;" alt=""/><br /><sub><b>Tan A.</b></sub></a><br /><a href="https://github.com/Webments/neumorphic.css/commits?author=yutyo" title="Code">💻</a> <a href="#design-yutyo" title="Design">🎨</a></td> </tr> </table> <!-- markdownlint-enable --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END --><a name="community"></a>Community
Enjoying neumorphic.css? Join our community to discuss about features, improvements and more!
<a name="versioning"></a>Versioning
This framework is maintained under the Semantic Versioning guidelines.
<a name="license"></a>Copyright and License
Code and documentation Copyright 2020 The Webments Maintainers and Contributors, Code released under the LGPL-2.1 (GNU Lesser General Public License v2.1) License.
This project follows the all-contributors specification. Contributions of any kind welcome!
Related Skills
clearshot
Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.
openpencil
2.0kThe world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.
HappyColorBlend
HappyColorBlendVibe Project Guidelines Project Overview HappyColorBlendVibe is a Figma plugin for color palette generation with advanced tint/shade blending capabilities. It allows designers to
Flyaro-waffle-app
Waffle Delight - Full Stack MERN Application Rules & Documentation Project Overview A comprehensive waffle delivery application built with MERN stack featuring premium UI/UX, admin management, a
