https://github.com/clyng57/neumattercss

A light-weight neumorphic css framework to standardize layouts and spacing. A moderate utility first approach.
https://github.com/clyng57/neumattercss

css css-framework neumorphic-css neumorphic-ui neumorphism neumorphism-ui node-module

Last synced: 2 months ago
JSON representation

A light-weight neumorphic css framework to standardize layouts and spacing. A moderate utility first approach.

• Host: GitHub
• URL: https://github.com/clyng57/neumattercss
• Owner: Clyng57
• License: mit
• Created: 2021-12-15T12:51:40.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-09-27T16:34:50.000Z (over 2 years ago)
• Last Synced: 2025-01-15T19:39:14.819Z (4 months ago)
• Topics: css, css-framework, neumorphic-css, neumorphic-ui, neumorphism, neumorphism-ui, node-module
• Language: CSS
• Homepage: https://neumattercss.com
• Size: 188 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
![plot](https://github.com/Clyng57/neumatter/raw/main/public/neumatter-logo-blackBG-01.svg)

A light-weight neumorphic css framework to standardize layouts and spacing. 

A moderate utility first approach.

    prefix-property/value:conditional

Add :hover or :active to any attributes class except for a-rounded.

    a-bg/concave:hover

Add :sm, :md, :lg, :xl, :xxl to various classes to create breakpoints. This will cause the width to go from 50% to 100% at the large breakpoint.

    l-column/6:lg

System margin and padding controlled by the systemMargin in the config file.

    u-[m, p]/system

    u-[m, p]t/system

    u-[m, p]b/system

    u-[m, p]x/system

    u-[m, p]y/system

[ View Documentation ](https://neumattercss.com)

## Table of Contents

1. [ Download ](#download) 


2. [ Install ](#install) 


3. [ Getting Started ](#gettingstarted) 


4. [ Generate Config File ](#genconfig) 


5. [ Configuration Options ](#config) 


6. [ Compile ](#compile) 


7. [ Samples ](#samples) 




### Download

Download the /_build directory



### Install

    

    npm i @neumatter/neumattercss 



### Getting Started

Edit your package.json file and in the scripts write:

    

    "neucss": "./node_modules/.bin/neucss"



### Generate the neumatter.config file

    

    npm run neucss config



### Configuration Options

To compile neumatter.css to a certain directory edit the exportPath in neumatter.config.

Edit colors, system margin & padding, system border radius, and exclude css from being compiled.



### Compile neumatter.css

    

    npm run neucss compile



### Samples of neumatter.css in use:

![plot](https://github.com/Clyng57/neumatter/raw/main/public/neumattercssBGColorPage.png)

![plot](https://github.com/Clyng57/neumatter/raw/main/public/neumattercssConcavePage.png)

![plot](https://github.com/Clyng57/neumatter/raw/main/public/neumattercssFormPage.png)

[ View More ](https://neumattercss.com)